2021 推荐给 React 开发者的 Visual Studio Code 插件及配置

本文是在 React 工程的 VS Code 插件及配置 基础上编写的，当时写的时候是 2018 年，至今项目组使用 React 开发已经两年多了，是时候更新一波 Visual Studio Code 插件使用文档了。本文主要以实用为目的，本着不折腾的原则，只挑选平时开发 React 工程用的顺手的插件、主题和字体，也欢迎同学们推荐好用的效率神器。

一、Windows 安装 VS Code 的小提示

在安装时推荐勾选下图两个标红的选项，这样安装成功后，鼠标单击右键文件夹或文件就可以直接使用 VS Code 打开了，非常方便。

若安装时没有勾选这两个选项的同学，是不是只能重装 VS Code 才能使用这个功能呢？当然不是，可以参考这篇文章：将 VS Code 添加到右击菜单，通过修改注册表的方式来实现。

二、VS Code 插件的离线安装

由于在银行软开，平时开发只能在内网进行，需要考虑插件的离线安装。参考了简单的 VSCode 插件离线安装方法，发现官方已经很贴心的提供了在线下载插件的功能，总结下来一共 3 步：

• 进入 Visual Studio Marketplace，搜索需要的插件
• 点击 Download Extension，下载下来的是 .vsix 格式文件
• 可视化安装 VS Code 插件的方法：如图点击左侧 EXTENSION 菜单，点击 … 按钮，选择“从 VSIX 安装…” 即可安装。

另外求助一个问题，就是如何下载匹配 VS Code 版本的离线插件。项目的开发环境在内网，导致 VS Code 的版本只能固定在某一个版本，但是插件市场提供的插件离线下载包都是对应的当前最新版本 VS Code 的，如何能够下载到指定版本 VS Code 的离线插件。

2020-12-03 更新，找到了下载指定版本插件的方法，可以查看 Download Extension 请求的 url， 目前的是 https://marketplace.visualstudio.com/_apis/public/gallery/publishers/${publisher_name}/vsextensions/${extension_name}/${version}/vspackage 可以通过查看插件的 Changelog 下载指定的版本，但是插件版本与 VS Code 版本之间的关系目前只能是通过时间来对照查找，不知道有没有更方便的方法。

三、外观配置

VS Code 默认的外观确实不怎么好看，这里推荐两套个人比较喜欢的主题。

默认主题和字体预览：

1、配色主题：

• 下载量排名第一的 VS Code 主题插件：One Dark Pro
• 个人喜欢的主题：Material Theme，选择 Material Theme Palenight High Contrast

2、图标：Material Icon Theme

• 下载量排名第二的 Icon 插件，个人感觉比排名第一的 vscode-icons 更好看一些

3、英文字体：FiraCode

• 安装详见：Fira Code —— 专为编程而生的字体
• 推荐一个在线测试各种编程字体的网站：Programming Fonts

4、中文字体：思源黑体

• 安装详见：Fira Code —— 专为编程而生的字体

最终的配置如下：

"workbench.colorTheme": "Material Theme Palenight",
"workbench.iconTheme": "material-icon-theme",
"editor.fontFamily":  "'Fira Code','Source Han Sans CN'", // 设置的字体类型为 Fira Code 和思源黑体
"editor.fontLigatures": true, // 控制是否启用字体连字
"editor.fontSize": 16, // 字号
"editor.lineHeight": 24, // 行高
"editor.fontWeight": "500",// 字重
"editor.minimap.enabled": false, // 不显示右侧预览地图
"editor.renderIndentGuides": false, // 不显示缩进参考线
"editor.rulers": [120],// 在一定数量的等宽字符后显示垂直标尺。输入多个值，显示多个标尺。若数组为空，则不绘制标尺。
"editor.wordWrap": "on",// 自动换行

One Dark Pro 预览：

Material Theme Palenight High Contrast 预览：

四、实用插件

• Chinese (Simplified) Language Pack for Visual Studio Code：

  • 适用于 VS Code 的中文（简体）语言包
  • 英文好的同学可以不必安装本插件
    

• ESLint:

  • 使用 ESLint 进行代码检查，本插件必备
  • 安装后可以看到在 node 上启动了一个 ESLint server
    

• Prettier:

  • 格式化插件，Opinionated 格式化工具的代表，少些纠结，按照它的约定来就行了
  • 支持语言： JavaScript、TypeScript、Flow、JSX、JSON、CSS、SCSS、Less、HTML、Vue、Angular、GraphQL、Markdown、YAML
  • 可以搭配 ESLint、StyleLint，详见官网文档
    

• GitLens：

  • 增强了 VS Code 内置的 Git 功能
  • 使用 Git 托管的项目必备本插件
    

• [已经内置，不再需要安装该插件] Debugger for Chrome：

  • 已经合并入 vscode-js-debug
  • 从 VS Code 1.46 版本开始内置

• Path Intellisense：

  • 路径自动补全插件
  • 虽然 VS Code 自带了自动补全路径功能，html文件没有问题，但是在 JSX 里有些文件无法智能提示（比如 JSX 里面的 img 的 src ），本插件很好用，相对路径绝对路径都没有问题
    

• JSON Tools

  • 格式化JSON很方便，只需两个快捷键: 格式化JSON Ctrl(Cmd)+Alt+M, 压缩JSON Alt+M
    

• IntelliSense for CSS class names in HTML

  • CSS 智能提示插件
  • 本插件已经支持className 和 class (TypeScript React, JavaScript and JavaScript React language modes)
  • 暂不支持 css module 智能提示
    
    

• CSS Modules：

  • CSS Module 智能提示
  • 本插件可以解决 IntelliSense for CSS class names in HTML 不支持 css module 智能提示的功能
  • 可以实现 css 自动补全、转到定义位置
    
    

• Bracket Pair Colorizer 2：

  • 括号颜色匹配插件,已经升级到了第 2 版，使用与 VS Code 一致的括号分析引擎，速度更快，准确性更高
  • 使用颜色来配对括号
    
    

• Bookmarks：

  • 将常用的位置添加到书签，可以极大提高效率
  • 快捷键： Ctrl + Alt + K / Commond + Option + K
    
    

• CodeSnap：

  • 简单快速生成漂亮的代码截图，非常推荐
    
    

• Tabnine Autocomplete AI：

  • 使用 AI 对代码进行自动补全和提示，用了一段时间，按照习惯补全代码还是很香的
  • 离线也能使用
    
    

五、关于格式化

ESLint + Prettier 应该是标配，具体配置会在下一篇文章。

六、Webpack 别名在 VS Code 中无法跳转到对应文件

在项目根目录创建 jsconfig.json 文件，比如在 webpack 配置了 @src 的别名，配置如下：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@src/*": ["./src/*"]
    }
  }
}

参考链接

• 强大的 VS Code
• 简单的 VSCode 插件离线安装方法
• Fira Code —— 专为编程而生的字体