记录vscode常用插件

配置相关

本文主要是为了记录vscode经常用到的一些好用的插件，防止换设备以后还要重新找插件，特此Mark。

---

中文显示：Chinese

支持右键在浏览器打开：open in browser

本地服务器：Live Server

可以右键直接使用在线服务器运行，代码改变后浏览器会自动更新，不用手动刷新。

主题

Atom One Dark Theme

喜欢深色主题的可以考虑。

文件夹图标，文件图标主题：Material Icon Theme

代码相关

---

大小写转换：change-case

在vscode中用于生成文件头部注释和函数注释的插件：koroFileHeader

setting.json

"fileheader.customMade": {
  "Author": "your name",
  "Date": "Do not edit",
  "LastEditors": "your name",
  "LastEditTime": "Do not edit",
  "Description": "fileDescription"
}

智能提示：Visual Studio IntelliCode

微软推出的一款代码智能提示插件，和别的插件不同的是，采用的是 AI 技术，吸收了 github 上成千上万的优秀代码，还会结合你日常的编码习惯不断学习进化

代码校验：ESLint

代码格式化工具：Prettier

代码中可以查看git提交信息：GitLens

快速生成指定内容的console.log，小火箭：Turbo Console Log

选中要打印的变量按快捷键：Ctrl+Alt+L

括号颜色：Bracket Pair Colorizer

给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色

HTML、CSS相关

HTML CSS Support：自动提示CSS的样式

---

HTML Snippets：html快捷提示

---

Auto Rename Tag：用于标签重命名

---

Auto Close Tag：标签自动闭合

---

CSS Peek：允许窥视CSS ID和class strings从html文件到相应CSS的定义。 允许窥视和转到定义。

---

JS相关

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

---

路径提示

别名路径跳转：可以使用CTRL+点击直接跳到相应的文件，包括 @/ 这种的。推荐。

---

Path Intellisense：用于输入路径时的提示，不太好使。

vue相关

Vetur：vue 开发必备插件，.vue 文件支持，语法高亮、智能提示，vue2.x 项目可用

---

Volar：vue3.x 项目开发必备

---

Vue Peek：用于跳转

elementUI相关