一直使用的是 WebStorm，比较重，尝试一下轻量的 vscode，记录一下配置和插件。
¶一、配置文件
链接: https://pan.baidu.com/s/1qPeuAwM8TUW8UA6yED0PfQ 密码:2171
¶二、插件列表
| 序号 | 插件名 | 用处 |
|---|---|---|
| 1 | Auto Close Tag | 自动闭合 HTML/XML 标签 |
| 2 | Auto Rename Tag | 自动完成另一侧标签的同步修改 |
| 3 | Bracket Pair Colorizer | 给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色 |
| 4 | Chinese (Simplified) Language | 简体中文 |
| 5 | Color Highlight | 颜色高亮 |
| 6 | Color Picker | 取色器 |
| 7 | CSS Peek | 使用此插件，你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时，选择“ Go to Definition 和 Peek definition ”选项，它便会给你发送样式设置的 CSS 代码。 |
| 8 | eslint | 格式化插件 |
| 9 | filesize | 在底部状态栏显示当前文件大小，点击后还可以看到详细创建、修改时间 |
| 10 | goto node modules | 快速定位 node 模块 |
| 11 | HTML CSS Support | 智能提示 CSS 类名以及 id |
| 12 | Image preview | 图片预览。（支持 html、css 中图片资源预览） |
| 13 | JavaScript (ES6) code snippets | ES6 语法智能提示，以及快速输入，不仅仅支持.js，还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含 js 代码文件的时间 |
| 14 | Node.js Modules Intellisense | 提供 JavaScript 和 TypeScript 导入声明时的自动补全 |
| 15 | npm | 支持运行文件中定义的 npm 脚本，并根据中定义的依赖项验证已安装的模块 package.json。 |
| 16 | npm Intellisense | 用于在 import 语句中自动填充 npm 模块 |
| 17 | Path Intellisense | 自动提示文件路径，支持各种快速引入文件 |
| 18 | Prettier | 格式化代码 |
| 19 | Relative Path | 相对路径 |
| 20 | Swig(.tpl) | 支持 hexo 中的 swig 文件 |
| 21 | Vetur | Vue 多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。vscode 官方钦定 Vue 插件，Vue 开发者必备。 |
| 22 | vscode-fileheader | 文件开头注释 ctrl + shift + i ，（/* \n * @Author: {author} \n * @Date: {createTime} \n */） |
| 23 | vscode-icons-mac | 类 Finder 文件夹图标 |
| 24 | Vue Peek | 可跳转自定义组件 |