项目eslint从0到1

发布时间:2022-09-03 09:30

eslint在项目里并不太陌生,通常在使用脚手架时,会默认让你安装执行的eslint,公司项目比较规范时,常常会配置组内统一的eslint规则,eslint帮助我们在开发阶段检查代码是否符合标准规范,统一了我们组内不同项目代码风格,也可以帮助我们养成良好的代码习惯,统一eslint对于项目的可维护性必不可少,今天我们一起学习一下如果改进你项目的规范。

正文开始...

首先我们还是用之前搭建vue的一个项目做从0到1开始配置eslint

安装eslint

npm i eslint --save-dev

然后我们执行初始化eslint命令

npm init @eslint/config

此时会让我们选择第三个,并且选择js modules, vue
项目eslint从0到1_第1张图片
项目eslint从0到1_第2张图片
项目eslint从0到1_第3张图片
当你默认选择后就会生成一个文件.eslintrc.js,由于我添加了ts所以默认也会添加@typescript-eslint,我们会发现package.json多了几个插件@typescript-eslint/eslint-plugin@typescript-eslint/parser,并且要安装npm i typescript --save-dev

eslint规则是自己默认选择的配置

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: ['eslint:recommended', 'plugin:vue/essential', 'plugin:@typescript-eslint/recommended'],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    indent: ['error', 'tab'],
    'linebreak-style': ['error', 'unix'],
    quotes: ['error', 'single'],
    semi: ['error', 'never']
  }
};

默认生成的规则就是以上

我们运行npx eslint ./src/index.js

执行该命令就会检测对于的文件是否符合eslint默认配置的规则

添加eslint规则

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: ['eslint:recommended', 'plugin:vue/essential', 'plugin:@typescript-eslint/recommended'],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    indent: ['error', 'tab'],
    'linebreak-style': ['error', 'unix'],
    quotes: ['error', 'single'],
    semi: ['error', 'always']
  }
};

主要由以下5个部分

  • env 支持的环境,根据.browserslistrc浏览器预设的环境预设对应的规则

    module.exports = {
    env: {
        browser: true,
        es2021: true,
        es6: true
    }
    }
  • extends 继承第三方的规则

    module.exports = {
    extends: ['eslint:recommended']
    }
  • parserOptions 指定解析器选项

    module.exports = {
      parserOptions: {
        ecmaVersion: 'latest',
        parser: '@typescript-eslint/parser',
        sourceType: 'module'
      }
    }
  • plugins 插件

    module.exports = {
    plugins: ['vue', '@typescript-eslint'],
    }
  • rules 具体对应规则的设置

    module.exports = {
    rules: {
        semi: 0 // 0 off,1 warn,2 error
    },
    }

    参考一段之前业务有用用到的统一eslint配置

    // eslint配置
    module.exports = {
      root: true,
      env: {
          node: true,
      },
      parserOptions: {
          parser: '@typescript-eslint/parser',
      },
      extends: [
          'plugin:vue/essential',
          'plugin:prettier/recommended',
          '@vue/airbnb',
          '@vue/typescript',
      ],
      rules: {
          'no-undef': 0, // 由于eslint无法识别.d.ts声明文件中定义的变量,暂时关闭
          'no-console': process.env.NODE_ENV === 'production' ? 2 : 0,
          'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
          indent: 0,
          'linebreak-style': 0,
          'no-trailing-spaces': 0,
          'class-methods-use-this': 0,
          'import/prefer-default-export': 0,
          'no-restricted-syntax': 0,
          'no-tabs': 0,
          'import/no-unresolved': 0,
          'no-underscore-dangle': 0,
          'comma-dangle': 'off',
          'max-len': 'off',
          camelcase: 'off',
          'object-curly-newline': 0,
          'operator-linebreak': 0,
          'guard-for-in': 0,
          'import/no-webpack-loader-syntax': 0,
          // 不安全项
          'no-param-reassign': 0,
          'no-dupe-class-members': 0,
          'no-unused-vars': 0, // ts里面有校验,可以把eslint 的校验关闭
          // 提示警告
          'no-return-await': 1,
          'import/no-cycle': 1,
          'no-nested-ternary': 1,
          'no-new-func': 1,
          'vue/no-side-effects-in-computed-properties': 1,
          'vue/no-multiple-template-root': 'off', // vue3 模板可以有多个根结点
          'vue/valid-template-root': 'off',
          'vue/no-v-for-template-key': 'off', // vue3  v-for 中template 可以设置key
          'vue/no-v-model-argument': 0,
          'vue/no-use-v-if-with-v-for': 0,
          'import/no-extraneous-dependencies': 1,
          'no-continue': 1,
          'operator-assignment': 1,
          'no-bitwise': 1,
          'prefer-destructuring': 2,
          'array-callback-return': 2,
          'func-names': 2,
          'no-plusplus': 2,
          'no-shadow': 2,
          'no-mixed-operators': 2,
          'no-fallthrough': 2,
          'default-case': 2,
          'no-useless-constructor': 2,
          'no-unused-expressions': ["error", { "allowShortCircuit": true }],
          // 关闭iview input组件,col组件个别标签报错
          'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }],
          // 保证js、ts项目arrow风格一致
          'arrow-parens': [2, 'always', { requireForBlockBody: false }],
          'implicit-arrow-linebreak': [0, 'beside'],
          // ts 任意枚举报错问题
          'no-shadow': 'off',
          '@typescript-eslint/no-shadow': ['error'],
      },
      overrides: [
          {
              files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
              env: {
                  jest: true,
              },
          },
      ],
    };
    

    选择Airbnb风格

    在自定义自己的rules,也可以执行npm init @eslint/config配置社区比较流行的自定义风格,使用Airbnb

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号