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

eslint

安装依赖

yarn add -D eslint
eslint --init

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

包名	作用
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, // 启用 ES2021 语法
    node: true, // 设置环境为 Node.js
  },
  extends: [
    'eslint:recommended', // 基本的 ESLint 规则
    'plugin:react/recommended', // React 相关规则
    'plugin:@typescript-eslint/recommended', // TypeScript 相关规则
    'airbnb', // 使用 Airbnb 规则
    'airbnb/hooks', // 支持 React Hooks 规则
    'plugin:prettier/recommended', // 集成 Prettier 规则
  ],
  overrides: [], // 额外的配置覆盖
  parser: '@typescript-eslint/parser', // 使用 TypeScript 解析器
  parserOptions: {
    ecmaVersion: 'latest', // 启用最新的 ECMAScript 版本
    sourceType: 'module', // 代码模块化
  },
  plugins: ['react', '@typescript-eslint', 'jsx-a11y', 'prettier'], // 使用的插件列表
  settings: {
    'import/resolver': {
      webpack: {
        config: 'webpack.config.js', // 设置 Webpack 配置文件路径
      },
    },
  },
  rules: {
    'react/jsx-filename-extension': [
      2,
      {
        extensions: ['.jsx', '.tsx'], // 允许 .jsx 和 .tsx 文件扩展名
      },
    ],
    '@typescript-eslint/no-var-requires': [0], // 禁用 @typescript-eslint/no-var-requires 规则
    'react/function-component-definition': [0], // 禁用 react/function-component-definition 规则
    'react/jsx-props-no-spreading': [0], // 禁用 react/jsx-props-no-spreading 规则
    'jsx-a11y/no-static-element-interactions': [0], // 禁用 jsx-a11y/no-static-element-interactions 规则
    'jsx-a11y/click-events-have-key-events': [0], // 禁用 jsx-a11y/click-events-have-key-events 规则
    'react/require-default-props': [0], // 禁用 react/require-default-props 规则
    'react/no-array-index-key': [0], // 禁用 react/no-array-index-key 规则
    '@typescript-eslint/ban-ts-comment': [0], // 禁用 @typescript-eslint/ban-ts-comment 规则
    'no-undef': [0], // 禁用 no-undef 规则
    'no-unused-vars': [0], // 禁用 no-unused-vars 规则
    'prettier/prettier': [
      2,
      {
        singleQuote: true, // 使用单引号
      },
    ],
    'import/extensions': [
      2,
      'ignorePackages',
      {
        ts: 'never',
        tsx: 'never',
        js: 'never',
      },
    ],
  },
};

修改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 错误和警告
    }),
  ],
};

设置git提交时自动格式化

yarn add -D husky lint-staged

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, // 如果有警告，立即终止构建
    }),
  ],
};