eslint9+prettier+commitlint+husky+lint-staged 配置

一壶纱
1,275 阅读8分钟

vue3 基础工程化配置

  1. ESLint:
    • 作用: 用于识别和修复 JavaScript 代码中的问题。
    • 好处: 帮助开发者遵循最佳实践，减少 bug 并提高代码的一致性。
  1. Prettier:
    • 作用: 一个代码格式化工具。
    • 好处: 自动格式化代码，确保团队中每个人的代码风格一致，减少因代码格式而产生的冗余代码审查。
  1. commitlint:
    • 作用: 验证 commit 信息是否符合规范（如遵循 Angular 提交信息规范）。
    • 好处: 规范化提交信息，有助于生成 changelog，版本管理和回溯问题。
  1. Husky:
    • 作用: 一个 Git hooks 工具，可以在 Git 的各个生命周期事件（如提交代码前、推送代码前等）触发自定义脚本。
    • 好处: 在提交代码前执行指定的检查（如 ESLint 检查、单元测试等），确保代码质量。
  1. lint-staged:
    • 作用: 只对暂存区（staged）的文件执行 lint 操作。
    • 好处: 提高效率，只对需要提交的文件进行检查，避免全量文件检查带来的性能问题。
  1. cz-git:
    • cz-git 是一个用于 Git 提交消息的工具，通常与 Commitizen 一起使用，以帮助生成符合约定格式的提交消息。它可以帮助团队遵守一致的提交消息格式，从而提高代码的可读性和可维护性。

安装：

pnpm add -D eslint
pnpm add -D @eslint/js
pnpm add -D globals
pnpm add -D typescript-eslint
pnpm add -D eslint-plugin-vue
pnpm add -D vue-eslint-parser

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

npm install -g commitizen
pnpm add -D @commitlint/cli
pnpm add -D @commitlint/config-conventional

pnpm add -D husky

pnpm add -D lint-staged

pnpm add -D cz-git
  1. eslint：这是一个广泛使用的 JavaScript 和 TypeScript 代码静态分析工具，用以发现和修复代码中的问题。
  2. @eslint/js：这个包为 ESLint 提供了 JavaScript 相关的规则和配置。
  3. globals：这个包提供了一组全局变量的定义，可以在 ESLint 配置中使用，以避免 ESLint 报告未定义的全局变量错误。
  4. typescript-eslint：这是一个工具，它将 TypeScript 代码解析为 ESLint 可以理解的格式，使得 ESLint 能够检查 TypeScript 源码。
  5. eslint-plugin-vue：这是一个 ESLint 插件，用于 Vue.js 项目的代码检查，提供了一组适用于 Vue.js 的规则。
  6. vue-eslint-parser：这是一个支持 Vue 文件的 ESLint 解析器，使 ESLint 能够解析和检查 .vue 文件中的代码。
  7. eslint-config-prettier：这是一个 ESLint 配置，用于关闭所有可能与 Prettier 冲突的规则，以便在使用 Prettier 格式化代码时不引起与 ESLint 的冲突。
  8. eslint-plugin-prettier：这个插件将 Prettier 作为 ESLint 规则运行，并将 Prettier 格式问题报告为 ESLint 问题。
  9. prettier：这是一个代码格式化工具，可以自动格式化代码以符合一致的风格。
  10. commitizen：这是一个工具，用于规范化 git 提交消息，使其符合预定的格式。
  11. @commitlint/cli：这是 Commitlint 的命令行工具，用于检查 git 提交消息是否符合指定的规则。
  12. @commitlint/config-conventional：这是 Commitlint 的一个配置，使用了标准的 Angular 提交信息格式规范。
  13. husky：这是一个工具，用于在 git 钩子中运行脚本。常用于在 git 提交时自动运行代码检查和测试。
  14. lint-staged：这是一个工具，用于运行特定的 linters 只检查 git 暂存区中的文件，以加快检查速度和确保提交的代码质量。
  15. cz-git：这是 Commitizen 的一个插件，提供了一个交互式命令行界面，用于生成符合规范的 git 提交信息。

配置：

1、eslint（9.38.0）

在项目根目录创建 eslint.config.js （eslint9 不在支持以前旧的文件命名方式，具体可以查看官方文档）

