create-react-app下的配置

去掉package.json 里面的eslint字段（项目创建时选择了eslint，删除防止冲突）

 "eslintConfig": {
    "extends": "react-app"
  }

安装依赖prettier相关依赖。
- eslint-config-prettier 是用来覆盖和eslint冲突的不重要的规则，保证prettier的格式化不会被报错
- eslint-plugin-prettier 是prettier 格式化规则插件，默认会调用.prettierrc文件
- prettier 是prettier 格式化插件

yarn add eslint-config-prettier eslint-plugin-prettier prettier -D

项目根目录增加.editorconfig .prettierrc .eslintrc文件

.editorconfig

不同的开发人员，不同的编辑器，有不同的编码风格，而EditorConfig就是用来协同团队开发人员之间的代码的风格及样式规范化的一个工具，而.editorconfig正是它的默认配置文件

# 控制 .editorconfig 是否生效的字段
root = true
# 匹配全部文件
[*]
# 缩进风格，可选"space"、"tab"
indent_style = space
# 缩进的空格数
indent_size = 2
# 设置字符集
charset = utf-8
# 删除一行中的前后空格
trim_trailing_whitespace = true
# 在文件结尾插入新行
insert_final_newline = true
# 结尾换行符，可选"lf"、"cr"、"crlf"
end_of_line = lf

[*.md]

trim_trailing_whitespace = true

.prettierrc

{ 
"trailingComma": "none", 
"tabWidth": 2, 
"semi": false, 
"singleQuote": true, 
"jsxSingleQuote": true,
"endOfLine": "lf",
"printWidth": 120, 
"bracketSpacing": true,
"arrowParens": "always",
"useTabs": false
}

.eslintrc

 { 
    "extends": ["react-app", "prettier"],
    "plugins": ["prettier"],
    "rules": {
        "prettier/prettier": ["error", { "endOfLine": "lf" }],
        "@typescript-eslint/no-unused-vars": ["error"],
        "jsx-quotes": [1, "prefer-single"],
        "no-class-assign": "error",
        "no-dupe-keys": "error",
        "no-dupe-args": "error",
        "no-duplicate-case": "error",
        "no-fallthrough": "error",
        "no-func-assign": "error",
        "no-multi-spaces": "warn",
        "no-var": "error",
        "eqeqeq": [2, "allow-null"],
        "quotes": [1, "single"],
        "no-unreachable": "error",
        "no-multiple-empty-lines": [2, { "max": 2 }], "camelcase": "warn",
        "react/jsx-key": 2, "react/jsx-max-props-per-line": 0, "space-infix-ops": "error"
     }
 }

安装依赖stylelint相关依赖(用到了scss语法，所以安装了node-scss 和 stylelint-scss)。

 yarn add stylelint stylelint-config-standard stylelint-order stylelint-config-rational-order 
 stylelint-scss node-scss -D

增加.stylelintrc

{
	"extends": [
	  "stylelint-config-standard",
	  "stylelint-config-rational-order"
	],
	"rules": {
	  "indentation": 2,
	  "no-missing-end-of-source-newline": null,
	  "max-nesting-depth": 3,
	  "selector-max-compound-selectors": 3,
	  "at-rule-no-unknown": null,
	  "scss/at-rule-no-unknown": true
	},
	"plugins": [
	  "stylelint-scss"
	]
  }

增加本项目vscode的设置，根目录下建立一个.vscode文件夹，在里面建立一个settings.json

settings.json 这个是针对工作区的配置文件。默认打开的设置界面配置的是全局设置，对每个工作区都会起作用，不过工作区的配置会覆盖全局配置，优先级更高。 最重要的是保存自动修复代码格式

{
    // eslint配置
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact"
    ],
    "editor.formatOnSave": true,
    "javascript.format.enable": false,
    "typescript.format.enable": false,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    // 默认lf换行
    "files.eol": "\n",
    // stylelint配置
    "stylelint.enable": true,
    "css.validate": false,
    "less.validate": false,
    "scss.validate": false,
    "[scss]": {
        "editor.formatOnSave": false
    }
}

安装依赖git提交规范的相关依赖。

yarn add husky lint-staged -D

Husky：是一个代码提交钩子。即在代码被提交到Git仓库之前，我们可以在这里做一些预检查或者格式化，需要做这些操作，我们需要一个Git的提交钩子，简单说就是使用Git命令会触发的函数。

首先按官网文档执行

npm set-script prepare "husky install"
npm run prepare

这是会在项目目录下生成一个.husky文件夹，再执行

npx husky add .husky/pre-commit "npm test"

会在.husky文件下生成一个pre-commit文件（可用于提交前的执行test命令进行校验）

Lint-staged：是一个前端文件过滤的工具。是一个仅仅过滤出Git代码暂存区文件（被 committed 的文件）的工具。Lint-staged 仅仅是文件过滤器，不会帮你格式化任何东西。

新建.lintstagedrc

{
  "**/*.{js,jsx}": [
    "prettier --config .prettierrc --write",
    "eslint --fix"
  ],
}

之后提交的时候就会触发校验，如下

7、安装commit提交校验相关依赖

 yarn add @commitlint/cli @commitlint/config-conventional -D

类似上面的pre-commit，我们也可以添加commit-msg钩子，来规范我们的commit message信息

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

新建配置文件commitlint.config.js

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    // 数组中第一位为level，可选0,1,2，0为disable，1为warning，2为error，第二位为应用与否，可选always|never，第三位该rule的值。
    'type-enum': [
      2,
      'always',
      // ['feat', 'fix', 'update', 'docs', 'style', 'refactor', 'test', 'chore', 'revert']
      [
        'feat', // Adds a new feature. 新增feature
        'fix', // Solves a bug. 修复bug
        'update', // Update a feature. 更新feature
        'docs', // Adds or alters documentation. 仅仅修改了文档，比如README, CHANGELOG, CONTRIBUTE等等
        'style', // Improves formatting, white-space. 仅仅修改了空格、格式缩进、都好等等，不改变代码逻辑
        'refactor', // Rewrites code without feature, performance or bug changes. 代码重构，没有加新功能或者修复bug
        'test', // Adds or modifies tests. 测试用例，包括单元测试、集成测试等
        'chore', // Other changes that don't modify src or test files. 改变构建流程、或者增加依赖库、工具等
        'revert' // Reverts a previous commit. 回滚到上一个版本
      ]
    ],
    // 主题句号，默认没有
    'subject-full-stop': [0, 'never'],
    'subject-case': [0, 'never']
  }
}

这是提交就会判断message是否正确，如下

React+Eslint + Prettier + stylelint + Husky + Lint-staged+ commitlint 代码规范详解

create-react-app下的配置