Nx Monorepo中ESLint、Prettier及Husky配置最佳实践

一、统一配置ESLint #

Nx默认已集成ESLint，只需统一根目录配置并适配各框架子项目：

• 安装各框架所需ESLint插件：

npm install eslint-plugin-angular eslint-plugin-react eslint-plugin-vue --save-dev

• 根目录创建/更新.eslintrc.json，通过overrides字段为不同框架子项目指定规则：

{
  "root": true,
  "ignorePatterns": ["**/*"],
  "plugins": ["@nx"],
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
  "overrides": [
    // Angular子项目配置
    {
      "files": ["**/angular/**/*.ts", "**/angular/**/*.html"],
      "extends": ["plugin:@nx/angular", "plugin:angular/recommended"],
      "rules": {
        // 自定义Angular规则示例
        "@angular-eslint/component-selector": "off"
      }
    },
    // React子项目配置
    {
      "files": ["**/react/**/*.tsx", "**/react/**/*.ts"],
      "extends": ["plugin:@nx/react", "plugin:react/recommended", "plugin:react-hooks/recommended"],
      "rules": {
        // 自定义React规则示例
        "react/prop-types": "off"
      }
    },
    // Vue子项目配置
    {
      "files": ["**/vue/**/*.vue", "**/vue/**/*.ts"],
      "extends": ["plugin:@nx/vue", "plugin:vue/vue3-recommended"],
      "rules": {
        // 自定义Vue规则示例
        "vue/multi-word-component-names": "off"
      }
    }
  ]
}

• 根目录创建.eslintignore，忽略无需检查的文件：

node_modules/
dist/
tmp/
*.md

二、集成Prettier并与ESLint协同 #

• 安装Prettier及ESLint集成依赖：

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

• 根目录创建.prettierrc，定义统一格式化规则：

{
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 100,
  "tabWidth": 2,
  "semi": true
}

• 根目录创建.prettierignore：

node_modules/
dist/
tmp/
apps/**/*.html
libs/angular/**/*.html

三、配置Husky Git钩子实现提交前检查 #

• 安装Husky和lint-staged：

npm install husky lint-staged --save-dev

• 启用Husky：

npx husky install

• 添加pre-commit钩子：

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

• 根目录创建lint-staged.config.js，定义不同文件的检查和格式化命令：

module.exports = {
  "*.{ts,tsx,js,jsx,vue}": ["eslint --fix", "prettier --write"],
  "*.{html,css,scss,json}": ["prettier --write"]
};

• （可选）在package.json中添加手动检查脚本：

{
  "scripts": {
    "lint": "nx lint",
    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,vue,html,css,scss,json}\""
  }
}

内容的提问来源于stack exchange，提问作者Smaillns