eslint+prettier统一管理前端代码规范-进阶篇

ts文件支持

1. 安装依赖包@typescript-eslint/parser，eslint不支持ts文件的解析，需要安装ts解析器来解析：

   parserOptions: {
      parser: '@typescript-eslint/parser'
   }
   

2. 安装依赖包@typescript-eslint/eslint-plugin，使用extends继承插件规则：

   extends: [
   	'plugin:@typescript-eslint/recommended'
   ]
   

3. 设置插件只对ts文件生效，不要影响js文件：

   overrides: [ // 不推荐
       {
         files: ['*.ts'],  // 这样会影响vue里的ts文件格式校验，建议用ignorePatterns
         parser: '@typescript-eslint/parser',
         extends: ['plugin:@typescript-eslint/recommended']
       }
   ],
   ignorePatterns: ['**/*.js', '/**/*.d.ts'] // 推荐
   

4. .eslintignore：有时会不生效

   // .eslintignore
   /**/*.d.ts
   /**/*.js
   

   改成在.eslintrc.js配置文件里添加ignorePatterns: ['**/*.js', '/**/*.d.ts']

冲突处理

安装依赖eslint-config-prettier：作用是关闭eslint中与prettier相互冲突的规则，例如eslint-plugin-vue里面的属性换行问题。

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    es2020: true, // 会自动开启 "parserOptions": { "ecmaVersion": 11 }
    node: true // 启用node环境
  },
  extends: [
    'plugin:vue/vue3-recommended', // 继承插件eslint-plugin-vue导出的配置
    'plugin:@typescript-eslint/recommended',
    'prettier'
  ],
  parserOptions: {
    parser: '@typescripteslint/parser',
    sourceType: 'module'
  },
  rules: {
    'vue/multi-word-component-names': [
      'error',
      {
        ignores: ['index']
      }
    ]
  }
};

补充：使用prettier来格式化代码

1. 安装依赖包：npm i eslint-plugin-prettier -D
2. 配置插件：extends: ['plugin:prettier/recommended']
3. 配置并开启prettier格式错误检查：

extends: [
    'plugin:vue/vue3-recommended',
    'prettier',
    'plugin:prettier/recommended'
],
rules: {
    'prettier/prettier': 'off' // 不建议开启，会出现末尾换行报错，将行结尾符CRLF换成LF即可，还有settings里也要把prettier.endOfLine改成LF
}