1. eslint

• 代码检查工具
• 安装

npm i -D eslint

• 配置

npx create @eslint/config

• 在 vue3 项目中 修改 .eslintrc.js 文件

module.exports = {
  env: {
    // other env
    'vue/setup-compiler-macros': true
  },
  extends: [
    // other extends
    - 'plugin:vue/essential'
    + 'plugin:vue/vue3-strongly-recommended'
  ],
  parser: 'vue-eslint-parser'
  // other config
}

• 将新脚本添加到您的 package.json

"scripts" : {
  ...
  "lint": "eslint src/**/*.{js,jsx,vue,ts,tsx} --fix"
}

2. prettier

• 代码风格工具
• 安装

npm i -D prettier

• 配置

根目录创建 .prettierrc.js 文件，可以参考尤雨溪的配置：

module.exports = {
  // 是否在每行末尾添加分号
  semi: false,
  // 如果为true 将使用单引号而不是双引号
  singleQuote: true,
  // 尽可能控制尾随逗号的输出。有效选项：'none'-无尾随逗号' 'es5'-在ES5中有效的尾随逗号（对象，数组等） 'all'-尾随逗号尽可能（函数参数）
  trailingComma: 'none',
  // 指定prettier的换行符
  endOfLine: 'auto'
}

3. eslint + prettier

• eslint-plugin-prettier 调用prettier对你的代码风格进行检查
• eslint-config-prettier 能够关闭一些不必要的或者是与prettier冲突的lint选项
• 安装

npm i -D eslint-plugin-prettier eslint-config-prettier

• 在 .eslintrc.js 文件的 extends 中最后一行加入如下代码

{
  extends: [
    // other extends
    'plugin:prettier/recommended'
  ]
}

4. husky + lint-staged

• husky 是一个用于管理 git 钩子（hooks）的工具，可以在执行 git 命令时触发一些自定义操作。
• lint-staged 是一个用于在提交前运行指定命令的工具，可以保证只对暂存区（staged）的文件进行检查和修复。
• 安装

npm i -D husky lint-staged

• 配置

在 package.json 加入如下代码

"scripts" : {
  ...
  "lint": "eslint src/**/*.{js,jsx,vue,ts,tsx} --fix"
},
"lint-staged": {
  "*.{js,jsx,vue,ts,tsx}": ["eslint --fix"]
}

在终端里运行如下代码，初始化 husky 并添加 pre-commit 钩子，指定在提交前运行 lint-staged。

npm set-script prepare "husky install"
npm run prepare
npx husky add .husky/pre-commit "npx lint-staged"