代码提交时自动格式化配置

前言

多人合作的问题就在于大家代码风格都不一样，有了代码提交时自动格式化，可以避免再开发过程中去考虑代码格式的问题（经常气的想关掉eslint），同时保证了一定的规范性

husky

一个git钩子工具，这里主要用pre-commit钩子。通俗点讲就是husky可以在你commit之前帮你做一些事情。

prettier

一个很流行的代码格式化工具，你很容易在编辑器找到实现它的各种插件，像vscode,atom,webstom都可以找到。这里用它在代码提交前做代码格式化。

eslint

代码检查工具。eslint也可以负责一部分代码格式检查的工作，但是prettier已经做的很好了，所以我便没用eslint的代码格式检查，只让其负责代码错误检查。

lint-staged

在你提交的文件中，执行自定义的指令

安装依赖

// eslint依赖
eslint 
babel-eslint 
eslint-config-airbnb  // 导入默认eslint选项
eslint-config-airbnb-typescript  // 支持ts与js
eslint-plugin-import  // import规则插件
eslint-plugin-jsx-a11y 
eslint-plugin-react   // react规则插件
eslint-plugin-react-hooks  // react 16.8+ 以上版本规则插件

// 如果需要对tsx文件进行语法规范
@typescript-eslint/parser 
@typescript-eslint/eslint-plugin

//当prettier规则与 eslint-plugin-react 规则冲突时使用
eslint-config-prettier/react

//在tsconfig配置了paths时帮助
//eslint-plugin-import 找到正确的 .ts 和 .tsx 文件
eslint-import-resolver-typescript

//prettier依赖
prettier 
eslint-plugin-prettier  // 将perttier当作eslint规范
eslint-config-prettier  // 以prettier规范为主

//husky
husky

//lint-staged
lint-staged
pretty-quick

eslint文件配置
个人配置习惯

// eslint中文配置文档：https://cn.eslint.org/docs/user-guide/configuring
{
    "extends": [
       "airbnb",   // 启用 airbnb 
       "airbnb/hooks",   // 启用 airbnb/hooks
       "perttier",
       "prettier/react", // 解决 eslit-plugin-react 与 prettier 的冲突
       "prettier/@typescript-eslint", 
       // 使得@typescript-eslint中的样式规范失效，遵循prettier中的样式规范
       "plugin:prettier/recommended"  
       // 使用prettier中的样式规范，且如果使得ESLint会检测prettier的格式问题，同样将格式问题以error的形式抛出
    ],
    "parserOptions": {
        "ecmaVersion": 10,  // 使用ECMS语法规范版本 
        "sourceType": "module",  // 模块化
        "ecmaFeatures": {  // 使用额外的语言特性
            "jsx": true
        }
      },
   "settings": {             //自动发现React的版本，从而进行规范react代码
        "react": {
            "pragma": "React",
            "version": "detect"
        },
        "import/resolver": {
            "node": {    // 识别node模块导出
                "extensions": [".js",".jsx",".ts",".tsx",".d.ts"],
                "moduleDirectory": ["node_modules","src/"]
            },
            "typescript": {  // 使用指定路径 tsconfig.json
                "directory": "./tsconfig.json"
            }
        },
        "import/parsers": {  // 解析ts 与 tsx文件
            "@typescript-eslint/parser": [".ts",".tsx"]
        }
    },
    "parser": "@typescript-eslint/parser", // bebal-eslint 语法解析  @typescript-eslint/parser ts解析
    "env": {
        "es6": true,
        "browser": true,
        "node": true
    },
    "plugins": ["react", "jsx-a11y", "import","@typescript-eslint","react-hooks"], // 使用插件
    // eslint中文规则文档：https://cn.eslint.org/docs/rules/
    "rules": { 
        "eqeqeq": 1,   // 强制使用强等于判断
        "import/no-named-as-default": 0,  // 关闭名字导出规则
        "react/jsx-filename-extension": [ // 允许什么类型文件使用jsx语法
            "error",
            {
                "extensions": [".js", ".jsx", ".ts", ".tsx"]
            }
        ]
        ... // 其他个人配置就不写了，自己去看文档
    }
}

prettier文件配置

// 配置文档： https://segmentfault.com/a/1190000012909159
{
    "printWidth":120,   // 一行代码最多多少字符宽度
    "tabWidth": 4,      // tab缩进
    "useTabs": true,    // 使用tab缩进
    "semi": false,       // 句尾添加分号
    "singleQuote": true,  // 使用单引号
    "jsxSingleQuote": true,  // 在jsx中使用单引号
    "trailingComma": "none",  // 数组尾逗号
    "bracketSpacing": false,  // 括号首位空格
    "jsxBracketSameLine": true,  // 不使闭合标签单独一行
    "arrowParens": "avoid"  // 箭头函数参数可以不使用括号包裹
}

package文件配置

  "husky": {
    "hooks": {   // 使用commit提交时调用的钩子
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{jsx,tsx,ts,js,json}": [ //文件匹配
      "prettier --write",  // perttier 格式化
      "eslint --fix",   // eslit 修复
      "git add -A"  // 执行add
    ]
  },