前端常用的 VSCode 插件整理

这里分享一下自己平时在前端开发中用过的体验不错的 VSCode 插件。

vscode-icons：文件图标主题

该插件提供了一套 Material 风格的文件图标主题。

安装后在左下角设置按钮中切换文件图标主题即可使用。

插件包含的图标列表如下（图片比较长，如果掘金有折叠块功能就好了……）：

CodeSnap：生成代码截图

该插件用于方便地生成小段代码截图。

它能够生成这种样子的代码截图：

该插件的使用方法很简单，用光标选中一段代码，然后右键点击最下方的 “CodeSnap” 按钮即可截图。

随后插件会弹出一个窗口展示截图结果，点击上方的这个圆形图标即可保存图片。

Path Intellisense：文件路径补全

该插件用于自动提示并补全本地文件的路径。

官方给出的使用样例如下：

按照插件文档的说法，使用该插件前建议先在 VSCode 的配置文件 settings.json 中添加以下内容来关闭 VSCode 自带的路径补全功能，以免发生冲突：

{
  "typescript.suggest.paths": false,
  "javascript.suggest.paths": false,
}

文档中还提到，该插件在 Windows 系统下存在一个句号按键 . 相关的 bug，需要在 VSCode 的 keybindings.json 文件中添加以下配置来避免相关问题：

{ 
  "key": ".", "command": "" 
}

另外，如果在 Vite 或 Webpack 等构建工具中配置了路径别名，则需要在 Path Intellisense 中也进行相同配置，否则插件可能无法识别这些路径别名。在 settings.json 中这样进行设置：

{
  "path-intellisense.mappings": {
    "/@": "${workspaceRoot}/src" // 使用 /@ 指代项目中的 src 目录
  }
}

一个例外是，Path Intellisense 能够识别 tsconfig.json 中通过 baseUrl 设置的路径别名，无需再次在 settings.json 中进行设置。如果不希望使用这个路径别名，则应当在 settings.json 中这样设置：

{
  "path-intellisense.ignoreTsConfigBaseUrl": true, // 不使用 TypeScript 配置文件中的 baseUrl 别名
}

最后，Path Intellisense 补全的文件路径时默认不含后缀名的，如果需要补全后缀名，需要在 settings.json 中这样设置：

{
  "path-intellisense.extensionOnImport": true,
}

其他没提到的配置内容可参考 插件文档 。

NPM Intellisense：npm 包名补全

该插件用于在使用 import 或 require 引入 npm 包时自动提示并补全包名。

补全效果演示如下：

NPM Intellisense 默认只会补全 dependencies 字段中列举的 npm 包，如果想令插件对 devDependencies 中的 npm 包也进行补全，则需在 settings.json 中进行以下设置：

{
  "npm-intellisense.scanDevDependencies": true,
}

另外，如果想让插件对 Node 的内置模块（如 path, fs 等）也进行补全，则需在 settings.json 中添加以下内容：

{
  "npm-intellisense.showBuildInLibs": true,
}

Prettier：代码格式化工具

该插件用于在 VSCode 中使用 Prettier 工具进行代码格式化工作。

安装插件后通常需要在 settings.json 中添加以下设置，将 Prettier 设置为默认的代码格式化工具，并开启在保存时自动格式化代码的功能。

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
}

然后最好在项目中也安装一个 Prettier 的 NPM 包，以防没装全局 Prettier 包时插件无法工作：

npm i -D prettier

Prettier 插件的设置界面中可以设置一些基本的代码格式化选项，但还是建议在项目中手动创建 .prettierrc 文件配置格式化的具体选项，并添加 .prettierignore 文件设置不进行格式化的文件。

ESLint：代码检查工具

主要用于检查代码的语法错误，格式检查是顺带的。

类似 Prettier，建议在项目中也安装 ESLint 的 NPM 包：

npm i -D eslint

在 settings.json 中可以进行一些常用功能的配置：

{
  "eslint.enable": true, // 是否开启 ESLint，默认是开启的
  "eslint.packageManager": "npm", // 指明安装了 ESLint 包的管理器，可以为 "npm","yarn" 或 "pnpm"
  "eslint.options": {
    "configFile": "C:/mydirectory/.eslintrc.json" // 手动指明配置文件的位置
  },
  "eslint.run": "onType", // 设置何时运行 ESLint，可以为 "onSave" 或 "onType"，默认为 "onType"
  "eslint.nodePath": "xxx/node_modules", // 手动配置安装了 ESLint 的 node_modules 文件夹路径
  "eslint.alwaysShowStatus": true, // 是否始终显示右下角的 ESLint 状态栏
  "eslint.format.enable": false, // 是否使用 ESLint 进行代码格式化
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true // 是否在在保存时自动修改 ESLint 报错
  }
}

同样地，建议在项目目录下配置 .eslintrc.json 和 .eslintignore 文件。

当 ESLint 和 Prettier 一起使用时，Prettier 的格式化结果可能与 ESLint 检查规则发生冲突，此时需要安装相关的插件来将 Prettier 的格式化规则引入 ESLint 。限于篇幅，这里就不进行详细介绍了。