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

简介

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 快捷键

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