ESLint+Prettier+Husky+Lint-staged配置

ESLint+Prettier

1. 引入 ESLint

ESLint 是 JavaScript 和 TypeScript 项目的标准代码检查工具。

安装 ESLint

npm install eslint --save-dev

配置文件示例

.eslintrc.js 文件的 Vue 项目配置示例：

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ['plugin:vue/essential', 'eslint:recommended', 'plugin:prettier/recommended'],
  parserOptions: {
    parser: '@babel/eslint-parser',
  },
  rules: {
    // 自定义规则
    'vue/multi-word-component-names': 'off', // vue组件name无需用横杠连接
    'no-unused-vars': ['error', { argsIgnorePattern: '^_' }], // 关闭未使用变量规则
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  },
}

2. 引入 Prettier

Prettier 是一款代码格式化工具，可以与 ESLint 配合使用。

安装 Prettier

npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

配置 Prettier

新增 .prettierrc 文件，设置格式化规则：

module.exports = {
  // 一行最多 120 字符
  printWidth: 120,
  // 使用 4 个空格缩进
  tabWidth: 2,
  // 不使用 tab 缩进，而使用空格
  useTabs: false,
  // 行尾需要有分号
  semi: false,
  // 使用单引号代替双引号
  singleQuote: true,
  // 对象的 key 仅在必要时用引号
  quoteProps: 'as-needed',
  // jsx 不使用单引号，而使用双引号
  jsxSingleQuote: false,
  // 末尾使用逗号
  trailingComma: 'all',
  // 大括号内的首尾需要空格 { foo: bar }
  bracketSpacing: true,
  // jsx 标签的反尖括号需要换行
  jsxBracketSameLine: false,
  // 箭头函数，只有一个参数的时候，也需要括号
  arrowParens: 'always',
  // 每个文件格式化的范围是文件的全部内容
  rangeStart: 0,
  rangeEnd: Infinity,
  // 不需要写文件开头的 @prettier
  requirePragma: false,
  // 不需要自动在文件开头插入 @prettier
  insertPragma: false,
  // 使用默认的折行标准
  proseWrap: 'preserve',
  // 根据显示样式决定 html 要不要折行
  htmlWhitespaceSensitivity: 'css',
  // 换行符使用 lf
  endOfLine: 'auto',
  // 强制元素属性换行
  singleAttributePerLine: false,
}

3. 安装和配置 Lint-Staged + Husky

这些工具可以在提交代码前进行自动校验。

安装依赖

npm install lint-staged husky --save-dev

初始化 Husky

运行以下命令，初始化 Husky 并创建 .husky 目录：

npx husky-init

配置 Git 钩子

添加 pre-commit 钩子
通过以下命令添加一个 pre-commit 钩子，用于在提交之前运行特定脚本：

npx husky add .husky/pre-commit "npm test"

该命令会在.husky目录下生成一个名为pre-commit的文件，内容如下：

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx test

npm test用于集成测试和单元测试

2.在 package.json 文件中添加以下内容：

{
"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.js": "eslint --fix",
    "*.ts": "eslint --fix",
    "*.vue": "eslint --fix",
    "*.json": "prettier --write",
    "*.css": "prettier --write"
  }
}

3.将 lint-staged 集成到 pre-commit 钩子中：

npx husky add .husky/pre-commit "npx lint-staged"

注意：在执行上述命令时，终端提示：

husky - add command is DEPRECATED

导致pre-commit文件中并未添加npx lint - staged，故手动添加该内容

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged