VS code常用插件推荐（总结整理篇）

Posted 2021-06-27 孙叫兽

简介

vscode是微软开发的的一款代码编辑器，就如官网上说的一样，vscode重新定义（redefined）了代码编辑器。当前市面上常用的轻型代码编辑器主要是：sublime，notepad++，editplus，atom这几种。比起notepad++、editplus，vscode集成了许多IDE才具有的功能，比起它们更像一个代码编辑器；比起sublime，vscode颜值更高，安装配置插件更为方便；比起atom，vscode启动速度更快，打开各种大文件不卡。可以说，vscode既拥有高自由度、又拥有高性能和高颜值，最关键的是，vscode还是一款免费并且有团队持续快速更新的代码编辑器。可以说，vscode是代码编辑器的首选。个人推荐编写前端代码时，代码编辑器选择vscode，IDE选择WebStorm。vscode安装插件只需要点击图片所示按钮，即可进入拓展，在搜索框中输入插件名点击安装后，等待安装好即可点击重新加载重启vscode使得插件生效。

1、Chinese (Simplified) Language Pack for Visual Studio Code.

此中文（简体）语言包为 VS Code 提供本地化界面。安装后，在 locale.json 中添加 “locale”: “zh-cn”，即可载入中文（简体）语言包。要修改 locale.json，你可以同时按下 Ctrl+Shift+P 打开命令面板，之后输入 “config” 筛选可用命令列表，最后选择配置语言命令。

可以将编译器汉化。非常适合英文不好的同学。

2.Code Debugger

无需配置launch.json即可进行单文件调试，点击右上角虫子图标或者右键菜单都可以。

支持JS、TS、Python、Dart、Coffeescript、Go、C/C++、Rust、Bash、Lua。

3.Debugger for Chrome

支持谷歌浏览器调试bug

4.ES7 React/Redux/GraphQL/React-Native snippets  

在 VS Code 中支持 React Native，React，Redux 常见代码片段的插件.

5.ESLint 

ESLint 是一个代码规范和错误检查工具，所有东西都是可以插拔的。你可以调用任意的rule api或者formatter api 去打包或者定义rule or formatter。任意的rule 都是独立的。没有特定的coding style，你可以自己配置。

6.GitLens — Git supercharged

GitLens一个很厉害的vscode的git插件，支持在编译器终端git各种操作。

7.HTML CSS Support 

在编写样式表的时候，自动补全功能大大缩减了编写时间。

8.JavaScript (ES6) code snippets 

支持ES6语法提示。

9.Mithril Emmet 

 

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具. 在前端开发的过程中，一大部分的工作是写 html、CSS 代码。特别是手动编写 HTML 代码的时候，效率会特别低下，因为需要敲打很多尖括号，而且很多标签都需要闭合标签等。于是，就有了 Emmet，它可以极大的提高代码编写的效率，它提供了一种非常简练的语法规则，然后立刻生成对应的 HTML 结构或者 CSS 代码，同时还有多种实用的功能帮助进行前端开发。VsCode内置了Emmet语法,在后缀为.html/.css中输入缩写后按Tab键即会自动生成相应代码.

10.Path Intellisense 

路径提示插件。

11.Prettier - Code formatter 

对代码进行快速格式化。

12.Vue 3 Snippets

这是一款在 Vue 2 或者 Vue 3 开发中提供代码片段，语法高亮和格式化的 VS Code 插件，能极大提高你的开发效率。

13.VueHelper

vscode最好的vue代码提示插件，不仅包括了vue2所有api，还含有vue-router2和vuex2的代码提示.(此插件作者已转行做影视，可以使用Vue 3 Snippets，如果不使用本插件)。

VS code快捷键

好啦，本期内容就分享到这里，我们下期见！