ESLint + Prettier

ESLint

ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。

安装

pnpm add eslint -D

初始化

npx eslint --init

根据提示选择适合的项进行初始化（脚手架创建的项目可能会自带，就不用自己生成了）。最终会在根目录下生成文件 .eslintrc.js，内容大致如下：

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: ['eslint:recommended', 'plugin:vue/essential'],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: ['vue'],
  rules: {
    'vue/multi-word-component-names': 'off',
    'vue/valid-v-slot': 'off'
  },
  globals: {
    workbox: 'readonly'
  }
}

添加 `lint` 命令

在 package.json 文件中的 script 中添加

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint --fix ."
  }
}

运行

pnpm lint

如果写一行代码就要执行一遍 lint 命令，这效率就太低了。所以我们可以配合 vscode 的 ESLint 插件，并在设置文件中添加以下内容，实现每次保存代码时，自动尽可能修复代码的错误。

"editor.codeActionsOnSave": {
  "source.fixAll": "explicit",
  "source.fixAll.eslint": "explicit"
}

Prettier

Prettier 是代码格式化工具

安装

pnpm add prettier eslint-config-prettier eslint-plugin-prettier -D

eslint-config-prettier：关闭所有不必要或可能与 Prettier 冲突的 ESLint 规则

eslint-plugin-prettier：将 Prettier 作为 ESLint 规则运行

eslint-plugin-prettier 附带一个可一次性设置两者的配置 eslint-plugin-prettier/recommended 参考

import tseslint from 'typescript-eslint'
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
 
export default tseslint.config(
  // 其他的配置添加在上面
  eslintPluginPrettierRecommended
)

初始化

创建文件 .prettierrc.js，并填入以下内容

/** @type {import("prettier").Options} */
module.exports = {
  printWidth: 160,
  useTabs: false,
  semi: false,
  singleQuote: true,
  arrowParens: 'avoid',
  trailingComma: 'none',
  endOfLine: 'lf'
}

添加 `format` 命令

在 package.json 中的 scripts 中添加（自行修改匹配的文件）

{
  "scripts": {
    "format": "prettier --write ."
  }
}

运行

pnpm format

配合 vscode 的 Prettier - Code formatter 插件，并在设置文件中添加以下内容，实现每次保存代码时，自动格式化代码。

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

lint-staged

对 git 暂存的文件运行 linter，不要让 💩 溜进你的代码库！

安装

pnpm add lint-staged -D

添加 `lint-staged` 命令

在 package.json 中添加

"lint-staged": {
  "*.{js,cjs,ts,tsx,vue}": [
    "prettier --write",
    "eslint --fix"
  ],
  "*.{md,css,scss,json,yaml}": "prettier --write"
}

默认情况下，lint-staged 将同时运行配置的任务，所以注意匹配文件重叠问题。参考

运行

npx lint-staged

husky

husky 是一个用来管理 git hook 的工具，git hook 即在我们使用 git 提交代码的过程中会触发的钩子

安装

pnpm add husky -D

初始化

npx husky init

将在根目录生成文件 .husky，同时将在 package.json 文件中添加下面的命令（这条命令是让以后别人 git clone 代码后，安装依赖之后自动运行这条命令，从而自动初始化 husky）

{
  "scripts": {
    "prepare": "husky"
  }
}

添加 `hooks`

实现在运行 git commit 时，在之前运行命令 npx lint-staged。运行出错会中断 git commit 的执行

echo "npx lint-staged" > .husky/pre-commit

commitlint

是一个验证 git commit message 内容的工具

安装

pnpm add @commitlint/cli @commitlint/config-conventional -D

初始化

添加 husky 钩子（在 commit-msg 触发时，执行对 commit 消息的验证）

echo "npx --no -- commitlint --edit \$1" > .husky/commit-msg

修改 package.json 添加 commitlint 使用的共享配置

{
  "commitlint": {
    "extends": ["@commitlint/config-conventional"]
  }
}

ESLint

安装

初始化

添加 lint 命令

运行