3.前端开发设置

colorize

VSCode 系统自带的颜色选择器会导致开发卡顿，而且容易误触。但是关闭颜色选择器又无法直观的看到颜色代码所代表的颜色了，这个插件很好的弥补了这点。

注意，如果想要支持更多语言，则需要单独进行配置。

https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize

{
  "colorize.languages": ["javascript", "html", "vue", "markdown"]
}

CSS Peek

可以通过类名快速跳转到定义好的 css 代码处，使用频率很高，非常方便。
https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

ESLint

安装这个插件之后，再开启 VSCode 自动格式化，那么再保存的时候会按照提前配置好的 ESLint 帮你格式化代码，非常赏心悦目。
不过需要你在当前目录或者全局安装过 eslint 的 npm 包
npm i eslint 或 npm i -g eslint，
然后在工作区目录有一个 .eslintrc 配置文件。
ESLint 对于团队协作开发 js 或 ts 项目的风格统一十分有帮助。

插件地址：
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

ESLint 官网：
https://eslint.cn/

Prettier - Code formatter

一般来说，使用 ESLint 格式化 js 风格层面的规范，但是代码的格式化一般都采用 Prettier。

与 ESLint 一样，需要本地 npm i prettier 或 npm i -g prettier。然后还需要一个 配置文件。

插件地址:
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

官网地址：
https://prettier.io/

Live Server

快速启动一个当前工作区为主的静态服务。
用于预览一些文件渲染效果很方便。
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

px to rem

快速的将 px 单位转换成 rem 单位，节省心智。
可以在设置中单独配置转换比例，在编写 微信小程序时也有帮助。
https://marketplace.visualstudio.com/items?itemName=sainoba.px-to-rem

Version Lens

显示当前 package.json 中最新的安装包版本。
https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlens

Vue - Official

现在开发 vue 只需要这一个插件就可以了。
https://marketplace.visualstudio.com/items?itemName=Vue.volar