Vue2/3 项目中的 ESLint + Prettier 代码

ESLint是js代码的质量检查工具，同时也具备一定的代码风格的格式化能力。
Prettier是一个代码风格的约束工具，Prettier能约束JS、JSX、TypeScript、Vue、CSS、Less、SCSS、HTML、JSON、Markdown等代码风格。
由于ESLint定义了一些js的代码格式化的约束，导致其与Prettier存在一些冲突。
如：
ESLint默认语句结尾不加分号，Prettier默认语句结尾加分号；
ESLint默认强制使用单引号，Prettier默认使用双引号；
ESLint默认句末减少不必要的逗号，Prettier默认尽可能多使用逗号等等

本文使用Vue cli创建项目，并做简单配置，由于项目成员大多数使用webstorm和vs code开发工具，另外提供两个工具的配置方式。

新建项目

用Vue cli新建项目，创建时选择手动配置项目，linter / formatter 配置选择ESLint + Prettier，选择在保存时候进⾏代码规则检
测，不要选commit时检测，选择将 Babel、ESLint等配置文件保存到各自的配置文件中。

项目创建完成后可以看到package.json文件中，存在下列开发依赖

项目根目录下存在文件ESLint的配置文件.eslintrc.js

module.exports = {
  root: true, 
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/essential",
    "eslint:recommended",
    "plugin:prettier/recommended",
  ],
  parserOptions: {
    parser: "@babel/eslint-parser", // 解析器
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  },
};

由于ESLint也具备一定的代码风格的格式化能力，vue cli 用下面的两个插件，解决ESLint和Prettier冲突问题。

• eslint-config-prettier：禁用掉了一些不必要的以及和 Prettier 相冲突的 ESLint 规则；
• eslint-plugin-prettier：将 prettier 作为 ESLint 的规则来使用，相当于代码不符合 Prettier 的标准时，会报一个 ESLint 错误，同时也可以通过 eslint --fix 来进行格式化；这样就相当于将 Prettier 整合进了 ESLint 中；

root 根目录标识
ESLint 检测配置文件步骤：
在要检测的文件同一目录里寻找 .eslintrc.* 和 package.json；
紧接着在父级目录里寻找，一直到文件系统的根目录；
如果在前两步发现有 root：true 的配置，停止在父级目录中寻找 .eslintrc；
如果以上步骤都没有找到，则回退到用户主目录 ~/.eslintrc 中自定义的默认配置

env 运行环境
一个环境定义了一组预定义的全局变量
获得了特定环境的全局定义，就不会认为是开发定义的，跳过对其的定义检测。否则会被认为改变量未定义
前端开发常用的运行环境：
browser - 浏览器环境中的全局变量。
node - Node.js 全局变量和作用域。
es6：es6 中除了模块之外的其他特性，同时将自动设置 parserOptions.ecmaVersion 参数为 6；以此类推 ES2017 是 7，而 ES2021 是 12；
es2017：parserOptions.ecmaVersion 为 8；
jquery - jQuery 全局变量。

globals 开发者自定义的全局变量
plugins 插件
插件用来扩展解析器的功能，插件是eslint-plugin-前缀的包，配置时无需加前缀

extends 规则继承
规则的类型：
1、eslint 开头的：是 ESLint 官方的扩展 如eslint:recommended
2、plugin 开头的：是eslint插件类型扩展，如 plugin:vue/essential,其插件前缀是eslint-plugin，省略了eslint-
3、eslint-config 开头的：来自 npm 包，配置时可以省略前缀 eslint-config-，比如上面的可以直接写成 standard
4、@开头的：扩展和 eslint-config 一样，只是在 npm 包上面加了一层作用域 scope；
5、一个执行配置文件的相对路径或绝对路径；
优先级：
如果 extends 配置的是一个数组，最终会将所有规则项进行合并，出现冲突的时候，后面的会覆盖前面的
通过 rules 单独配置的规则优先级比 extends 高

rules 自定义规则
规则的值
‘off’ 或 0：关闭对该规则的校验；
‘warn’ 或 1：启用规则，不满足时抛出警告，不会退出编译进程；
‘error’ 或 2：启用规则，不满足时抛出错误，会退出编译进程；
如果某项规则，有额外的选项，可以通过数组进行传递，数组的第一位必须是错误级别。
如 ‘semi’: [‘error’, ‘never’], never就是额外的配置项

这时候如果我在文件中加入代码

console.log("HelloWorld")

编译时将会抛出错误，退出编译进程

如果希望抛出警告或关闭prettier，可在rules自定义下面规则

"prettier/prettier": "warn"

配置自己的规则

ESLint就采用推荐的规则，大多数情况下我们希望按照自己的习惯自定义一些Prettier规则。
自定义格式化文件 ,文件名可以是.prettierrc（JSON格式） .prettierrc.js/prettier.config.js（js格式，需要module.exports一个对象）
为了加入注释让其他成员快速了解规则，这里使用 .prettierrc.js文件进行配置

