React 工程的 VS Code 插件及配置

最近使用 VS Code 来开发 React，本文记录一些使用的 VS Code 插件以及离线安装插件的方法。

Windows 安装 VS Code 的小提示

在安装时推荐勾选如图两个选项，这样右键文件夹或文件就可以直接使用 VS Code 打开了，非常方便。

VS Code 插件的离线安装

内网环境的开发需要考虑插件的离线开发，参考了简单的 VSCode 插件离线安装方法，发现官方已经很贴心的提供了下载插件的方式，总结下来一共3步：

• 进入 VS Code Market，搜索需要的插件
• 点击Download Extension，下载下来的是.vsix格式文件
• 安装VS Code时配置好了环境变量，在控制台执行 code --install-extension your-extension-name.vsix 即可安装

2019-10-19 更新，可视化安装 VS Code 插件的方法： 如图点击左侧 EXTENSION 菜单，点击 … 按钮，选择“从 VSIX 安装…” 即可安装。

一些实用的插件

• 适用于 VS Code 的中文（简体）语言包 ：
  • 地址： Chinese (Simplified) Language Pack for Visual Studio Code
  • 英文好的同学可以不必安装本插件
• 一个下载量最多的 VS Code 主题插件： One Dark Pro
  • 地址： One Dark Pro
• ESLint:
  • 地址： ESLint
• Debugger for Chrome：
  • 地址：Debugger for Chrome
  • 可以和 WebStorm 一样打断点了
• 路径自动补全插件： Path Intellisense
  • 地址：Path Intellisense
  • 虽然 VS Code 自带了自动补全路径功能，html文件没有问题，但是在 JSX 里有些文件无法智能提示（比如 JSX 里面的 img 的 src ），本插件很好用，相对路径绝对路径都没有问题
• JSON工具： JSON Tools
  • 地址： JSON Tools
  • 格式化JSON很方便，只需两个快捷键: 格式化JSON Ctrl(Cmd)+Alt+M, 压缩JSON Alt+M
• CSS 智能提示插件： IntelliSense for CSS class names in HTML
  • 地址： IntelliSense for CSS class names in HTML
  • 本插件已经支持className 和 class (TypeScript React, JavaScript and JavaScript React language modes)
  • 暂不支持 css module 智能提示
• CSS Module 智能提示
  • 地址： CSS Modules
  • 本插件可以解决 IntelliSense for CSS class names in HTML 不支持 css module 智能提示的功能
  • 可以实现 css 自动补全、转到定义位置
• 括号颜色匹配： Bracket Pair Colorizer
  • 地址： Bracket Pair Colorizer
  • 使用颜色来配对括号
• Bookmarks
  • 地址： Bookmarks
  • 将常用的位置添加到书签，可以极大提高效率
• React/Redux/react-router Snippets
  • 地址： React/Redux/react-router Snippets
  • React 的代码段，熟悉了之后很方便

JSX 中使用 Emmet 快速补全标签

• VS Code 自带了 Emmet，可以自动补全 HTML 文件中的标签
• 想要补全 react 文件中 JSX 里面的标签，需要在用户设置中增加 Emmet 的设置：

{
 ...
    // 在默认不支持 Emmet 的语言中启用 Emmet 缩写功能。在此添加该语言与受支持的语言间的映射。
    // 示例: {"vue-html": "html", "javascript": "javascriptreact"}
    "emmet.includeLanguages": {"javascript": "javascriptreact"},
    // 启用后，按下 TAB 键，将展开 Emmet 缩写。
    "emmet.triggerExpansionOnTab": true
 ...
}

• 其中emmet.triggerExpansionOnTab配置为true可以使用 TAB 键自动补全组件标签了
• 可以自动将class转为className，很方便

关于格式化插件

感觉自带的代码格式化功能基本够用了，就没安装 Prettier 和 Beautify，Beautify反而还会把react里面的jsx格式化弄乱。

参考资料

• 强大的 VS Code
• 简单的 VSCode 插件离线安装方法