eslint - prettier集成

eslint - prettier集成

依赖安装

# 基础配置
npm i eslint prettier eslint-config-prettier eslint-plugin-prettier babel-eslint  -D 

# typescript校验
npm i  typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

# vue文件校验
npm i  eslint-plugin-vue -D

# cypress测试文件校验
npm i  eslint-plugin-cypress -D 

eslint

官方文档

eslint的所有配置都放在根目录下面的eslint文件夹里面, 通过vscode的eslint插去配置

vscode 的eslint插件

详细配置 VSCode常用插件之ESLint使用

需要添加以下配置到文件 .vscode/setting.json里面

{
  // eslint   -----settings begin-----
  
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,// 自动调用eslint的 --fix，在.elsint.js中配置好prettier规则
  },
  "eslint.options": {
      "configFile": "eslint/.eslintrc.js" ,
      "ignorePath":"eslint/.eslintignore",
  },
  "eslint.nodePath": "eslint/node_modules",
  "eslint.probe":[ // 应激活ESLint扩展名并尝试验证文件的语言标识符数组
      "javascript",
      "javascriptreact",
      "typescript",
      "typescriptreact",
      // "html",
      "vue",
      // "markdown"
  ],
  "eslint.run":"onSave",// 保存之后进行lint
  "eslint.debug": true, // 是否启用eslint的调试模式
  // eslint   -----settings end-----

}

.eslintrc.js文件配置

module.exports = {
  // root: true,
  // parser: '@typescript-eslint/parser',
  // 定义了一组预定义的全局变量。可用的环境包
  env: {
    browser: true,
    node: true,
  },

  // 使用 globals 指出你要使用的全局变量。将变量设置为 true 将允许变量被重写，或 false 将不允许被重写。
  globals: {
    // res: true,
    // context: true,
  },
  // 基础的配置规则 按顺序覆盖
  extends: ['eslint:recommended'], // eslint: recommended eslint自带的预设规则

  parserOptions: {
    // 默认设置为3， 5（ 默认）， 你可以使用 6、 7、 8 或 9 来指定你想要使用的 ECMAScript 版本。
    // 你也可以用使用年份命名的版本号指定为 2015（ 同 6）， 2016（ 同 7）， 或 2017（ 同 8） 或 2018（ 同 9）
    ecmaVersion: 2020,
    // "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)
    sourceType: 'module',
    // 想使用的额外的语言特性
    ecmaFeatures: {
      globalReturn: false, // 允许在全局作用域下使用 return 语句
      impliedStrict: true, // - 启用全局 strict mode (如果 ecmaVersion 是 5 或更高)
      jsx: true, //- 启用 JSX
    },
  },
  // 插件可以提供新的规则，以覆盖eslint的默认行为，配置之后就可以在rules里使用自定义规则

  rules: {
    'prefer-const': 1, // 检查能使用const的地方就使用const
    'no-prototype-builtins': 1, // 如果要使用原型链上的方法，使用Object.prototype.hasOwnProperty，禁止使用实例化对象调用obj.hasOwnProperty
    'no-useless-escape': 1, // 检查不必要的转义字符，有些符号并不需要使用转义字符
    'no-debugger': 1, // debugger报警告
    'no-unused-vars': 1,
    'prettier/prettier': [
      'error',
      {
        semi: false, // 是否句末加分号
        trailingComma: 'all', //尾随逗号
        singleQuote: true, // 是否用单引号
        printWidth: 80, // 换行长度，默认80
        tabWidth: 2,
        endOfLine: 'auto',
        bracketSpacing: true, //括号间距
        jsxSingleQuote: true, //在JSX中使用单引号而不是双引号。
        jsxBracketSameLine: true,
      },
    ],
  },
  overrides: [
    // ts文件
    {
      files: ['*.ts', '*.tsx'],
      parser: '@typescript-eslint/parser', // @typescript-eslint/parser
      extends: [
        'plugin:@typescript-eslint/recommended', //ts的推荐规则
        'plugin:prettier/recommended',
      ],
      // plugins: ['@typescript-eslint'],
      rules: {
        '@typescript-eslint/no-inferrable-types': 1,
        '@typescript-eslint/ban-ts-comment': 1, // 禁止使用ts的ignore注释
        // '@typescript-eslint/no-unused-vars': 1,
        '@typescript-eslint/no-empty-function': 0,
        '@typescript-eslint/no-var-requires': 0, // 允许使用require语法
        '@typescript-eslint/no-explicit-any': 0, // 允许使用any
        '@typescript-eslint/explicit-module-boundary-types': 0, // 允许函数不指定返回值type
        '@typescript-eslint/no-this-alias': 0,
        '@typescript-eslint/ban-types': [
          'warn',
          {
            types: {
              Function: false,
              '{}': {
                message: 'Use object instead',
                fixWith: 'object',
              },
            },
          },
        ], // 类型使用错误
      },
    },
    // 测试文件
    {
      files: ['*.spec.js'],
      env: {
        mocha: true,
        'cypress/globals': true,
      },
      parser: 'babel-eslint',
      extends: ['plugin:cypress/recommended'],
      rules: {
        strict: 'off',
      },
    },
    // js文件
    {
      files: ['*.js', '*.jsx', '.*.json'],
      parser: 'babel-eslint',
      extends: ['plugin:prettier/recommended'],
    },
    // vue文件
    {
      files: ['*.vue'],
      extends: [
        'plugin:vue/vue3-essential', // eslint-plugin-vue 配置.vue 文件的校验  https://eslint.vuejs.org/
        // '@vue/typescript/recommended', //  来源于/@vue/eslint-config-typescript, 用于让.vue文件支持ts语法, 包扩注释语法
      ],
      rules: {
        'vue/max-attributes-per-line': 0,
        // "vue/no-custom-modifiers-on-v-model": 0,
        // "vue/no-unused-vars": "error",
        // "vue/html-quotes": ["error", "single", { avoidEscape: false }],
      },
    },
  ],
}

prettier

prettier配置