React 工程的 VS Code 插件及配置


原味地址:https://juejin.im/post/5b5fce12e51d45162679e032

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

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

进入 VS Code Market,搜索需要的插件
点击Download Extension,下载下来的是.vsix格式文件
安装VS Code时配置好了环境变量,在控制台执行 code --install-extension your-extension-name.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 插件离线安装方法


react开发vscode插件推荐
原文地址:https://github.com/xieqingtian/blog/issues/2

由于本人主要是做react开发,用的代码编辑器是传说中的宇宙第一前端神器vscode, 所以在这里记录并推荐一些本人开发过程中常用的一些vscode插件帮助开发。

  1. 代码提示类插件
    1.1 Reactjs code snippets

1.2 React Redux ES6 Snippets

1.3 React-Native/React/Redux snippets for es6/es7
1.4 JavaScript (ES6) code snippets(es6代码片段)
1.5 Typescript React code snippets(这是tsx的react组件片段)
有了上述这些代码片段提示插件就可以大大增加码代码的速度了。

  1. 美化类插件
    2.1 One Dark Pro(atom风格主题)

2.2 vscode-icons(文件图标)

赏心悦目的界面让你越敲越有劲。

  1. 其他实用类插件
    3.1 Beautify css/sass/scss/less(样式代码格式化)

3.2 npm Intellisense(对package.json内中的依赖包的名称提示)

3.3 Path Intellisense(文件路径补全)

3.4 cssrem(px转换为rem)

3.5 CSS Modules(对使用了css modules的jsx标签的类名补全和跳转到定义位置)

以上的插件都安装好了的话基本就可以使用vscode愉快地进行react开发了, 我这里只给出了一些基本常用的插件,如果你发现其他好用的插件请回复我,我将十分感谢。

最后忘了一个插件,不同设备上的vscode配置同步

Settings Sync
有了它就不用每次换个开发环境又重新配置一遍vscode了。

最后的最后,我只想说,vscode强无敌,vscode大法好!

我自己日常开发中使用的扩展

声明:麋鹿与鲸鱼|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - React 工程的 VS Code 插件及配置


Carpe Diem and Do what I like