VS code 常用插件推荐(总结整理篇)
![VS code常用插件推荐(总结整理篇)](https://static001.geekbang.org/infoq/c6/c6e0be88aa3b14b1a380aa11f4cb116c.webp)
![](https://static001.geekbang.org/infoq/61/614bd9bd240c167a318c6b0f03369259.jpeg?x-oss-process=image/resize,p_80/auto-orient,1)
简介
vscode 是微软开发的的一款代码编辑器,就如官网上说的一样,vscode 重新定义(redefined)了代码编辑器。当前市面上常用的轻型代码编辑器主要是:sublime,notepad++,editplus,atom 这几种。比起 notepad++、editplus,vscode 集成了许多 IDE 才具有的功能,比起它们更像一个代码编辑器;比起 sublime,vscode 颜值更高,安装配置插件更为方便;比起 atom,vscode 启动速度更快,打开各种大文件不卡。可以说,vscode 既拥有高自由度、又拥有高性能和高颜值,最关键的是,vscode 还是一款免费并且有团队持续快速更新的代码编辑器。可以说,vscode 是代码编辑器的首选。个人推荐编写前端代码时,代码编辑器选择 vscode,IDE 选择 WebStorm。vscode 安装插件只需要点击图片所示按钮,即可进入拓展,在搜索框中输入插件名点击安装后,等待安装好即可点击重新加载重启 vscode 使得插件生效。
![](https://static001.geekbang.org/infoq/4e/4e5a8496531eecf41ad776c3eaf741f7.jpeg?x-oss-process=image/resize,p_80/auto-orient,1)
1、Chinese (Simplified) Language Pack for Visual Studio Code.
![](https://static001.geekbang.org/infoq/b8/b81506c31225f231f37b7a1fd9734c26.png)
此中文(简体)语言包为 VS Code 提供本地化界面。安装后,在 locale.json 中添加 “locale”: “zh-cn”,即可载入中文(简体)语言包。要修改 locale.json,你可以同时按下 Ctrl+Shift+P 打开命令面板,之后输入 “config” 筛选可用命令列表,最后选择配置语言命令。
可以将编译器汉化。非常适合英文不好的同学。
2.Code Debugger
![](https://static001.geekbang.org/infoq/61/61680174ccf55f609295f1bf4cbb05cf.png)
无需配置 launch.json 即可进行单文件调试,点击右上角虫子图标或者右键菜单都可以。
支持 JS、TS、Python、Dart、Coffeescript、Go、C/C++、Rust、Bash、Lua。
3.Debugger for Chrome
![](https://static001.geekbang.org/infoq/7c/7c9fb181ba464335d4763c4c330442e1.png)
支持谷歌浏览器调试 bug
4.ES7 React/Redux/GraphQL/React-Native snippets
![](https://static001.geekbang.org/infoq/bb/bb718912caa1ca7783cab7b40b14250f.png)
在 VS Code 中支持 React Native,React,Redux 常见代码片段的插件.
5.ESLint
![](https://static001.geekbang.org/infoq/49/49c00d2e436381ccdbf8a03adb9e2aad.png)
ESLint 是一个代码规范和错误检查工具,所有东西都是可以插拔的。你可以调用任意的 rule api 或者 formatter api 去打包或者定义 rule or formatter。任意的 rule 都是独立的。没有特定的 coding style,你可以自己配置。
6.GitLens — Git supercharged
![](https://static001.geekbang.org/infoq/e0/e0c9e5be2d9971ebf8da5bae8366693a.png)
GitLens 一个很厉害的 vscode 的 git 插件,支持在编译器终端 git 各种操作。
7.HTML CSS Support
![](https://static001.geekbang.org/infoq/02/0234333b37a12bdbc88110259e5210d9.png)
在编写样式表的时候,自动补全功能大大缩减了编写时间。
8.JavaScript (ES6) code snippets
![](https://static001.geekbang.org/infoq/8b/8bb2a2453598b2a1d9a01d6e0a927f89.png)
支持 ES6 语法提示。
9.Mithril Emmet
![](https://static001.geekbang.org/infoq/4a/4afc00e237f0e64169d194999415f795.png)
Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具. 在前端开发的过程中,一大部分的工作是写 HTML、CSS 代码。特别是手动编写 HTML 代码的时候,效率会特别低下,因为需要敲打很多尖括号,而且很多标签都需要闭合标签等。于是,就有了 Emmet,它可以极大的提高代码编写的效率,它提供了一种非常简练的语法规则,然后立刻生成对应的 HTML 结构或者 CSS 代码,同时还有多种实用的功能帮助进行前端开发。VsCode 内置了 Emmet 语法,在后缀为.html/.css 中输入缩写后按 Tab 键即会自动生成相应代码.
10.Path Intellisense
![](https://static001.geekbang.org/infoq/4d/4d319b5045e12886b627627633fbe5db.png)
路径提示插件。
11.Prettier - Code formatter
![](https://static001.geekbang.org/infoq/9f/9fad9bc5d35d818273dd9e95ccac8c02.png)
对代码进行快速格式化。
12.Vue 3 Snippets
![](https://static001.geekbang.org/infoq/6f/6f2c998bcdbd5450982f416420d42c6b.png)
这是一款在 Vue 2 或者 Vue 3 开发中提供代码片段,语法高亮和格式化的 VS Code 插件,能极大提高你的开发效率。
13.VueHelper
![](https://static001.geekbang.org/infoq/54/542d9c86fbb770fa6a1bd1e955806846.png)
vscode 最好的 vue 代码提示插件,不仅包括了 vue2 所有 api,还含有 vue-router2 和 vuex2 的代码提示.(此插件作者已转行做影视,可以使用 Vue 3 Snippets,如果不使用本插件)。
VS code 快捷键
![](https://static001.geekbang.org/infoq/90/90bdebfa55f2d5d8a46f10faf5f5a54f.jpeg?x-oss-process=image/resize,p_80/auto-orient,1)
好啦,本期内容就分享到这里,我们下期见!
版权声明: 本文为 InfoQ 作者【孙叫兽】的原创文章。
原文链接:【http://xie.infoq.cn/article/55c0c157f2b75dd134acbc98b】。未经作者许可,禁止转载。
评论