从零开始搭建React+TypeScript+webpack开发环境-代码规约(基于eslint和stylelint）

本文链接：https://blog.csdn.net/weixin_41908433/article/details/134104697

文章介绍了如何在React和TypeScript项目中集成ESLint进行代码检查，包括配置React插件、TypeScript支持、Webpack集成、Airbnb规则和Prettier代码风格管理。同时，还展示了如何使用Stylelint检查样式代码，并在git提交前自动格式化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

eslint

安装依赖

yarn add -D eslint eslint-webpack-plugin @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-airbnb-base eslint-config-airbnb-typescript eslint-plugin-import eslint-import-resolver-webpack eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react prettier eslint-config-prettier

包名	作用
`eslint-plugin-react`	用于检查和规范 React 代码的 ESLint 插件。包括 JSX 语法检查、React 组件的规则等。
`@typescript-eslint/eslint-plugin`	ESLint 插件，专门用于检查 TypeScript 代码，包括类型检查、变量声明、函数参数类型等。
`@typescript-eslint/parser`	ESLint 解析器，用于解析 TypeScript 代码，以进行静态分析和规则检查。
`eslint-webpack-plugin`	用于在 Webpack 构建时运行 ESLint 的插件，帮助检查代码质量并捕获潜在问题。
`eslint-config-airbnb`	Airbnb 公司提供的 ESLint 规则配置，包括 JavaScript 和 React 最佳实践规则。
`eslint-plugin-react-hooks`	ESLint 插件，用于检测和规范 React Hooks 的使用，确保正确使用 React Hooks。
`eslint-plugin-jsx-a11y`	用于检查 JSX 元素上的无障碍性（accessibility）规则，确保应用对所有用户友好。
`eslint-plugin-import`	用于检查和维护模块导入语句的规则，以确保代码的一致性和可维护性。
`prettier`	Prettier 代码格式化工具，用于美化和规范代码的格式。
`eslint-config-prettier`	用于将 ESLint 规则与 Prettier 配合使用，以避免规则冲突，确保代码格式一致。
`eslint-plugin-prettier`	允许 ESLint 自动运行 Prettier 格式化程序，保持代码格式的一致性。
`eslint-import-resolver-webpack`	用于在 ESLint 中解析和处理 Webpack 模块导入的插件，确保正确的模块解析。

修改`.eslintrc.js`

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:jsx-a11y/recommended',
    'eslint-config-airbnb-base',
    'eslint-config-airbnb-typescript',
    'plugin:prettier/recommended'
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint', 'jsx-a11y', 'prettier'],
  settings: {
    'import/resolver': {
      webpack: {
        config: 'webpack.config.js',
      },
    },
  },
  rules: {
    'react/jsx-filename-extension': [2, { extensions: ['.tsx'] }],
    'import/extensions': [2, 'never'],
    'prettier/prettier': [
      2,
      {
        singleQuote: true,
      },
    ],
  },
};

修改webpack配置

const ESLintPlugin = require("eslint-webpack-plugin");
const path = require('path'); // 请确保导入 path 模块

module.exports = {
  plugins: [
    new ESLintPlugin({
      emitError: true, // 将错误视为构建失败
      emitWarning: true, // 将警告输出到控制台
      failOnError: true, // 如果有错误，立即终止构建
      failOnWarning: true, // 如果有警告，立即终止构建
      overrideConfigFile: path.join(__dirname, ".eslintrc.js"), // 使用指定的 ESLint 配置文件
      fix: true, // 尝试自动修复代码中的 ESLint 错误和警告
    }),
  ],
};

stylelint

安装依赖

yarn add -D stylelint stylelint-config-standard stylelint-webpack-plugin stylelint-config-prettier

包名	作用和描述
`stylelint`	Stylelint 核心包，用于执行样式检查。
`stylelint-config-standard`	Stylelint 的标准配置，包含了一组常见的样式规则。
`stylelint-webpack-plugin`	Webpack 插件，允许你在构建过程中运行 Stylelint 检查。
`stylelint-config-prettier`	与 Prettier 配合使用的 Stylelint 配置，确保样式规则与代码格式一致。

添加`.stylelintrc.js`

module.exports = {
  extends: ["stylelint-config-standard", "stylelint-config-prettier"],
  overrides: [
    {
      files: "**/*.less",
      customSyntax: "postcss-less",
    },
  ],
  rules: {
    // 使用单引号而不是双引号
    "selector-attribute-quotes": "never",
    // 允许未知的 @ 规则
    "at-rule-no-unknown": null,
    // 忽略类名选择器的命名模式
    "selector-class-pattern": null,
    // 自定义伪类选择器的规则
    "selector-pseudo-class-no-unknown": [true, {
      ignorePseudoClasses: ["global"],
    }],
    // 忽略特异性降低的规则
    "no-descending-specificity": null,
  },
  ignoreFiles: ["public/index.html"],
};

修改`webpack`配置

const StylelintPlugin = require('stylelint-webpack-plugin');
const path = require('path'); // 请确保导入 path 模块

module.exports = {
  plugins: [
    new StylelintPlugin({
      context: 'src', // 指定样式文件的根目录
      configFile: path.resolve(__dirname, '.stylelintrc'), // 指定 Stylelint 配置文件的路径
      files: '**/*.(css|less)', // 要检查的文件匹配模式，这里检查 .css 和 .less 文件
      fix: true, // 尝试自动修复样式错误和警告
      emitError: true, // 将错误视为构建失败
      emitWarning: true, // 将警告输出到控制台
      failOnError: true, // 如果有错误，立即终止构建
      failOnWarning: true, // 如果有警告，立即终止构建
    }),
  ],
};

设置git提交时自动格式化

安装依赖

yarn add -D husky lint-staged

修改`package.json`

{
  "scripts": {
    "precommit": "lint-staged",
    "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "**/*.less": "stylelint --syntax less",
    "**/*.{js,jsx,ts,tsx}": "npm run lint-staged:js",
    "**/*.{js,jsx,tsx,ts,less,md,json}": ["eslint --write"]
  }
}