一. 安装
- 快捷命令
npm init @eslint/config
- 手动安装
npm install eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-config-prettier
二. 配置文件
- 创建配置文件
.eslintrc.config.js
- 配置内容
import vuePlugin from 'eslint-plugin-vue';
import typescriptEslint from '@typescript-eslint/eslint-plugin';
import eslintPluginPrettier from 'eslint-plugin-prettier';
import prettierConfig from 'eslint-config-prettier';
export default [
{
// 全局配置
languageOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
},
linterOptions: {
reportUnusedDisableDirectives: true,
},
},
{
// TypeScript 文件配置
files: ['*.ts', '*.tsx'],
parser: '@typescript-eslint/parser',
rules: {
...typescriptEslint.configs.recommended.rules,
},
},
{
// Vue 文件配置
files: ['*.vue'],
parser: 'vue-eslint-parser',
rules: {
...vuePlugin.configs['vue3-essential'].rules,
},
},
{
// 自定义规则
rules: {
quotes: ['error', 'single'], // 强制使用单引号
indent: ['error', 4, { SwitchCase: 1 }], // 强制使用4个空格作为缩进
semi: ['error', 'always'], // 强制使用分号
'no-console': 'warn', // 警告禁止使用 console
'vue/html-indent': ['error', 4], // Vue 文件中强制使用4个空格作为缩进
'@typescript-eslint/no-unused-vars': ['error'], // 禁止 TypeScript 中未使用的变量
'prettier/prettier': [
'error',
{
singleQuote: true,
tabWidth: 4,
useTabs: true,
semi: true,
trailingComma: 'es5',
printWidth: 80,
},
],
},
},
prettierConfig,
eslintPluginPrettier.configs.recommended,
];
- 创建
三. 说明
globals
: 从globals
模块引入全局变量配置。pluginVue.configs['vue3-essential']
: 使用eslint-plugin-vue
插件的 Vue 3 必要配置。typescriptEslint.configs['recommended']
: 使用@typescript-eslint
插件的推荐配置。prettier
: 使用eslint-config-prettier
插件的配置,确保它在最后加载,以覆盖其他格式化规则。rules
: 自定义 ESLint 规则,包括强制使用单引号、4个空格作为缩进、强制使用分号、警告禁止使用 console 以及 Prettier 的配置。