在现代前端开发中，代码规范化是至关重要的。通过使用 ESLint、Prettier、Husky 和 lint-staged 这些工具，我们可以实现自动化的代码规范检查和格式化，从而提高团队的代码质量和开发效率。本文将详细介绍如何配置和集成这些工具，以实现前端代码规范化的最佳实践。

1.什么是 ESLint、Prettier、Husky 和 lint-staged？

ESLint：ESLint 是一个用于识别和报告 JavaScript 代码中的模式的工具，可以帮助您发现代码中的潜在问题，并强制执行一致的代码风格。
Prettier：Prettier 是一个代码格式化工具，可以帮助您自动格式化代码，使代码风格保持一致。
Husky：Husky 是一个 Git 钩子工具，可以让您在 Git 钩子事件发生时执行命令，比如在提交代码前运行 ESLint 检查。
lint-staged：在提交代码前进行lint检查时，可以让lint只检查git暂存区（staged）的文件，而不会检查所有文件；

2.安装相关依赖

2.1安装eslint和prettier

在项目中安装eslint和prettier

npm i eslint

npm i prettier

2.2在vscode中安装eslint和prettier插件

2.3安装eslint-config-prettier，eslint-plugin-prettier，eslint-plugin-vue

npm i eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue

2.4ts支持

如果项目中用到了ts，还需要安装ts相关eslint依赖

npm i @typescript-eslint/eslint-plugin  // 指定了 ts 代码规范的 plugin

npm i @typescript-eslint/parser   // 解析器，使 eslint 可以解析 ts 语法

2.5配置eslintrc.cjs和.prettierrc.json

.eslintrc.cjs

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended'
  ],
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    'prettier/prettier': [
      1,
      {
        endOfLine: 'auto'
      }
    ],
    'vue/multi-word-component-names': 0,
     '@typescript-eslint/no-unused-vars': 'error',
     eqeqeq: 'error',
  }
}

.prettierrc.json

{
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "semi": false,
  "trailingComma": "none",
  "bracketSpacing": true
}

.prettierignore

node_modules
dist
public
src/shime-uni.d.ts

3.husky

Husky 是一个 Git 钩子工具，它可以帮助开发团队在 Git 钩子事件发生时执行命令。Git 钩子是在特定的 Git 事件（如提交代码、推送代码等）发生时触发的脚本，可以用于执行自定义的操作，比如代码检查、代码格式化、单元测试等。

Husky 可以让开发团队在提交代码前或推送代码前执行一些预定义的任务，以确保代码质量和一致性。通过 Husky，您可以在团队的代码提交流程中集成代码检查工具（如 ESLint、Prettier）、单元测试工具等，从而提高代码质量和开发效率。

Husky 主要特点包括：

易于配置：Husky 的配置简单直观，可以通过 package.json 文件中的 husky 字段进行配置。
灵活性：Husky 支持多种 Git 钩子事件，可以根据项目的需求选择性地配置执行的命令。
与 lint-staged 集成：Husky 可以与 lint-staged 结合使用，实现在提交代码前运行部分 ESLint 检查，从而提高代码质量。

3.1配置husky

安装husky

npm i husky --save-dev

向package.json的scripts中添加命令

{
  "scripts": {
    "prepare": "husky install",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
  }
}

prepare命令会在执行npm install（不带参数的情况下）之后自动执行。也就是说当我们执行npm install安装完项目依赖后会执行husky install命令，该命令会创建.husky/并指定该目录为git hooks所在的目录。这里我们先手动执行一次npm run prepare,会创建.husky目录。

3.2添加pre-commit hooks

npx husky add .husky/pre-commit 或 npx husky set .husky/pre-commit

这将在./husky/目录下生成一个pre-commit脚本文件，在文件里添加npm run lint这个命令，添加完成后文件内容为

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

npm run lint

3.3lint-staged

完成husky配置之后，我们做到了通过每次git提交时都对项目做 lint 检查，防止不符合规范的代码提交到仓库，但是这带来一个问题：每次提交都将对整个项目做 lint 检查，对于一个越来越大的项目来说，这无疑是一个很耗时的操作，除此之外，对于新接入这些配置的项目，项目中可能已经存在了大量不符合规范的代码，不能要求在提交时把所有历史遗留的问题修复之后才能提交。这个时候就需要用到lint-staged这个工具了。

安装lint-staged

npm install --save-dev lint-staged

在package.json中配置lint-staged和husky

  "lint-staged": {
    "src/**/*.{js,vue,ts}": [  // 只匹配src下的js vue 和ts
      "eslint --fix",
      "git add"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"  // 提交前执行lint-staged
    }
  },

向package.json的scripts中添加命令：


{

  "scripts": {

    "lint-staged": "lint-staged"

  }

}

修改.husky/pre-commit脚本的内容
将.husky/pre-commit脚本的内容改为npm run lint-staged

#!/bin/sh

. "$(dirname "$0")/husky.sh"

npm run lint-staged

通过上面的步骤，就完成了lint-staged的配置，这个时候再进行 git 提交时，将只检查暂存区（staged）的文件，不会检查项目所有文件，加快了每次提交 lint 检查的速度，同时也不会被历史遗留问题影响。
通过这样的约束让我们定义的规则规范大家都能去遵守，共同维护代码的质量。

4.代码错误提交实践

上面的.eslintrc.cjs配置的rule规则，如果写的代码不符合里面配置的规范，在代码提交时就会提示错误，并无法提交例如：配置的rule如下：不能使用==,只能使用===

  rules: {
    eqeqeq: 'error',
  },

在一个vue文件中，使用==,会爆红

，

我们提交一下代码，看有什么提示

可以看到控制台回输出相关错误，提示不能使用==，并且没法提交到git，如果改成===，就可以正常提交并推送git了。

vscode配置

{
  "explorer.confirmDelete": false,
  "vue.inlayHints.optionsWrapper": false
  "[html]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  "vue.blocks": {},
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "prettier.singleQuote": true,
  "prettier.semi": false,
  "files.associations": {
    "*.vue": "vue"
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "emmet.syntaxProfiles": {},
  "editor.formatOnSave": true,
  "prettier.jsxSingleQuote": true,
  "eslint.run": "onSave",   // 重要
  "emmet.excludeLanguages": ["javascriptreact", "javascript", "markdown"],
  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": true,
  "html.autoClosingTags": false,
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-expand-multiline"
    },
    "prettyhtml": {
      "printWidth": 100,
      "singleQuote": true,
      "wrapAttributes": false,
      "sortAttributes": false
    }
  },
  "window.zoomLevel": 0,
  "vetur.format.defaultFormatter.js": "none",
  "vetur.format.defaultFormatter.html": "none",
  "minapp-vscode.disableAutoConfig": true,
  "workbench.startupEditor": "none",
  "tabnine.experimentalAutoImports": true
}

前端代码规范化ESLint + Prettier + husky + lint-staged