VsCode前端开发插件推荐

1. Chinese (Simplified) (简体中文)

通过使用“Configure Display Language”命令显式设置 VS Code 显示语言，可以替代默认语言。 按下“Ctrl+Shift+P”组合键以显示“命令面板”，然后键入“display”以筛选并显示“Configure Display Language”命令。按“Enter”，然后会按区域设置显示安装的语言列表，并突出显示当前语言设置。

2. Live Server

开启一个本地服务器，支持代码热更新，修改代码后自动刷新页面

3. Auto Rename Tag

html/xml标签，修改头标签，会自动把闭合标签也修改

4. Auto Close Tag

html/xml标签，打一个标签可以自动闭合标签

5. Highlight Matching Tag

高亮显示匹配的结束和开始标记

6. JavaScript (ES6) code snippets

es6语法智能提示，包含VsCode编辑器的ES6语法中的JavaScript代码片段（同时支持JavaScript和TypeScript）。

7. Prettier - Code formatter

代码格式化插件

8. Eslint

代码规范和错误检查工具
该扩展使用安装在打开的工作区文件夹中的ESLint库。如果文件夹没有提供一个，则扩展程序会查找全局安装版本。如果您还没有在本地或全局安装ESLint，请在工作区文件夹中运行npm install ESLint进行本地安装，或运行npm install-g ESLint进行全局安装。

9. HTML CSS Support

Visual Studio代码的HTML id和类属性智能提示

10. Path Intellisense

资源路径智能提示与补全

11. Image preview

在槽中和悬停时显示图像预览

12. vscode-icons

项目资源目录树加上好看的图标

13. Vetur

Vue.js开发插件，提供了语法高亮、错误提示、自动补全等功能。

14. TypeScript Vue Plugin (Volar)

相信使用 VSCode 开发 Vue2 的同学一定对 Vetur 插件不会陌生，作为 Vue2 配套的 VSCode 插件，它的主要作用是对 Vue 单文件组件提供高亮、语法支持以及语法检测。

而随着 Vue3 正式版发布，Vue 团队官方推荐Volar 插件来代替 Vetur 插件，不仅支持 Vue3 语言高亮、语法检测，还支持 TypeScript 和基于vue-tsc 的类型检查功能。

15. Vue VSCode Snippets

Vue VSCode Snippets 插件旨在为开发者提供最简单快速的生成 Vue 代码片段的方法，通过各种快捷键就可以在 .vue 文件中快速生成各种代码片段。简直是 Vue3 开发必备神器。

该插件支持：Volar、Vue2 和 Vue3。

16. Code Spell Checker

拼写检查插件，可以帮助我们避免代码中的拼写错误。