ts文件支持
- 安装依赖包
@typescript-eslint/parser
,eslint不支持ts文件的解析,需要安装ts解析器来解析:parserOptions: { parser: '@typescript-eslint/parser' }
- 安装依赖包
@typescript-eslint/eslint-plugin
,使用extends继承插件规则:extends: [ 'plugin:@typescript-eslint/recommended' ]
- 设置插件只对ts文件生效,不要影响js文件:
overrides: [ // 不推荐 { files: ['*.ts'], // 这样会影响vue里的ts文件格式校验,建议用ignorePatterns parser: '@typescript-eslint/parser', extends: ['plugin:@typescript-eslint/recommended'] } ], ignorePatterns: ['**/*.js', '/**/*.d.ts'] // 推荐
.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来格式化代码
- 安装依赖包:
npm i eslint-plugin-prettier -D
- 配置插件:
extends: ['plugin:prettier/recommended']
- 配置并开启prettier格式错误检查:
extends: [
'plugin:vue/vue3-recommended',
'prettier',
'plugin:prettier/recommended'
],
rules: {
'prettier/prettier': 'off' // 不建议开启,会出现末尾换行报错,将行结尾符CRLF换成LF即可,还有settings里也要把prettier.endOfLine改成LF
}