全局代码规范配置 （ Eslint ）

项目团队开发 为了保证统一的代码格式规范，可以借助两个插件以及 eslint 自由配置进行

首先需要在 vscode 安装 

Eslint           Prettier - Code formatter

安装所需依赖

pnpm install --save-dev eslint eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y eslint-plugin-import

pnpm install --save-dev --save-exact prettier

------------------------------------------------------------------------------------------------------------------------

 1）首先在根目录下创建   .eslintrc.cjs 文件，这个文件中用来配置你们的代码格式规范，内容如下，以下是我自己个人习惯的配置，可以根据你们的实际需求更改

module.exports = {
    env: {
        browser: true,
        es2021: true,
        node: true,
    },
     parser: '@typescript-eslint/parser',
    extends: [
        'eslint:recommended',
        'plugin:react/recommended',
        'plugin:react-hooks/recommended',
        'plugin:jsx-a11y/recommended',
        'prettier',
        'plugin:@typescript-eslint/recommended'
    ],
    parserOptions: {
        ecmaFeatures: {
            jsx: true,
        },
        ecmaVersion: 12,
        sourceType: 'module',
    },
    plugins: ['react', 'react-hooks', 'jsx-a11y','import'],
      settings: {
    react: {
      version: 'detect',
    },
  },
  rules: {
    // "off"可以替换成0，代表关闭该规则
    // "warn"可以替换成1，代表打开规则，提示警告，但不会报错
    // "error"可以替换成2，代表打开规则，直接报错
    'no-var': 2, // 不能使用var声明变量
    'no-extra-semi': 2, // 禁止多余的冒号
    semi: 2,
    'semi-style': ['error', 'last'],
    '@typescript-eslint/no-extra-semi': 2,
    // '@typescript-eslint/indent': ['error', 2], // 缩进 2
    quotes: ['error', 'single'], // 字符串使用单双引号,double,single
    'no-dupe-keys': 2, // 在创建对象字面量时不允许键重复 {a:1,a:1}
    'no-dupe-args': 2, // 函数参数不能重复
    'no-const-assign': 2, // 禁止修改const声明的变量
    'no-eq-null': 2, // 禁止对null使用==或!=运算符
    'no-eval': 1, // 禁止使用eval
    'no-ex-assign': 2, // 禁止给catch语句中的异常参数赋值
    'no-extend-native': 2, // 禁止扩展native对象
    'no-extra-bind': 2, // 禁止不必要的函数绑定
    'no-inline-comments': 0, // 禁止行内备注
    'no-inner-declarations': [2, 'functions'], // 禁止在块语句中使用声明（变量或函数）
    'no-invalid-regexp': 2, // 禁止无效的正则表达式
    'no-invalid-this': 2, // 禁止无效的this，只能用在构造器，类，对象字面量
    'no-irregular-whitespace': 2, // 不能有不规则的空格
    'no-labels': 2, // 禁止标签声明
    'no-lone-blocks': 2, // 禁止不必要的嵌套块
    'no-multi-spaces': 1, // 不能用多余的空格
    'no-multi-str': 2, // 字符串不能用\换行
    'no-multiple-empty-lines': [1, { max: 2 }], // 空行最多不能超过2行
    'no-native-reassign': 2, // 不能重写native对象
    'no-negated-in-lhs': 2, // in 操作符的左边不能有!
    'no-nested-ternary': 0, // 禁止使用嵌套的三目运算
    'no-new': 1, // 禁止在使用new构造一个实例后不赋值
    'no-new-func': 1, // 禁止使用new Function
    'no-new-object': 2, // 禁止使用new Object()
    'no-new-require': 2, // 禁止使用new require
    'no-new-wrappers': 2, // 禁止使用new创建包装实例，new String new Boolean new Number
    'no-redeclare': 2, // 禁止重复声明变量
    'no-regex-spaces': 2, // 禁止在正则表达式字面量中使用多个空格 /foo bar/
    'no-restricted-modules': 0, // 如果禁用了指定模块，使用就会报错
    'no-throw-literal': 2, // 禁止抛出字面量错误 throw 'error';
    // 'no-undef': 1, // 不能有未定义的变量
    'no-undef-init': 2, // 变量初始化时不能直接给它赋值为undefined
    // 'no-undefined': 2, // 不能使用undefined
    'no-unexpected-multiline': 2, // 避免多行表达式
    'no-param-reassign': ['error', { props: false }], // 防止对函数参数进行重新赋值
    'no-console': 'off', // 不进行检查console.log
    'import/prefer-default-export': 'off',
    // 禁止使用递增和递减运算符（++和--）
    'no-plusplus': [
      'error',
      {
        allowForLoopAfterthoughts: true,
      },
    ],
    '@typescript-eslint/ban-types': 'off',
    'react/display-name': 'off',
    'react/jsx-uses-react': 'off',
    'react/react-in-jsx-scope': 'off',
    'import/extensions': 'off',
    'import/no-unresolved': 'off',
    'import/no-extraneous-dependencies': ['error', { devDependencies: true }], // 检测项目中导入的外部模块是否被正确地列为项目的依赖项
    // 关闭variable必须全部大写规则
    '@typescript-eslint/naming-convention': [
      'error',
      {
        selector: 'variable',
        modifiers: ['const'],
        format: null,
      },
    ],
  },
};

2）还是在根目录创建 .eslintignore ；这个文件内部写的是你不需要格式化的文件，比如写上mock，那么 mock 这个文件里面的代码就不会受到格式化的影响，我的配置如下

node_modules
dist
mock
public

3）在根目录创建 .prettierrc.js ；我的配置如下（ 照搬就可以 ）

module.exports = {
    semi: false,
    singleQuote: true,
    trailingComma: 'all',
    printWidth: 80,
    tabWidth: 2,
};

4）在 vscode 的 settings.json 加入以下代码

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true,
  "source.fixAll.stylelint": true,
  "source.organizeImports": true
}

全部配置好之后可以运行

npx eslint .
npx prettier --check .

检查是否配置成功，如果出现报错，根据报错安装所对应的依赖包就可以。

如有特需的配置也可前往 Eslint 官网去查看详细:Configure ESLint - ESLint - Pluggable JavaScript Linter

时小记，终有成。