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

一、Windows 安装 VS Code 的小提示

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

二、VS Code 插件的离线安装

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

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

三、外观配置

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

• GitLens：

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

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

  • 已经合并入 vscode-js-debug
  • 从 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：

  • 括号颜色匹配插件
  • 使用颜色来配对括号

• Bookmarks：

  • 将常用的位置添加到书签，可以极大提高效率

• CodeSnap：

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

• Tabnine Autocomplete AI：

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

  • 离线也能使用

五、关于格式化插件

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

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

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

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

七、参考链接

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