VS Code 插件开发（一） — 环境准备

VS Code 是微软开发的轻量级编辑器，使用简单，并且功能强大。另外其有丰富的插件生态，除了能找到代码高亮、代码补全等有助于开发的插件外，你甚至能找到一些听歌、玩游戏的插件。总之，只有你想不到，没有你找不到，如果实在找不到你想要的插件，那你就动手写一个吧。

我为什么要开发一个 VS Code 插件

在公司的前端项目当中，我经常会遇到，要切换不同的后端环境，或联调接口，或复现bug。但是目前我们前端开发是通过 webpack-server 来启动一个前端代理服务器，但是 webpack-server 的每次启动都需要进行 webpack 的打包，而这个过程是极其慢的，导致时间就这样被白白浪费掉了。

为了解决这个问题，起初我是通过在 webpack-server 的 proxy 中配置多个后端环境地址，通过路径来进行区分。这样就每次要切环境的时候，只需要去改变前端代码中的 BASE_API，而不需要去重启服务。但是使用过一段时间之后，还是感觉不舒服。因为我们的后端环境太多了，我已经写了十几个配置了，每次都要去找一下，看看要切换的环境对应的路径，再把路径 copy 到 BASE_API 那里，还是比较麻烦。另外最重要的原因是每次提交代码前，我都需要去检查一下 BASE_API，不能把修改后的代码给提交了，否则生产环境的代码就坏了。所以后来就想，直接用 node 起一个代理服务器吧，每次去重启这个 node 服务器，这样就省去了 webpack 打包的时间。另外考虑到把这个小工具可以给其他同事用，就想到了，既然我们都在用 VS Code 做开发，那么把这个做成一个 VS Code 插件，就非常合适了。有了具体的需求，那就开始看文档，进行开发。

开发前的第一步，就是准备环境。

环境准备

VS Code 插件开发仍然是使用我们喜爱的 JavaScript 进行编写，所以我们要有 node 环境。node 的安装，直接看官网[https://nodejs.org/]就可以了。有了 node 环境，我们需要初始化一个 npm 项目。对于项目的初始化，我们根据官网的推荐，安装老牌脚手架 yeoman，使用 generator-code 模版来初始化。

首先，安装 yo 和 generator-code

npm i -g yo generator-code

之后运行 yo code，出现如下选项。

? What type of extension do you want to create? (Use arrow keys)
❯ New Extension (TypeScript) 
  New Extension (JavaScript) 
  New Color Theme 
  New Language Support 
  New Code Snippets 
  New Keymap 
  New Extension Pack
  New Language Pack (Localization)

这里我们要开发插件，所以可以选择是使用 TS 进行开发还是 JS 开发。除此之外，这里还可以创建开发颜色主题、语言支持、代码片段、键盘按键、插件包（包含多个插件）、语言包的项目。

这里我们以选择 New Extension (TypeScript) 为例，接下来依次按照提示就输入相关内容：

? What's the name of your extension?             # 插件名, 在 VS Code 扩展中展示的名字
? What's the identifier of your extension?       # 插件标识，项目名
? What's the description of your extension?      # 插件描述
? Initialize a git repository?                   # 是否初始化为 git 仓库
? Which package manager to use? (Use arrow keys) # 选择使用哪种包管理器
❯ npm 
  yarn

上面信息输完之后，项目就开始初始化，片刻之后，就会在当前目录下出现如下项目结构：

项目结构跟我们熟悉的前端的项目结构是一样的。用 VS Code 打开此项目，按 f5 之后，就会打开一个新的包括所编写的插件的 VS Code 窗口，另外这这个窗口中，可以打开控制台进行调试，非常方便。

集成 webapck

现在前端项目中 webpack 基本成为标配，因为我们需要对代码进行打包压缩处理，减少网络请求的耗时，并且里面的一些小工具如热更新，也是对开发很有帮助的，所以我们还需要配置一下 webpack 环境。

安装 webpack 和 webpack-cli

npm i --save-dev webpack webpack-cli

另外，用 ts 编写代码的话，安装 ts-loader，用于打包时，把 ts 处理为 js

npm i --save-dev ts-loader

安装好之后，在项目根目录下，创建 webpack.config.js。官网上也给出了一份webpack 配置的模版[https://code.visualstudio.com/api/working-with-extensions/bundling-extension]，我这里就直接 copy 过来，根据项目结构做了少许修改：

{
  target: 'node',

  entry: path.resolve(__dirname, './src/extension.ts'),

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'extension.js',
    libraryTarget: 'commonjs2',
    devtoolModuleFilenameTemplate: '../[resource-path]'
  },
  stats: {
    warningsFilter: [/critical dependency:/i], // 因为在打包过程中，出现了这个警告，为了让其不显示，这里把它过滤掉
  },
  devtool: 'source-map',
  externals: {
    vscode: 'commonjs vscode' // 
  },

  resolve: {
    extensions: ['.js', '.ts']
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'ts-loader'
          }
        ]
      }
    ]
  }
}

这个配置中，需要注意的就是不要把 vscode 的代码打包进去，所以在 externals 中配置上 vscode。

配置文件写好之后，再在 package.json中，把对应的 webpack 命令配上。类似于下面这样，在 dev 中，加上 —watch，使用 webpack 的热更新功能。

"script": {
	"vscode:prepublish": "webpack --mode production",
	"compile": "webpack --mode development",
	"dev": "webpack --mode development --watch"
}

配置好之后，我们运行 npm run dev，之后就可以使用 f5 进行调试了。

这样，我们的 VS Code 插件开发环境，基本就搞好了，之后就可以愉快地开发了。