umi代码规范：ESLint、Prettier、Husky配置指南-优快云博客

umi代码规范：ESLint、Prettier、Husky配置指南

【免费下载链接】umi A framework in react community ✨ 项目地址: https://gitcode.com/GitHub_Trending/um/umi

前言：为什么需要代码规范？

在团队协作开发中，代码规范是保证项目质量和可维护性的关键因素。你是否遇到过以下痛点：

不同开发者代码风格不一致，导致代码难以阅读和维护
代码提交前忘记格式化，导致代码库风格混乱
低级错误频繁出现，影响开发效率
代码审查时花费大量时间在格式问题上

umi框架提供了完整的代码规范解决方案，本文将详细介绍如何配置ESLint、Prettier和Husky来打造专业的开发环境。

一、umi内置的代码规范能力

1.1 @umijs/lint包解析

umi提供了专门的@umijs/lint包，内置了针对React和TypeScript项目的优化配置：

// packages/lint/src/config/eslint/index.ts
import rules, {
  jest as jestRules,
  typescript as tsRules,
} from './rules/recommended';

module.exports = {
  parser: require.resolve('@babel/eslint-parser'),
  plugins: ['react', 'react-hooks'],
  settings: {
    react: {
      version: 'detect',
    },
  },
  env: {
    browser: true,
    node: true,
    es2022: true,
    jest: true,
  },
  rules,
  overrides: [
    {
      parser: require.resolve('@typescript-eslint/parser'),
      plugins: ['@typescript-eslint/eslint-plugin'],
      files: ['**/*.{ts,tsx}'],
      rules: tsRules,
    },
    {
      settings: {
        jest: {
          version: detectJestVersion(),
        },
      },
      files: ['**/*.{test,spec,unit,e2e}.{ts,tsx,js,jsx}'],
      plugins: ['jest'],
      rules: jestRules,
    },
  ],
};

1.2 核心规则配置

umi的ESLint配置包含了三个重要部分：

规则类型	覆盖范围	主要功能
基础规则	所有JavaScript文件	语法错误、最佳实践
TypeScript规则	.ts/.tsx文件	类型安全、TS特有规则
Jest测试规则	测试文件	测试代码质量保证

二、完整配置指南

2.1 项目初始化配置

首先确保项目已安装必要依赖：

// package.json
{
  "devDependencies": {
    "@umijs/lint": "workspace:*",
    "husky": "^8.0.3",
    "lint-staged": "^13.1.2",
    "prettier": "^2.8.4",
    "prettier-plugin-organize-imports": "^3.2.2",
    "prettier-plugin-packagejson": "^2.4.3"
  }
}

2.2 ESLint配置

创建.eslintrc.js文件：

const umiLintConfig = require('@umijs/lint/dist/config/eslint');

module.exports = {
  ...umiLintConfig,
  // 可以在此处覆盖或扩展配置
  rules: {
    ...umiLintConfig.rules,
    // 自定义规则
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
  },
};

2.3 Prettier配置

创建.prettierrc.js文件：

module.exports = {
  printWidth: 80,
  singleQuote: true,
  trailingComma: 'all',
  proseWrap: 'never',
  overrides: [{ files: '.prettierrc', options: { parser: 'json' } }],
  plugins: [
    require.resolve('prettier-plugin-packagejson'),
    require.resolve('prettier-plugin-organize-imports'),
  ],
};

2.4 Husky和lint-staged配置

在package.json中添加：

{
  "lint-staged": {
    "*.{js,jsx,less,md,json}": [
      "prettier --no-error-on-unmatched-pattern --cache --write"
    ],
    "*.ts?(x)": [
      "prettier --no-error-on-unmatched-pattern --cache --parser=typescript --write",
      "eslint --fix"
    ]
  },
  "scripts": {
    "prepare": "husky install",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
    "format": "prettier --cache --write ."
  }
}

初始化Husky：

npm run prepare
npx husky add .husky/pre-commit "npx --no-install lint-staged --quiet"

三、配置详解与最佳实践

3.1 ESLint规则解析

umi的推荐规则包含以下几个重要类别：

mermaid

3.2 Prettier格式化配置

Prettier的配置选项说明：

选项	默认值	说明	推荐值
printWidth	80	每行最大字符数	80-100
singleQuote	false	使用单引号	true
trailingComma	'es5'	尾随逗号	'all'
semi	true	分号	true
tabWidth	2	缩进空格数	2

3.3 Git钩子工作流程

mermaid

四、常见问题与解决方案

4.1 配置冲突处理

当ESLint和Prettier规则冲突时，需要安装eslint-config-prettier：

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

然后在ESLint配置中扩展：

module.exports = {
  extends: [
    '@umijs/lint/dist/config/eslint',
    'prettier' // 必须放在最后
  ],
};

4.2 忽略文件配置

创建.eslintignore和.prettierignore：

# .eslintignore
node_modules/
dist/
.umi/
.umi-production/

4.3 自定义规则配置

根据团队需求调整规则严格程度：

// .eslintrc.js
module.exports = {
  rules: {
    // 错误级别规则
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
    
    // 警告级别规则
    'react/prop-types': 'warn',
    
    // 关闭的规则
    'react/display-name': 'off',
  }
};

五、进阶配置技巧

5.1 多环境差异化配置

// .eslintrc.js
const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
  rules: {
    'no-debugger': isProduction ? 'error' : 'warn',
    'no-console': isProduction ? 'error' : 'warn',
  }
};

5.2 编辑器集成配置

创建.vscode/settings.json：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]
}

5.3 性能优化配置

// .eslintrc.js
module.exports = {
  parserOptions: {
    // 禁用不必要的解析选项提升性能
    babelOptions: {
      babelrc: false,
      configFile: false,
      browserslistConfigFile: false,
    },
    requireConfigFile: false,
  }
};

六、总结与最佳实践

通过本文的配置指南，你可以获得：

统一的代码风格：确保团队代码一致性
自动化的质量检查：提交前自动修复问题
类型安全：TypeScript项目的完整支持
测试规范：保证测试代码质量
开发体验提升：编辑器集成和实时反馈

配置清单核对表

安装必要的devDependencies
配置ESLint使用@umijs/lint
设置Prettier格式化规则
配置lint-staged和Husky
创建忽略文件配置
设置编辑器集成
团队文档和规范培训

通过这套完整的代码规范体系，你的umi项目将具备企业级的代码质量保障，大幅提升开发效率和代码可维护性。

【免费下载链接】umi A framework in react community ✨ 项目地址: https://gitcode.com/GitHub_Trending/um/umi

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考