import { defineConfig } from 'eslint/config';
import globals from 'globals'
import js from '@eslint/js'
import tseslint from 'typescript-eslint'
import pluginVue from 'eslint-plugin-vue'
import VueEslintParser from 'vue-eslint-parser'
// 自 9.0 以来，eslint 不再有格式化规则，typescript 的主要维护者在他的文章 "You Probably Don't Need eslint-config-prettier or eslint-plugin-prettier" 中建议不要使用 `eslint-config-prettier`。
// import eslintConfigPrettier from 'eslint-config-prettier' 
import fs from 'fs'
import path from 'path'
import { fileURLToPath } from 'url'
import eslintPluginPrettier from 'eslint-plugin-prettier/recommended'

// 获取当前文件的目录路径
const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)

// 读取 .eslintrc-auto-import.json 文件
// 导入到全局，用于 ts 自动识别
// .eslintrc-auto-import.json 来自 vite 插件 unplugin-auto-import
// unplugin-auto-import 插件作用自动导入预设库的 API，在使用的地方不在需要手动 import 导入
// 具体配置在 vite.config.ts ，如果没有使用 unplugin-auto-import 这里配置可以忽略

const autoImportPath = path.resolve(__dirname, 'src/types/.eslintrc-auto-import.json')
const autoImportConfig = JSON.parse(fs.readFileSync(autoImportPath, 'utf8'))

export default defineConfig([
 // 基础 JS 配置
  js.configs.recommended,

  // TypeScript 推荐配置（打平）
  ...tseslint.configs.recommended,

  // Vue 基础配置
  ...pluginVue.configs['flat/recommended'],

  // 全局浏览器环境
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node,
        ...autoImportConfig.globals, // 合并自动导入的 globals
      },
    },
  },
 / Vue 解析器（关键修复）
  {
    files: ['**/*.vue'],
    languageOptions: {
      parser: VueEslintParser, //不要全局配置 VueEslintParser ，否则会尝试解析非 Vue 文件
      parserOptions: {
        parser: tseslint.parser,
        extraFileExtensions: ['.vue'],
        ecmaFeatures: { jsx: true },
      },
    },
  },

  // JSON 配置（使用官方 recommended）
  json.configs.recommended,

  // 自定义规则
  {
    rules: {
      // 基础规则
      'prettier/prettier': 'error', // 启用 Prettier 作为 ESLint 规则
      'no-var': 'error', // 禁止使用 var，强制使用 let 或 const
      'prefer-const': 'warn', // 建议使用 const 来声明不会被重新赋值的变量
      quotes: ['error', 'single', { avoidEscape: true }], // 强制使用单引号
      semi: ['error', 'always'], // 强制语句结尾使用分号
      'no-trailing-spaces': 'error', // 禁止行尾空格
      'no-multiple-empty-lines': ['warn', { max: 1 }], // 限制连续空行数量为 1
      'no-unexpected-multiline': 'error', // 防止多行表达式引起的错误
      'no-useless-escape': 'off', // 允许某些不必要的转义字符
      'no-undef': 'off', // 关闭对 TS 类型名的误报，由 TS 本身负责未定义标识符检查

      // TypeScript 相关规则

      '@typescript-eslint/no-unused-vars': 'error', // 禁止未使用的变量
      '@typescript-eslint/prefer-ts-expect-error': 'error', // 建议使用 @ts-expect-error 而不是 @ts-ignore
      '@typescript-eslint/no-explicit-any': 'warn', // 允许使用 any 类型
      '@typescript-eslint/no-non-null-assertion': 'off', // 允许使用非空断言操作符（!）
      '@typescript-eslint/no-namespace': 'off', // 允许使用自定义命名空间
      '@typescript-eslint/semi': 'off', // 关闭与 semi 规则冲突的规则

      // Vue 相关规则
      'vue/html-indent': ['error', 2], // 强制模板缩进为 2 个空格
      'vue/max-attributes-per-line': ['warn', { singleline: 3 }], // 单行元素最多允许 3 个属性
      'vue/multi-word-component-names': 'off', // 允许单词组件名
      'vue/no-mutating-props': 'off', // 允许直接修改 props,（前提是 prop 是一个对象）
      'vue/attribute-hyphenation': 'off', // 允许在模板中使用驼峰命名的属性

      // indent, semi 已移除
      'no-unused-vars': 'off', // 关闭与 @typescript-eslint/no-unused-vars 冲突的规则
    },
  },

  // Prettier 集成
  eslintPluginPrettier,

  // 忽略
  {
    ignores: ['node_modules/', 'dist/', 'build/', '**/*.d.ts', 'public/', '.vite/']
  },
])

