本文仅记录自己作为前端常用的 vscode 插件，按字母排序。

别名路径跳转

与vue-helper功能类似。

Auto Close Tag

用来自动闭合标签

Name: AutoScssStruct4Vue

根据 vue 文件的模板 template 结构，自动生成对应的 scss 文件。

Better Comments

注释神器。当你的注释代码中含有以下标记时会高亮，达到提醒的效果，如 todo/!/? 。

Bracket Pair Colorizer

省去括号层层嵌套后识别的烦恼。

更新：新版 vscode 已经自带括号颜色区分。

Code Runner

快速测试代码

快捷键：control + alt + N

清空控制台：打开settings.json，设置"code-runner.clearPreviousOutput": true。

CSS Navigation

点击html中的 className 立即跳转到对应的 css 类。

ESLint

校验 js 语法的基本工具。可以给出语法提示，设置settings.json还可以自动修复不规范的 js 代码。

Git Graph

显示 git 提交记录和合并脉络，甚至可以 cherry-pick，功能十分强大。

Git History

GitLens

两个强大的 git 工具，可以查看每行代码的改动信息，文件的修改历史，辅助 git 提交，拉取等。

JSON to TS

与后端联调的时候，请求参数和返回字段很多的时候，一个个录入 ts 类型是非常痛苦的事。有了它，可以直接复制 json 数据，然后新建一个空文件，shift + ctrl + P，找 到JSON to TS点击即可生成 ts 类型。

Live Server

点击右下角启动本地 server，省去手动命令行运行http-server。

Name: NPM-Scripts

侧边栏快捷使用 package.json 中的脚本。

Open in Browser

直接在浏览器打开当前 html。

快捷键：alt + B

Open-in-typora

右键使用 typora 打开 md 文件。windows 系统需要先配置环境变量，参考插件文档说明。

Prettier

很常用的格式化代码工具，配合 Eslint 一起使用。

Prettier ESLint

因为 Prettier 有自己的格式化规范，常常会与 Eslint 冲突。使用该插件可以按照 Eslint 的规则进行格式化，Eslint 照顾不到的，则由 Prettier 补充。

更新：有时会无法格式化当前项目，还是手动用 prettier 来格式化，更省心。

stylelint

跟 Eslint 类似，用于规范 css 代码，保持团队风格一致。

Vetur

vue 开发必备，高亮模板等。

更新：Vue3 项目会冲突，需要禁用该插件，改用 Vue Language Features (Volar)，对于 ts 项目可以再加上 TypeScript Vue Plugin (Volar)

vscode-icons

vscode 图标，比原版好看太多。

vue-helper

跳转@别名，跳转方法定义，跳转变量定义等，设置settings.json如下

"vue-helper.alias": {
        "@": "src"
    }