vscode 格式化配置

基本上所有框架自带的脚手架都内置了代码质量检测和格式化配置，本文主要针对老项目初始化没有选择格式化配置的场景。我们选择用eslint做代码质量检测，用prettier做格式化

话不多说，直接上主菜。

安装vscode扩展

安装eslint、Prettier - Code formatter两个扩展，看好名字不要装错了。

安装依赖

在项目根目录安装下面4个包

yarn add -D eslint@^8.57.0 prettier@^3.2.5 eslint-plugin-vue@^9.23.0 @vue/eslint-config-prettier@^9.0.0

各个包的作用
eslint: eslint校验和格式化主程序
prettier: prettier格式化主程序
eslint-plugin-vue: eslint vue语法配置插件
@vue/eslint-config-prettier: 内含vue语法，防止eslint和prettier格式化冲突的配置

增加配置文件

在项目根目录增加3个配置文件,.vscode/settings.json、.eslintrc、.prettierrc。

.vscode/settings.json：vscode工作区配置文件

{
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit" //保存文件时候执行eslint格式化
  },
  "editor.formatOnSave": true, //保存文件执行vscode自动格式化
  "editor.defaultFormatter": "esbenp.prettier-vscode" //vscode格式化默认扩展为prettier
}

// 上述vscode配置中启用了文件保存执行eslint和prettier双重格式化配置，
// 但是下面eslint配置文件.eslintrc中有防止和prettier冲突的扩展配置，所以两个格式化程序不会冲突。

.eslintrc：eslint配置文件，适用于eslint@8.x

{
  "root": true,
  "extends": [
    "eslint:recommended", //eslint内置推荐规则
    "plugin:vue/vue3-recommended", //vue3推荐eslint配置规则
    "@vue/eslint-config-prettier/skip-formatting" //eslint格式化跳过prettier配置，防止冲突
  ],
  "parserOptions": {
    "ecmaVersion": "latest" //javasscript语法版本
  }
}

.prettierrc：prettier配置文件，配置文档

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "none"
}

最后重新打开一个vscode，应该就可以了。

以下是一些容易产生疑问的知识点。

基础知识

• vscode配置分用户配置和工作区配置
• 用户配置：一般在用户文件夹下，属于全局配置
• 工作区配置：项目目录.vscode/setting.json，相同配置其优先级比用户配置高
• 以editor.xxx开头的配置皆是vscode内置配置，其它扩展配置一般以其扩展名为前缀
• prettier主要用来格式化,eslint、stylelint等还可以用来检查代码质量
• eslint库的开发者和vscode-eslint扩展的开发者不是一个组织，所以他们的文档是分开的
• eslint@8和eslint@9的配置差别很大，eslint@9移除了内置的eslint:recommand配置，需要从@eslint/js手动引入

eslint@8.x版本配置

eslint最新版本是9，其配置和8的差别很大，一定要注意，否则配置不生效，
区别文档：eslint.org/docs/latest…