项目团队开发 为了保证统一的代码格式规范，可以借助两个插件以及 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], // 缩进 2quotes: ['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
public3）在根目录创建 .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
时小记，终有成。
