• Settings-Sync插件源码阅读


    一、介绍

    请参考官网:

    https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

    二、源码目录详解

    Images:图片存放地

    Node_modules: node.js依赖模块

    out:编译输出目录(如果是ts则会输出js)

    script:脚本放置

    .travis.yml: travis 的配置文件,travis 是一种可持续集成(CI)工具,代码提交后自动构建,与github集成的很好,很多github的开源项目都使用 travis 进行CI。

    .vsixmanifest:元数据

    package.json:常用配置

    package.lock.json:版本锁定文件

    tslint.json:语法规则检查文件

    webpack.config.js:webpack执行文件

    package.nls.zh-cn.json:中文命令详解文件

    三、源码阅读

    1.travis.yml文件

    travis 的配置文件,travis 是一种可持续集成(CI)工具,代码提交后自动构建,与github集成

    看图已知是构建集成

    包括构建插件所需的环境、打包部署等

    关于travis可以参考该链接了解: https://travis-ci.org/

    其中script中bash scripts/deploy.sh执行的是部署命令

    代码如图:

    Npm dedupe 重新计算依赖关系

    Npm up 检查版本更新

    Npm install -g vsce 全局安装

    Printf或echo主要是输出

    vsce publish 发布命令

    插件制作与发布可以参考该文章: https://segmentfault.com/a/1190000014758981

    2. .vsixmanifest

    项目模板文件与xml有很大的相似之处

    3.package.json

    代码图一:

    Name:插件名字

    displayName:显示名称

    description:插件描述

    version:版本号

    icon:图标

    publisher:发布者

    author:作者信息

           name:作者名字

           url:作者个人github主页

    email:作者邮箱

    homepage:主页

    galleryBanner:与主题相关

    badges:微章

    包含的内容也就是总下载量、评级等之类的

    指的链接大多为:

    https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

    其中有几个链接是404

    没有什么很重要的,其中有一个链接为: https://codesettingssync.slack.com/

    展示效果如下(实际上是Settings-Sync的一个社区):

    代码图二:

    repository:代码仓库

           Type:版本控制类型(这里是使用git)

           url:为对应的代码仓库地址

    bugs:提交问题的地址

    engines:指定项目运行的node版本范围

    categories:

    插件应用市场分类,可选值: [Programming Languages, Snippets, Linters, Themes, Debuggers, Formatters, Keymaps, SCM Providers, Other, Extension Packs, Language Packs]

    Keywords:字符串数组,方便搜索该模块

    activationEvents:是否激活该插件

    通常有如下八种配置:

    (1)    onLanguage:${language}

    (2)    onCommand:${command}

    (3)    onDebug

    (4)    wordspaceContains:${toplevelfilename}

    (5)    onFileSystem:${scheme}

    (6)    onView:${viewld}

    (7)    onUri

    (8)    *(这里配置*,意思是只要一启动vscode,该插件就会被激活,通常官方不建议这样做)

    main

    main属性指定了程序的主入口文件。意思是,如果你的模块被命名为foo,用户安装了这个模块并通过require(“foo”)来使用这个模块,那么require返回的内容就是main属性指定的文件中module.exports指向的对象。

    它应该指向模块根目录下的文件,对大多数模块而言,这个属性更多的是让模块又一个主入口,但是很多模块并不是这么写的。

    采用这种写法的,以我们自己修改的一个插件,如下所示:

    图一:

    图二(extension.js):

    图二调用图一中的,通常使用require即可调用

    Contributes:

    主要包含这么几类配置以供开发者使用:

    Configuration:设置

    Commands:命令

    Menus:菜单

    Keybindings:快捷键绑定

    Language:新语言支持

    Debuggers:调试

    Breakpoints:断点

    Themes:主题

    Snippets:代码片段

    jsonValidation:自定义JSON校验

    views:左侧侧边栏视图

    viewsContainers:自定义activitybar

    代码图三:

    scripts

    scripts属性是一个对象,里边指定了项目的生命周期的各个环节需要执行的命令。Key是生命周期中的事件,value是要执行的命令。

    参考相关文档(地址为: https://docs.npmjs.com/misc/scripts)

    截图效果如下:

    Dependencies:

    Dependencies属性是一个对象,配置模块依赖的模块列表,key是模块名称,value是版本范围,版本范围是一个字符,可以被一个或多个空格分割。

    Dependencies也可以被指定为一个git地址或者压缩包地址。

    DevDependencies

    与Dependencies,多了一个dev只不过表示是属于开发者环境

    _metadata 元数据 包含的主要是开发者的发布ID和对外开放的名字

    主要参考地址如下所示:

    https://www.cnblogs.com/tzyy/p/5193811.html#_h1_20

    https://www.cnblogs.com/liuxianan/p/vscode-plugin-package-json.html

    https://blog.csdn.net/zrcj0706/article/details/79178371

    4.package.nls.*.js文件详解

    如图所示:

    一共四个分别使用不同的语言

    以package.nls.zh-cn.json来说(包含的提示信息为中文):

    这里面的信息包含提示,也包含在vscode中使用ctrl+shift+p输入的命令中文提示,比如

    如下图所示:

    5.github源代码

    Settings-Sync Github源代码地址为:https://github.com/shanalikhan/code-settings-sync

    github上的源代码与插件源代码差别并不大(如果要说它们有什么差别的话,仅仅只是webpack打包压缩前后的区别)

    webpack打包压缩前,src目录如下:

    webpack打包压缩后就不存在src这个目录,因为src下的ts编译输出js,而js都被压缩成一个extension.js了。

    注意事项:

    通过git clone github上的源代码到本地,常见的错误就是ts报错找不到模块,最直接的解决办法是导入VsCode或者其它IDE,直接在终端或者命令行进入到该插件目录执行npm install 安装相关的包依赖,接着问题就会迎刃而解。

  • 相关阅读:
    初探WebService
    【前端】CSS3实现弹出效果
    html转pdf、html页面保存为word文件、将页面上的table表格导出为excel
    DES64位加密解密
    xml文件数据上报——根据模型生成对应的xml文件进行上报
    数据上报-动态生成winform表单
    图片轮播 及通知公告上滚动 (无空隙滚动)
    jQuery 全选与不全选 Jquery each
    webform快速创建表单内容文件--oracle 数据库
    Ajax 通过post提交数据到一般处理程序,后台快速获取数据的方法
  • 原文地址:https://www.cnblogs.com/youcong/p/10380501.html
Copyright © 2020-2023  润新知