Good use VS Code plug-ins, you can not only save time, but also improve efficiency.
VS Code there is a market, it provides a lot of plug-ins. Developers can plug-in installation into a text editor, enhanced editing functions. In the View menu, select the extension option or press shift + cmd + X to enter the market.
Make good use of VS Code plug-ins, not only saves time, but also improve efficiency, make you a better developer.
1. Live Server
The plug-in allows us to change the code in the IDE, automatically reload the Web page.
Once installed Live Server, right-click on the html file, you can see the options Open with Live Server [Alt + L + Q].
download link:
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
2. Quokka.js
Quokka.js will automatically calculate the results as you type, and print the results in the IDE.
download link:
https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode
3. Code Spell Checker
It is a spell checker, we can report some common misspellings for developers. It fits Camel code.
download link:
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker
4. gitlens
GitLens enhances Visual Studio Code function built into Git.
It not only helps you see visually by Git blame annotations of the code, but also can seamlessly navigate and explore Git repository, gain valuable insights by comparing the powerful command and so on.
download link:
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
5. Prettier
Prettier 是一个严格基于规则的代码格式化程序。
它解析代码并使用自己的规则重新打印代码，从而实现风格一致。这是一个重要的工具，无需开发人员做任何工作，它就能让我们获得格式正确的代码。
Prettier 提供合理的默认值，但你也能在项目的根目录下提供一个配置文件来设置自己的标准，比如行长度、制表符 / 空格的数量等等。
下载地址：
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
6. ESLint
ESLint 是一款静态代码分析工具，用来识别 JavaScript 代码中出现的有问题的模式。
ESLint 中的规则是可配置的，用户可以定义和加载自己的规则。它还涵盖了代码质量和编码风格问题。
下载地址：
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
7. vscode-icons
该插件会基于文件扩展名在 the tree view 中的文件名旁添加图标，让你更容易地识别文件。
下载地址：
https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons
8. Live Saas Compiler
它能帮你实时把 SASS/SCSS 文件编译 / 转译成 CSS 文件，并且提供在线浏览器重载。
下载地址：
https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass
9. JavaScript (ES6) code snippets
这个插件包含面向 VS Code 编辑器的 ES6 语法的 JavaScript 代码片段（支持 JavaScript 和 TypeScript）。
下载地址：
https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets
10. Browser Preview
它可以让你在编辑器中打开一个用于调试的真正的浏览器预览。
下载地址
https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview
11. Path Intellisense
该扩展可以自动补全代码中的路径和文件名。
下载地址：
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
12. Bracket Pair Colorizer
这个扩展允许用颜色来标识匹配的括号。用户可以定义要匹配的字符和要使用的颜色。
下载地址：
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
13. Vim
VSCodeVim 是一个用于 Visual Studio Code 的 Vim 仿真器，为你的文本编辑器带来 Vim 的强大功能。
下载地址：
https://marketplace.visualstudio.com/items?itemName=vscodevim.vim
14. TODO Highlight
高亮显示代码中的 TODO、FIXME 及其他注解。
下载地址：
https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight
15. Color Highlight
这个扩展可以风格化在你的文件中找到的 css/web 颜色，所以你无需打开页面就能看到它们是什么颜色。
下载地址：
https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight
