SkyBlog

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 是代码格式化工具

安装

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

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-gitcommitlint 进行联动给予校验信息,所以可以编写于 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]