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 安装相关的包依赖，接着问题就会迎刃而解。