vscode 插件推荐（前端篇）

概述

 都 2022 年了，还在为寻找 vscode 插件而烦恼吗？还是那句老话，欲善其事，必先利于器。如果你是前端初学者，那么我强烈建议你阅读本文，如果你已经是前端老油子了，那也不妨看看，说不准就找到刚需了呢？

必装插件

Auto Close Tag

自动闭合标签插件，编写HTML时自动添加结束标签

Auto Rename Tag

自动重命名插件，该插件将在修改 HTML 标签时自动重命名结束标签（非自封闭标签），虽然 vscode 已集成了该功能，但在开发 React 项目时，在jsx 或 tsx文件中是不起作用的，所以还是需要借助该插件来帮助完成此操作。

JavaScript (ES6) code snippets

JavaScript(ES6)代码片段插件，该插件为 vscode 编辑器提供代码片段（支持 JavsScript 和 TypeScript），说白了就是提供了更加友好的语法提示和自动补全，话不多说，该插件为前端必装。

HTML CSS Support

HTML CSS 支持插件：在编写样式表的时候，为 CSS 提供了自动补全功能，前端开发必装。

Color Highlight

颜色高亮插件，该插件可以在非 CSS 样式表文件中提供颜色高亮标识，方便开发时识别颜色。

ESLint

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

Live Server

Live Server 插件可以启动具有静态/动态页面实时重载功能的本地开发服务器。

辅助插件

Code Translate

代码翻译插件，对于和我一样英语水平不是很好的开发者来说简直是福音。强大的单词拆分能力: 支持驼峰, 下划线形式等各种单词拆分。

change-case

大小写转换插件，方便快捷修改变量常量名，支持命令式转换和快捷键转换

TabOut

使用 tab 键将光标自动后移的插件，以前在使用 webstorm 时留下的开发习惯，每次输入字符串的''或者()等成对符号时总喜欢按 tab 键将光标后移，而在 vscode 中默认是不会在你按下 tab 键后自动后移光标的，借助此插件可以帮助你延续个人习惯。

Prettier - Code formatter

prettier 绝对是我使用频率最高的插件了，每次保存自动格式化代码的感觉，谁用谁知道。它能帮助你把代码变得更工整更漂亮。

Path Intellisense

路径智能提示插件，vscode 默认的路径提示并不友好，使用该插件可以完美解决路径提示问题，该插件还支持配置别名。

IntelliCode

代码智能提示插件，使用该插件之后你将在编写 Javascript 和 python 时得到友好的语法提示和代码补全。

EditorConfig for VS Code

.editorconfig 文件在协同开发时尤为重要，它强制规定了部分代码和文件的格式规范，我主要使用它强制规定换行符

DotENV

无论是开发 web 应用程序还是 nodejs，我都喜欢使用.env来保存或更改配置，而DotENV可以给.env文件提供语法高亮。

Git History

自从使用了这个插件以后，我就完全弃用了小乌龟来做 git 相关的可视化操作，不得不说，vscode 对于 git 的支持已经完全可以平替之前使用的一系列的 git 可视化操作工具了。真的爱不释手。

主题插件

Atom One Dark Theme

个人非常喜欢的主题，色调看起来非常舒服，尤其是控制台的高亮部分，随意截几张图给大家感受下。

VSCode Great Icons

简约而不简单的图标主题插件，不喜欢花里胡哨图标的朋友，我极力推荐你使用这款主题。

Vue 开发必装

Vetur

开发 vue2 时使用该插件将得到不错的语法高亮和代码补全，开发 vue3 时更推荐使用 Vue Language Features （原名 Volar）

提示

需要注意的是，如果你同时安装了Vetur和Vue Language Features，那么你需要根据项目中 vue 的版本按需启用相应插件，因为Vetur和Vue Language Features存在冲突。开发 vue2 时请禁用Vue Language Features

Vue Language Features (Volar)

开发 vue3 时得到更好的语法高亮和代码补全，使用时请禁用Vetur避免冲突。 顺带提一句，虽然Vue Language Features已经支持 vue2，但需要繁琐的配置，并且 vue2 的支持度相比较Vetur而言不够友好，而非常遗憾的是现阶段我们仍然需要通过切换Vetur与Vue Language Features分别支持 vue2 和 vue3 的开发工作，但好消息是Vue Language Features已被 vue 官方支持并维护，未来应该可以享受到该插件更友好的 vue2 支持。

TypeScript Vue Plugin (Volar)

Vue Language Features的扩展插件，如果你正在开发vue3 + typescript项目，那么该插件将在 vue 模板中提供更友好的类型推导。简直不要太舒服。

Vue VSCode Snippets

vue2和vue3的代码片段插件，在vue3还没出现时就一直在用，vue3发布后，该插件也顺其自然的支持了vue3的Composition API，一直在用，无可挑剔。

Vue 3 Snippets

同样是 vue 的代码片段插件，搭配Vue VSCode Snippets食用，用顺手后提高不少开发效率。

React 开发必装

ES7+ React/Redux/React-Native snippet

开发 React 时使用该插件得到更友好的语法高亮和代码补全，最主要的是支持JSX/TSX语法，但最近发现该插件与Vue Language Features相互冲突，开发 React 时请禁用Vue Language Features相关插件（最好是所有 vue 相关插件），而开发 vue 时同样需要禁用该插件

vscode-styled-components

React 开发时，喜欢All in JS并且热衷于使用styled-components的开发者必装插件，在js/ts文件中，使用模板字符串同样可以为你带来 css 样式表的语法高亮和代码补全。