【前端代码校验规则】Eslint、Stylelint、Prettier、lint-staged、husky、commitlint

需要注意引号【单双】空格，空行的配置

Eslint:

npm install @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-config-standard-with-typescript eslint-plugin-import eslint-plugin-n eslint-plugin-prettier eslint-plugin-promise eslint-plugin-react eslint-plugin-react-hooks -D

新建文件： .eslintrc.js

module.exports = {
    env: {
        browser: true,
        es2021: true,
        node: true,
    },
    extends: [ 'plugin:react/recommended', 'standard-with-typescript', 'prettier' ],
    overrides: [],
    parser: '@typescript-eslint/parser',
    parserOptions: {
        ecmaFeatures: {
            impliedStrict: true,
            jsx: true,
        },
        ecmaVersion: 'latest',
        sourceType: 'module',
        project: 'tsconfig.json',
    },
    plugins: [ 'react', 'prettier' ],
    /**
     * off或者0 => 关闭规则
     * warn或者1 => 开启规则，警告（不影响代码执行）
     * error或者2 => 开启规则，报错（代码不能执行，界面报错）
     */
    rules: {
        // @fixable 必须使用 === 或 !==，禁止使用 == 或 !=，与 null 比较时除外
        'eqeqeq': [
            'error',
            'always',
            {
                null: 'ignore'
            }
        ],
        semi: [ 2, 'always' ],
        // 引号风格，使用单引号，需要转义时忽略，反斜号忽略
        // quotes: [
        //     2,
        //     'single',
        //     {
        //         avoidEscape: true,
        //         allowTemplateLiterals: true,
        //     },
        // ],
        '@typescript-eslint/strict-boolean-expressions': 0,
        '@typescript-eslint/prefer-optional-chain': 0,
        '@typescript-eslint/restrict-template-expressions': [
            2,
            {
                allowNumber: true,
                allowBoolean: true,
                allowAny: true,
                allowNullish: true,
                allowRegExp: true,
            },
        ],
        '@typescript-eslint/semi': [ 2, 'always' ],
        '@typescript-eslint/no-useless-constructor': 2,
        '@typescript-eslint/no-empty-function': 1, // 禁止空函数
        '@typescript-eslint/no-var-requires': 0, // 不允许在 import 语句中使用 require 语句
        '@typescript-eslint/explicit-function-return-type': 0, // 不允许对初始化为数字、字符串或布尔值的变量或参数进行显式类型声明
        '@typescript-eslint/explicit-module-boundary-types': 0, // 要求导出函数和类的公共类方法的显式返回和参数类型
        '@typescript-eslint/no-explicit-any': 0, // 禁止使用 any 类型
        '@typescript-eslint/no-use-before-define': 2,
        '@typescript-eslint/no-unused-vars': 1, // 禁止定义未使用的变量
        '@typescript-eslint/naming-convention': [
            2,
            {
                selector: 'variable',
                format: [ 'camelCase', 'UPPER_CASE', 'snake_case', 'PascalCase' ],
                leadingUnderscore: 'forbid',
                filter: {
                    // 忽略部分无法控制的命名
                    regex: '^(__html|zh_CN|en_US)$',
                    match: false,
                },
            },
            {
                selector: 'property',
                format: [ 'camelCase', 'UPPER_CASE', 'snake_case', 'PascalCase' ],
                leadingUnderscore: 'forbid',
                filter: {
                    // 忽略部分无法控制的命名
                    regex: '^(__html|zh_CN|en_US)$',
                    match: false,
                },
            },
            {
                selector: 'class',
                format: [ 'PascalCase' ],
                leadingUnderscore: 'forbid',
            },
            {
                selector: 'interface',
                format: [ 'PascalCase' ],
                leadingUnderscore: 'forbid',
            },
            {
                selector: 'parameter',
                format: [ 'camelCase', 'UPPER_CASE', 'snake_case' ],
                leadingUnderscore: 'allow',
                filter: {
                    regex: '^(Child|WrappedComponent)$',
                    match: false,
                },
            },
            {
                selector: 'memberLike',
                format: [ 'PascalCase', 'camelCase'