ESLint + Prettier

ESLint

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

安装

pnpm add eslint -D

初始化

npx eslint --init

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

{
  "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 --fix ."
  }
}

运行

pnpm lint

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

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

ESLint 配置

rules

启用的规则及其各自的错误级别。对于每个规则名称键，将对应的值设置为：

键	说明
`"off"` or `0`	关闭规则
`"warn"` or `1`	将规则视为一个警告
`"error"` or `2`	将规则视为一个错误

globals

脚本在执行期间访问的额外的全局变量。对于每个全局变量键，将对应的值设置为：

键	说明
`"writable"`	允许重写变量
`"readonly"`	不允许重写变量

env

定义一组预定义的全局变量。

Prettier

Prettier 是代码格式化工具

安装

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

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

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

eslint-config-prettier 作为 eslint-plugin-prettier 的依赖插件。在 eslint 配置文件中添加插件（一定添加在数组最后）

{
  "extends": [ ... , "plugin:prettier/recommended" ],
}

import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'

export default [
  ...,
  eslintPluginPrettierRecommended
]

初始化

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

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

添加 `format` 命令

可选，但不建议。ESLint 执行会自动格式化

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

{
  "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

commitizen

是一个统一 git commit message 格式的工具

安装

pnpm add commitizen @commitlint/cli @commitlint/config-conventional cz-git -D

初始化

commitlint

适配器（检测 commit 格式）

添加 husky 钩子（不主动使用该适配器，而是在 commit-msg 触发时，执行对 commit 消息的验证）
```
echo "npx --no -- commitlint --edit ${1}" > .husky/commit-msg
```

cz-git

适配器（快速填写符合标准规范的 commit 信息）

修改 package.json 添加 commitizen 使用的适配器

{
  "scripts": {
    "cz": "cz"
  },
  "config": {
    "commitizen": {
      "path": "node_modules/cz-git"
    }
  }
}

自定义配置

cz-git 与 commitlint 进行联动给予校验信息，所以可以编写于 commitlint 配置文件 .commitlintrc.js 之中（cz-git 不支持 .commitlintrc.ts）

/** @type {import('cz-git').UserConfig} */
module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    // @see: https://commitlint.js.org/#/reference-rules
  },
  prompt: {
    alias: { fd: 'docs: fix typos' },
    messages: {
      type: '选择你要提交的类型 :',
      scope: '选择一个提交范围（可选）:',
      customScope: '请输入自定义的提交范围 :',
      subject: '填写简短精炼的变更描述 :\n',
      body: '填写更加详细的变更描述（可选）。使用 "|" 换行 :\n',
      breaking: '列举非兼容性重大的变更（可选）。使用 "|" 换行 :\n',
      footerPrefixsSelect: '选择关联issue前缀（可选）:',
      customFooterPrefixs: '输入自定义issue前缀 :',
      footer: '列举关联issue (可选) 例如: #31, #I3244 :\n',
      confirmCommit: '是否提交或修改commit ?'
    },
    types: [
      { value: 'feat', name: 'feat:     新增功能 | A new feature' },
      { value: 'fix', name: 'fix:      修复缺陷 | A bug fix' },
      { value: 'docs', name: 'docs:     文档更新 | Documentation only changes' },
      { value: 'style', name: 'style:    代码格式 | Changes that do not affect the meaning of the code' },
      { value: 'refactor', name: 'refactor: 代码重构 | A code change that neither fixes a bug nor adds a feature' },
      { value: 'perf', name: 'perf:     性能提升 | A code change that improves performance' },
      { value: 'test', name: 'test:     测试相关 | Adding missing tests or correcting existing tests' },
      { value: 'build', name: 'build:    构建相关 | Changes that affect the build system or external dependencies' },
      { value: 'ci', name: 'ci:       持续集成 | Changes to our CI configuration files and scripts' },
      { value: 'revert', name: 'revert:   回退代码 | Revert to a commit' },
      { value: 'chore', name: 'chore:    其他修改 | Other changes that do not modify src or test files' }
    ],
    useEmoji: false,
    emojiAlign: 'center',
    themeColorCode: '',
    scopes: [],
    allowCustomScopes: true,
    allowEmptyScopes: true,
    customScopesAlign: 'bottom',
    customScopesAlias: '以上都不是？我要自定义',
    emptyScopesAlias: '跳过',
    upperCaseSubject: false,
    markBreakingChangeMode: false,
    allowBreakingChanges: ['feat', 'fix'],
    breaklineNumber: 100,
    breaklineChar: '|',
    skipQuestions: [],
    issuePrefixs: [
      // 如果使用 gitee 作为开发管理
      { value: 'link', name: 'link:     链接 ISSUES 进行中' },
      { value: 'closed', name: 'closed:   标记 ISSUES 已完成' }
    ],
    customIssuePrefixsAlign: 'top',
    emptyIssuePrefixsAlias: '跳过',
    customIssuePrefixsAlias: '自定义前缀',
    allowCustomIssuePrefixs: true,
    allowEmptyIssuePrefixs: true,
    confirmColorize: true,
    maxHeaderLength: Infinity,
    maxSubjectLength: Infinity,
    minSubjectLength: 0,
    scopeOverrides: undefined,
    defaultBody: '',
    defaultIssues: '',
    defaultScope: '',
    defaultSubject: ''
  }
}

运行

git add . 后使用 pnpm cz [--retry]，建议在 markdown 里添加

[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)