module.exports = {
  printWidth: 120, // 一行最多 120 字符(默认80)
  tabWidth: 2, // 每个tab相当于多少个空格（默认2）
  useTabs: false, // 是否使用tab进行缩进（默认false）
  semi: false, // 行尾需要有分号(默认true)
  singleQuote: true, // 使用单引号（默认false）
  quoteProps: 'as-needed', // 对象的 key 仅在必要时用引号
  jsxSingleQuote: false, // jsx 不使用单引号，而使用双引号
  trailingComma: 'none', // 多行使用拖尾逗号（默认none）
  bracketSpacing: true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"（默认true）
  jsxBracketSameLine: false, // 多行JSX中的>放置在最后一行的结尾，而不是另起一行（默认false）
  htmlWhitespaceSensitivity: 'css', // 根据显示样式决定 html 要不要折行
  arrowParens: 'avoid', // 只有一个参数的箭头函数的参数是否带圆括号（默认avoid:添加括号）
  endOfLine: 'auto' // 行尾换行符
}

让代码编辑器识别规则

配置规则后，我们需要编辑器能够给出错误提示，按我们的规则格式化代码等提高工作效率，而不是手动调整代码，在命令行中查看错误信息，下面再编辑器中进行配置。
Webstorm和vs code 都能够安装ESLint和Prettier插件

vs code

安装插件Vetur（vue语法增强） ESLint、Prettier,Vetur 也有⼀套 Format 规则,VSCode 中ESlint 集成了 prettier 的校验规则,不需要再单独安装 Prettier 插件

配置 Prettier 为默认代码格式化工具

同时按下 command/ctrl + shift + p 键盘
输入 format document with
选择 Configure Default Formatter…
选择 Prettier 为默认的工具

Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南

因为平时都是使用 VSCode ESLint + Prettier 检测格式化不规范代码，但是随着接手的项目越来越多，需要统一每个项目的代码规范，于是在此分享vue项目的几种代码格式化风格(default,standard,airbnb,prettier)的基本区别以及修改为prettier风格。

对比肉眼可见的格式化风格差异，并且以字符串单/双引号，每行结尾有无分号，object对象最后一项有无尾逗号作为判断依据

VSCode的插件以及配置

• ESLint , Prettier 插件安装
• 配置VSCode settings.json

  ...
  // 相应文件的格式化工具选中
    "[vue]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[jsonc]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[scss]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
  // 启用ESLint作为已验证文件的格式化程序，可方便快捷键
  "eslint.format.enable": true, 
  // 每次保存的时候将代码按eslint格式进行修复
  "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
  // 关闭编辑器默认保存格式化，不然多数情况会和上面的配置执行两次
  "editor.formatOnSave": false
  ...

1. 【 Default 】 vue/cli 创建默认配置项目

1. 运行以下命令来创建一个新项目：
   vue create hello-world
2. 选择 Default ([Vue 2] babel, eslint) 回车创建

image.png

等着创建成功后,会发现 eslint 的相关配置，在package.json文件中：

  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },

这里我们删除它，并在项目下新建.eslintrc.js文件将其迁移进去：

module.exports = {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  }

plugin:vue/essential：启用 vue 的基础规则
eslint:recommended：启用 eslint 的推荐规则

babel-eslint：可以对所有有效的babel代码进行lint处理。

此时我们可以根据当前项目中main.js文件发现，最基本的风格为：字符串单引号，结尾无分号；当我们结尾加分号，保存测试会没有任何效果，不要急，接下来添加 prettier 。

vue/cli 添加 prettier

运行以下命令：
vue add @vue/eslint

提示 Still proceed 选择 y
等待安装完
会出现四个格式化风格选择项，按向下键，选择 Prettier 回车确认
再选择 Lint on save 回车确认

等 @vue/cli-plugin-eslint 安装完成后会发现 .eslintrc 配置中 extends 多出了@vue/prettier

回过头来，再去项目的main.js或者App.vue文件保存测试发现格式化生效。

最后，去除一些常规的eslint 报错警告信息，在 rules 中添加自定义规则：

其中 "prettier/prettier" 可以添加 prettier 相关配置

.eslintrc.js 完整配置

