从零构建React项目（三）: 项目代码规范检查

1 使用eslint规范TypeScript代码

1.1 安装依赖

yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

• eslint：eslint核心代码
• @typescript-eslint/parser：eslint的解析器，用于解析typescript，从而检查和规范Typescript代码
• @typescript-eslint/eslint-plugin：eslint插件，包含了各类定义好的检测Typescript代码的规范

1.2 eslint配置

在根目录下新建.eslintrc.js文件，包含eslint的基础配置

module.exports = {

    parser:  '@typescript-eslint/parser', //定义ESLint的解析器
    extends: ['plugin:@typescript-eslint/recommended'],//定义文件继承的子规范
    plugins: ['@typescript-eslint'],//定义了该eslint文件所依赖的插件
    env:{                          //指定代码的运行环境
        browser: true,
        node: true,
    }                               
}

• 在ts项目中必须执行解析器为@typescript-eslint/parser，才能正确的检测和规范TS代码
• env环境变量配置，形如console属性只有在browser环境下才会存在，如果没有设置支持browser,那么可能报console is undefined的错误。

2 eslint 规范React代码

module.exports = {
    parser:  '@typescript-eslint/parser',
    extends: [
    'plugin:react/recommended'  
    'plugin:@typescript-eslint/recommended'
    ],                              //使用推荐的React代码检测规范
    plugins: ['@typescript-eslint'],
    env:{                         
        browser: true,
        node: true,
    },
    settings: {             //自动发现React的版本，从而进行规范react代码
        "react": {
            "pragma": "React",
            "version": "detect"
        }
    }, 
    parserOptions: {        //指定ESLint可以解析JSX语法
        "ecmaVersion": 2019,
        "sourceType": 'module',
        "ecmaFeatures":{
            jsx:true
        }
    }
}

3 husky和lint-staged构建代码工作流

husky能够阻挡不符合规范代码的提交和推送，通过husky与lint-staged结合，可以在提交代码之前，先跑一下lint代码检查。如果存在error，则commit不成功。

• 安装依赖

yarn add husky lint-staged -D

• 创建husky配置文件husky.config.js

module.exports = {
  hooks: {
    'pre-commit': 'lint-staged', //call lint-staged in git pre-commit hooks(before every commit)
  }
};

文件中存在pre-commit 这都是git提供的hook。上面的配置中pre-commit代表在commit之前先调用lint-staged，如果lint-staged检查出错误，则这次commit就失败了。

• 创建lint-staged配置文件lint-staged.config.js

//lint-staged.config.js
module.exports = {
    "src/*.+(ts|tsx|js|jsx)": ["eslint --ext"]
};

配置文件设置了对src目录下的ts文件和js进行检查的task。