package.json

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

vite.config.ts（unplugin-auto-import 配置）

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import AutoImport from 'unplugin-auto-import/vite'
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx({
      transformOn: true,
      mergeProps: true,
    }),
    AutoImport({
      // 插件预设支持导入的api
      imports: ['vue', 'vue-router', 'pinia'],
      // 生成 TypeScript 类型声明文件的路径。
      // 文件 auto-imports.d.ts 将包含所有自动导入的类型声明。
      dts: 'src/types/auto-imports.d.ts', 
      // 设置为 true，表示支持在 Vue 模板中自动导入。
      vueTemplate: true,
      // 设置为 true，表示自动导入的依赖将被 Vite 优化。
      viteOptimizeDeps: true,
      //  ESLint 相关的设置
      eslintrc: {
        // 启用 ESLint 配置生成。如果设置为 true，将根据自动导入的配置生成 ESLint 配置文件。
        enabled: true,
        // 生成的 ESLint 配置文件的路径
        // 文件 .eslintrc-auto-import.json 将包含 ESLint 的设置
        filepath: 'src/types/.eslintrc-auto-import.json',
        // 自动导入的模块设置全局变量的属性值
        // 将其设置为 true，意味着这些自动导入的模块在 ESLint 配置中将作为全局变量进行处理。
        globalsPropValue: true,
      },
    }),
  ], 
})
2、prettier

在项目根目录创建 prettier.config.js （根据自己所需配置对应规则）

/**
 * @see https://prettier.io/docs/en/configuration.html
 * @type {import("prettier").Config}
 */
const config = {
  printWidth: 120,
  semi: false,
  singleQuote: true,
}

export default config

package.json（脚本配置）

{
  "scripts": {
    "prettier:check": "prettier --check .",
    "prettier:write": "prettier --write .",
  },
}
3、commitlint

在项目根目录创建 commitlint.config.js

export default { extends: ['@commitlint/config-conventional'] }
4、lint-staged

在项目根目录创建 lint-staged.config.js

lint-staged 在 git commit 之前自动对暂存文件执行检查和格式化。


export default {
  '*.{js,jsx,ts,tsx}': ['eslint --fix --max-warnings=-1', 'prettier --write'],
  '*.vue': ['eslint --fix --max-warnings=-1', 'prettier --write'],
  '*.{css,scss,less,html,md,json,yml,yaml}': ['prettier --write']
};

# 没有这个参数时（默认行为）
eslint --fix
# 有 warning 或 error → 退出码非0 → git 提交被阻止

# 加上 --max-warnings=-1
eslint --fix --max-warnings=-1
# 只有 error → 退出码非0 → git 提交被阻止
# 只有 warning → 退出码0（成功）→ git 提交继续
5、husky
# 1、只是一种 husky 的快捷配置，执行以下命令，会在项目中生成 .husky/pre-commit 脚本
# 2、会在 package.json 中添加 prepare 脚本
pnpm exec husky init

# 添加 commit-msg hook，目的代码提交时，对提交信息进行校验
echo "pnpm dlx commitlint --edit $1" > .husky/commit-msg


# 如下对应脚本的内容：

## pre-commit 
### git 每次提交之前都会执行 npx lint-staged 。
### lint-staged 会对所有暂存区的文件进行检查，而不是整个代码库。这提高了效率，因为只对修改过的文件进行检查。
npx lint-staged

## commit-msg 
### 在提交代码时，你可以通过 pnpm dlx 来运行 commitlint，确保提交消息符合规范。
pnpm dlx commitlint --edit \
6、cz-git

cz-git.qbb.sh/zh/guide/

一款工程性更强，轻量级，高度自定义，标准输出格式的 commitizen 适配器

可以在 package.json 中配置快速提交脚本。

{

  "scripts": {
    "cm": "git add -A && cz && git push",
  },
 "config": {
    "commitizen": {
      "path": "node_modules/cz-git"
    }
 }
}

# 经过以上配置在提交代码是可以直接运行如下脚本：
pnpm cm

Commitizen 规范 Git 提交说明

alidocs.dingtalk.com/i/nodes/k2w…

1、选择提交类型：

2、变更范围：

3、变化描述：

4、详细描述：

5、列出重大变更：

6、选择变更的问题类型：

7、确认提交：

8、开始执行 lint-staged


修复以上问题后，重新提交！

avatar
文章
阅读
粉丝