vscode常用插件

基础必备插件

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

让软件显示为简体中文语言。

2. Prettier：代码格式化

Prettier 是一个代码格式化工具，只关注格式化，但不具备校验功能。在一个多人协同开发的团队中，统一的代码编写规范非常重要。一套规范可以让我们编写的代码达到一致的风格，提高代码的可读性和统一性。自然维护性也会有所提高。

3. ESLint：代码格式校验

日常开发中，建议用可以用 Prettier 做代码格式化，然后用 eslint 做校验。

4. Beautify

代码格式化工具。
Beautify 插件可以快速格式化你的代码格式，让你在编写代码时杂乱的代码结构瞬间变得非常规整，代码强迫症必备，较好的代码格式在后期维护以及他人阅读时都会有很多的便利。
插件支持的语言非常多，基本堵盖了目前所有的语言，而且你还可以自定义代码格式化的结构。

5. Auto Close Tag、Auto Rename Tag

自动闭合标签、自动对标签重命名。

js,css相关插件

1. open in browser

安装open in browser插件后，在 HTML 文件中「右键选择 --> Open in Default Browser」，即可在浏览器中预览网页。

2. Live Server

在本地启动一个服务器，代码写完后可以实现「热更新」，实时地在网页中看到运行效果。就不需要每次都得手动刷新页面了。
使用方式：安装插件后，开始写代码；代码写完后，右键选择「Open with Live Server」。

3. JavaScript(ES6) code snippets

ES6 语法智能提示，支持快速输入。

4. CSS Peek

增强 HTML 和 CSS 之间的关联，快速查看该元素上的 CSS 样式。

vue相关插件

1. Vetur

Vue 多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。VS Code 官方钦定 Vue 插件，Vue 开发者必备。

2. Vue CSS Peek

CSS Peek 对 Vue 没有支持，该插件提供了对 Vue 文件的支持。

3. Vue VSCode Snippets

vue补全

4. Element UI Snippets

Element UI补全

react相关插件

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

React/Redux/react-router 的语法智能提示。

小程序,app相关插件

1. minapp：小程序支持

小程序开发必备插件。

Markdown相关插件

1. Markdown Preview Github Styling

以 GitHub 风格预览 Markdown 样式，十分简洁优雅。就像下面这样，左侧书写 Markdown 文本，右侧预览 Markdown 的渲染效果：

2. Markdown Preview Enhanced
   预览 Markdown 样式。

VS Code 配置相关插件

1. Settings Sync

地址：https://github.com/shanalikhan/code-settings-sync
作用：多台设备之间，同步 VS Code 配置。通过登录 GitHub 账号来使用这个同步工具。

2. vscode-syncing

地址：https://github.com/nonoroazoro/vscode-syncing
作用：多台设备之间，同步 VS Code 配置。

其他推荐插件

1. GitLens

Git 神器，码农必备。

2. highlight-icemode：选中相同的代码时，让高亮显示更加明显

VSCode 自带的高亮显示，实在是不够显眼。用插件支持一下吧。
所用了这个插件之后，VS Code 自带的高亮就可以关掉了：
在用户设置里添加"editor.selectionHighlight": false即可。
参考链接：vscode 选中后相同内容高亮插件推荐

3. TODO Highlight(备忘插件)

写代码过程中，突然发现一个 Bug，但是又不想停下来手中的活，以免打断思路，怎么办？按照代码规范，我们一般是在代码中加个 TODO 注释。比如：（注意，一定要写成大写TODO，而不是小写的todo）
//TODO:这里有个bug，我一会儿再收拾你

4. javascript console utils：快速打印 log 日志

安装这个插件后，当我们按住快捷键「Cmd + Shift + L」后，即可自动出现日志 console.log()。简直是日志党福音。
当我们选中某个变量 name，然后按住快捷键「Cmd + Shift + L」，即可自动出现这个变量的日志 console.log(name)。
其他的同类插件还有：Turbo Console Log。

不过，生产环境的代码，还是尽量少打日志比较好，避免出现一些异常。

5. Local History

维护文件的本地历史记录，强烈建议安装。代码意外丢失时，有时可以救命。

6. 必备调试工具 Debugger for Chrome

此工具简直就是前端开发必备，将大大地改变你的开发与调试模式。
以往的前端调试，主要是 JavaScript 调试，你需要在 Chrome 的控制台中找到对应代码的部分，添加上断点，然后在 Chrome 的控制台中单步调试并在其中查看值的变化。
而在使用了 Debugger for Chrome 后，当代码在 Chrome 中运行后，你可以直接在 VSCode 中加上断点，点击运行后，Chrome 中的页面继续运行，执行到你在 VSCode 中添加的断点后，你可以直接在 VSCode 中进行单步调试。

7. 代码拼写检查 Code Spell Checker

此插件安装后就不用管就好了，在你代码中有单词拼写错误时，你就会发现它的好处，因为我们写代码毕竟都是大量的英文单词变量定义，插件还可以给出错误拼写单词的建议。

8. Highlight Matching Tag标签高亮
9. path autocomplete:路径智能补全