VSCode 前端常用插件

更新：2022-12-12

Visual Studio Code是一款非常适用于前端开发的编辑器(￣▽￣)"

VSCode 支持第三方插件下载，可以根据自己的开发习惯，下载不同插件，打造自己专属的编辑器。

前端通用插件

1. Auto Close Tag

作用：自动闭合标签

图标：

2. Auto Rename Tag

作用：标签跟随修改

图标：

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

作用：中文汉化

图标：

4. CSS Peek

根据Class名快速定位样式

图标：

5. Debugger for Chrome

作用：通过在编辑器的代码上打断点，在浏览器中调试Bug。

说明：其实这个插件一般不怎么用（虽然很好用），个人还是比较习惯在浏览器里直接打断点进行调试。

图标：

6. ESLint

作用：语法检查

图标：

7. JavaScript (ES6) code snippets

作用：ES6 语法支持

图标：

8. Material Icon Theme

作用：文件图标主题

说明：主题插件很多，个人习惯这个使用这个

图标：

9. npm Intellisense

作用：自动完成导入语句中的npm模块

图标：

10. open in browser

作用：在浏览器中快速打开页面

说明：当编辑器当前窗口为 Html 文件时，通过快捷键 Alt + B 可在浏览器中快速打开

图标：

11. Bracket Pair Colorizer2

作用：对应括号、大括号分颜色显示

图标：

Vue 常用插件

1. Vue Language Features (Volar)

作用：Vue语法检查，支持 setup 语法糖

2. Vue 3 Snippets

作用：基于Vue2、3 API 的语法提示，快速生成 vue2 模板，

3. Vetur

作用：Vue 语法检查，Vue3 的 setup 语法糖会误报

4. Vue VSCode Snippets

作用： vue 语法支持，快速生成 .vue 组件模板、api 语法提示，包含vue2 和 vue3，但此插件依赖 Vetur ！！！

PS：3和4 比较适用于vue2，因为1和3并不兼容，在不想频繁切换插件的情况下，对于vue 开发的小伙伴来说只安装1和2就好啦！

React 常用插件

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

作用：快速生成组件模板，提示

其它推荐

1. koroFileHeader

作用：注释文档生成

图标：

2. Path Intellisense

作用：编辑路径自动补全

图标：

3. HTML Snippets

作用：Html标签提示、补全

说明：这个插件对新手来说非常实用，如果已经很熟悉Html 标签，它就有那么点鸡肋了

图标：

4. HTML CSS Support

作用：Html / CSS 提示、补全

图标：

5. GitLens

作用：可查看Git提交历史

图标：

image.png

6. cssrem

作用：将px -> rem

说明：此插件默认1em = 16px，可在 设置 → 扩展 中修改此设置

图标：

7. EasyLess

作用：Ctrl + S 将 .less 文件，直接编译成对应名称的.css文件
图标：