原味地址:http://www.javashuo.com/article/p-ybudfjlt-bp.htmljavascript
最近使用 VS Code 来开发 React,本文记录一些使用的 VS Code 插件以及离线安装插件的方法。css
VS Code 插件的离线安装
内网环境的开发须要考虑插件的离线开发,参考了简单的 VSCode 插件离线安装方法,发现官方以及很贴心的提供了下载插件的方式,总结下来一共3步:html
- 进入 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
, 压缩JSONAlt+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格式化弄乱。vue