选型
插件的开发和我们正常开发一个前端项目(用vue项目来举例)是大体上相似的,也就是我们可以从第一行代码开始写。同时,官方也提供了一个脚手架,用来生成基础代码。
按照习惯,我个人还是喜欢通过脚手架来生成一个基本的骨架,之后再逐步完善的。
官方提供的脚手架地址:Github
安装脚手架
npm i -g yo generator-code点击复制复制失败已复制
生成项目
$ yo code _-----_ ╭──────────────────────────╮ | | │ Welcome to the Visual │ |--(o)--| │ Studio Code Extension │ `---------´ │ generator! │ ( _´U`_ ) ╰──────────────────────────╯ /___A___\ / | ~ | __'.___.'__ ´ ` |° ´ Y ` ? What type of extension do you want to create? (Use arrow keys) ❯ New Extension (TypeScript) // Hello World 示例插件项目,TypeScript语言版 New Extension (JavaScript) // Hello World 示例插件项目,JavaScript语言版 New Color Theme // 主题插件 New Language Support // 语言支持插件(编程语言,不是自然语言) New Code Snippets // 代码片段插件 New Keymap //快捷键插件 New Extension Pack // 空插件 New Language Pack (Localization) // 新语言包(中文、英文这些) ? What type of extension do you want to create? New Extension (TypeScript) ? What's the name of your extension? QuecPython ? What's the identifier of your extension? quecpython ? What's the description of your extension? QuecPython Support ? Initialize a git repository? Yes ? Bundle the source code with webpack? No ? Which package manager to use? yarn点击复制复制失败已复制
这里我们选择 Hello World
示例插件项目, TypeScript
语言版,后面的配置按需填写即可。
温馨提示
不建议使用 webpack
打包, ts
自带的 tsc
足够使用了。
等待安装完成依赖,会出现如下说明:
Your extension quecpython has been created! To start editing with Visual Studio Code, use the following commands: cd quecpython code-insiders . Open vsc-extension-quickstart.md inside the new extension for further instructions on how to modify, test and publish your extension. For more information, also visit http://code.visualstudio.com and follow us @code.点击复制复制失败已复制
注意:
这里有一个坑,它说在 quecpython
文件夹下通过 code-insiders .
命令开启 vscode
编辑需要将 vscode
的可执行文件注册到系统的环境变量中,很多时候安装 vscode
并没有添加到环境变量,不要为其疑惑。
最终生成的项目目录结构如下:
quecpython ├── CHANGELOG.md ├── .eslintrc.json ├── .gitignore ├── package.json ├── README.md ├── src │ ├── extension.ts │ └── test │ ├── runTest.ts │ └── suite ├── tsconfig.json ├── vsc-extension-quickstart.md ├── .vscode │ ├── extensions.json │ ├── launch.json │ ├── settings.json │ └── tasks.json ├── .vscodeignore ├── yarn.lock └── .yarnrc 4 directories, 16 files点击复制复制失败已复制
工程配置
接下来是工程配置相关, husky
、 lint-staged
、 eslint
等等需要集成,因为这个是 typescript
项目,所以配置参考:nestjs工程配置