Reac项目中常用的Eslint校验规则

常用的Eslint校验规则

---

什么是EsLint

Eslint简单来说就是编码规范,能够对js、ts、jsx等进行规范性校验，类似的还有：jslint,tslint…(tslint已停止维护)

在项目中使用Eslint

1、在项目中添加eslint：
    
    npm install eslint --save-dev

2、在项目中添加eslint的配置文件(运行后，有一些配置项需自己选择，可根据需要自行选择，执行完成后，会在项目根目录生成eslintrc.js)

    npx eslint --init

3、修改eslint的校验规则（eslintrc.js，此处贴出在react+typescript项目中的配置文件）

    module.exports = {
      env: {
        browser: true,
        es6: true
      },
      settings: {
        'import/resolver': {
          node: {
            extensions: ['.js', '.jsx', '.ts', '.tsx'],
            paths: ['src']
          }
        }
      },
      extends: [
        'plugin:react/recommended',
        'airbnb'
      ],
      globals: {
        Atomics: 'readonly',
        SharedArrayBuffer: 'readonly'
      },
      parser: '@typescript-eslint/parser',
      parserOptions: {
        ecmaFeatures: {
          jsx: true
        },
        ecmaVersion: 2018,
        sourceType: 'module'
      },
      plugins: [
        'react',
        '@typescript-eslint'
      ],
      rules: {
        quotes: [2, 'single'], // 单引号
        'jsx-quotes': [2, 'prefer-double'], // jsx语法中使用双引号
        indent: [2, 2], // 控制缩