module.exports = {
  "root": true,
  "env": {
    "node": true
  },
  "extends": [
    "plugin:vue/essential",
    "eslint:recommended",
    "@vue/prettier"
  ],
  "parserOptions": {
    "parser": "babel-eslint"
  },
  "rules": {
    'prettier/prettier': [
            'error',
            {
                requireConfig: false,
                endOfLine: 'auto',
                quoteProps: 'as-needed',
                proseWrap: 'preserve',
                arrowParens: 'always',
                htmlWhitespaceSensitivity: 'strict',
                ignorePath: '.prettierignore',
                jsxBracketSameLine: false,
                jsxSingleQuote: false,
                vueIndentScriptAndStyle: true,
                semi: false,
                trailingComma: 'none',
                singleQuote: true,
                printWidth: 150,
                tabWidth: 2,
                bracketSpacing: true,
                useTabs: true
            }
        ],
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'vue/v-on-event-hyphenation': 'off',
        'vue/multi-word-component-names': ['off'],
        'vue/prop-name-casing': 'off',
        'vue/require-default-prop': 'off',
        'vue/no-v-html': 'off',
        'no-new': 'off',
        'prefer-regex-literals': 'off',
        'prefer-promise-reject-errors': 'off',
        'no-unused-vars': [
            'off',
            {
                caughtErrors: 'none'
            }
        ],
        'vue/no-unused-vars': [
            'off',
            {
                caughtErrors: 'none'
            }
        ],
        'no-tabs': 'off',
        'no-trailing-spaces': 'off',
        'no-mixed-spaces-and-tabs': 'off',
        'no-empty-function': 'off',
        'space-before-function-paren': ['off', 'always'],
        'no-unreachable-loop': 'off',
        'no-multiple-empty-lines': 'off',
        'no-loss-of-precision': 'off',
        'no-useless-escape': 0,
        semi: ['warn', 'never'],
        eqeqeq: 0,
        indent: ['off', 2],
        quotes: ['error', 'single', { allowTemplateLiterals: true }]
  }
}

2. 【 Manually 】 vue/cli 自定义创建 ESLint + Prettier

1. 运行以下命令来创建一个新项目：
   vue create hello-world
2. Please pick a preset: 选择 Manually select features
3. Check the features needed for your project: Choose Vue version, Babel, Linter...
4. Choose a version of Vue.js that you want to start the project with 2.x
5. Pick a linter / formatter config: Prettier
6. Pick additional lint features: Lint on save
7. Where do you prefer placing config for Babel, ESLint, etc.?: In dedicated config files
8. Save this as a preset for future projects? Yes
9. Save preset as: 回车确认

可见差异：字符串双引号，每行结尾有分号，object对象最后一项有尾逗号;

生成的.eslintrc.js 中 extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"]

跟上面 [1. 【 Default 】 vue/cli 创建默认配置项目] 创建的.eslintrc.js 配置对比发现，只是少了 rules 配置，将上面的 rules 配置copy过来。同样测试保存格式化效果一样。

3. 【 Manually 】 vue/cli 自定义创建 ESLint + Standard

1. 运行以下命令来创建一个新项目：

vue create hello-world

1. Please pick a preset: Manually select features
2. Check the features needed for your project: Choose Vue version, Babel, Linter
3. Choose a version of Vue.js that you want to start the project with 2.x
4. Pick a linter / formatter config: Standard
5. Pick additional lint features: Lint on save
6. Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
7. Save this as a preset for future projects? Yes
8. Save preset as:回车确认

可见差异：字符串单引号，每行结尾无分号，对象最后一项没有尾逗号;

生成的.eslintrc.js 中 extends: ["plugin:vue/essential", "@vue/standard"]

关于.eslintrc.js配置，去掉 rules 中的 'prettier/prettier' ，rules其他配置同上，同样测试保存格式化效果一样。

4. 【 Manually 】 vue/cli 自定义创建 ESLint + Airbnb

1. 运行以下命令来创建一个新项目：

vue create hello-world

1. Please pick a preset: Manually select features
2. Check the features needed for your project: Choose Vue version, Babel, Linter
3. Choose a version of Vue.js that you want to start the project with 2.x
4. Pick a linter / formatter config: Airbnb
5. Pick additional lint features: Lint on save
6. Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
7. Save this as a preset for future projects? Yes
8. Save preset as:回车确认

可见差异：字符串单引号，每行结尾有分号，对象最后一项有尾逗号;

生成的.eslintrc.js 中 extends: ["plugin:vue/essential", "@vue/airbnb"]

关于.eslintrc.js配置，rules其他配置同上，同样测试保存格式化效果基本一致一样。

5. vite 自定义创建默认Vue项目

1. 运行以下命令来创建一个新项目：

npm init vite@latest my-vue-app --template vue

2. 安装 vue3 ESLint + Prettier 相关依赖

npm install eslint-config-tkb -D

然后在package.json 中新添加配置即可：

"eslintConfig": {
    "extends": ["eslint-config-tkb"]
}

进入vue和js 文件保存，测试格式化效果基本一致一样。

eslint-config-tkb 是个人自定义的 eslESLint + Prettier 的配置，也支持vite创建的 vue-ts创建的模板项目。

参考资料：

cnblogs
csdn