【VScode】前端必备插件（全）

基础

Chinese (Simplified)

• 适用于 VS Code 的中文（简体）语言包
  

Auto Close Tag

• 自动闭合HTML/XML标签
  

Auto Rename Tag

• 自动重命名配对的HTML/XML标记 ，完成另一侧标签的同步修改

Path Intellisense

• 自动提示文件路径，支持各种快速引入文件，支持自动补全
  

Bracket Pair Colorizer

• 给括号加上不同的颜色，便于区分不同的区块
  

JavaScript(ES6) code snippets

• ES6语法智能提示以及快速输入，除js外还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间
  

HTML CSS Support

• 让 html 标签上写class 智能提示当前项目所支持的样式
  

beautify

• 格式化代码工具
  

Prettier - Code formatter

• 使用 prettier 的代码格式化程序

ESlint

• JavaScript代码检测, JavaScript代码风格检测, JavaScript代码自动格式化

Vue 插件

Vetur

• Vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。

Vue 3 Snippets

• Vue 智能感知，Vue.js 3和Vue.js 2代码片段扩展

Vue VSCode Snippets

• 代码片段引用，比如输入vbase就好自动创建vue文件代码结构
  

Vue Language Features (Volar)

• Vue 3 的语言支持

React 插件

ES7+ React/Redux/React-Native snippets

• 在JS/TS中使用ES7+语法。并且扩展React, React- native和Redux。可定制的。内置集成与prettier。

Simple React Snippets

• 内置诸多React片段，具体使用案例前往vscodes查看

ssh 插件

Remote - SSH

• 使用SSH打开远程机器上的任何文件夹，并利用VS Code的全部功能集。

Remote - SSH: Editing Configuration Files

• 编辑SSH配置文件

Git 插件

Gitlens：提示提交记录

• 任意选择一个文件，你鼠标点击哪一行代码，后面都会提示谁在什么时候做了什么，鼠标悬浮提示上便会直接显示作者，版本，时间
  

Git History：查看git历史记录

• 查看git日志、文件历史、比较分支或提交
  

Git History Diff：对比git历史记录

• 查看git历史记录。查看已提交文件的差异。查看git责备信息。查看存储细节。

扩展（非必要）

Image Preview

• 鼠标移到路径里显示图像预览，比如src绑定一张图片地址，悬浮到路径上即可显示图片

jQuery Code Snippets

• jQuery代码智能提示