|
1 | | -// 引入vue模版的eslint |
2 | | -// vue文件解析器 |
3 | | -import vueParser from 'vue-eslint-parser'; |
4 | | - |
5 | 1 | import eslint from '@eslint/js'; |
6 | | -import prettier from 'eslint-plugin-prettier'; |
7 | | -import pluginVue from 'eslint-plugin-vue'; |
8 | | -// ts-eslint解析器，使 eslint 可以解析 ts 语法 |
9 | 2 | import tseslint from 'typescript-eslint'; |
| 3 | +import pluginVue from 'eslint-plugin-vue'; |
10 | 4 |
|
11 | | -export default tseslint.config({ |
12 | | - ignores: ['node_modules', 'dist', 'dist*'], |
13 | | - files: ['**/**/*.ts', '**/**/*.tsx', '**/**/*.vue'], |
14 | | - // tseslint.config添加了extends扁平函数，直接用。否则是eslint9.0版本是没有extends的 |
15 | | - extends: [ |
16 | | - eslint.configs.recommended, |
17 | | - ...tseslint.configs.recommended, |
18 | | - ...pluginVue.configs['flat/essential'], |
19 | | - ], |
20 | | - plugins: { |
21 | | - prettier, |
22 | | - }, |
23 | | - languageOptions: { |
24 | | - parser: vueParser, // 使用vue解析器，这个可以识别vue文件 |
25 | | - parserOptions: { |
26 | | - parser: tseslint.parser, // 在vue文件上使用ts解析器 |
27 | | - sourceType: 'module', |
28 | | - ecmaVersion: 2020, |
29 | | - ecmaFeatures: { |
30 | | - jsx: true, |
| 5 | +export default tseslint.config( |
| 6 | + { ignores: ['**/node_modules', '**/dist', '**/*.js'] }, // 忽略 node_modules 和 dist 目录 |
| 7 | + eslint.configs.recommended, // 使用 ESLint 的推荐配置 |
| 8 | + tseslint.configs.base, // 使用 TypeScript ESLint 的基础配置 |
| 9 | + ...pluginVue.configs['flat/recommended'], // 使用 Vue ESLint 的推荐配置 |
| 10 | + { |
| 11 | + files: ['**/*.vue'], // 针对所有 .vue 文件 |
| 12 | + languageOptions: { |
| 13 | + parserOptions: { |
| 14 | + parser: '@typescript-eslint/parser', // 使用 TypeScript ESLint 解析器 |
31 | 15 | }, |
32 | 16 | }, |
33 | 17 | }, |
34 | | - rules: { |
35 | | - // Prettier 错误提示 |
36 | | - 'prettier/prettier': 'error', |
37 | | - // 允许使用转义字符 |
38 | | - 'no-useless-escape': 0, |
39 | | - // 允许未定义的变量（通常用于全局变量） |
40 | | - 'no-undef': 0, |
41 | | - // 允许在 setup 中解构 props |
42 | | - 'vue/no-setup-props-destructure': 0, |
43 | | - // setup 中的变量检查 |
44 | | - 'vue/script-setup-uses-vars': 1, |
45 | | - // 允许使用保留的组件名 |
46 | | - 'vue/no-reserved-component-names': 0, |
47 | | - // TypeScript 相关规则 |
48 | | - '@typescript-eslint/ban-ts-ignore': 0, |
49 | | - '@typescript-eslint/explicit-function-return-type': 0, |
50 | | - '@typescript-eslint/no-explicit-any': 0, |
51 | | - '@typescript-eslint/no-var-requires': 0, |
52 | | - '@typescript-eslint/no-empty-function': 0, |
53 | | - // Vue 自定义事件名称规则 |
54 | | - 'vue/custom-event-name-casing': 0, |
55 | | - // 允许在定义前使用变量 |
56 | | - 'no-use-before-define': 0, |
57 | | - '@typescript-eslint/no-use-before-define': 0, |
58 | | - // TypeScript 注释相关规则 |
59 | | - '@typescript-eslint/ban-ts-comment': 0, |
60 | | - '@typescript-eslint/ban-types': 0, |
61 | | - '@typescript-eslint/no-non-null-assertion': 0, |
62 | | - '@typescript-eslint/explicit-module-boundary-types': 0, |
63 | | - // 未使用变量的规则 |
64 | | - '@typescript-eslint/no-unused-vars': 0, |
65 | | - 'no-unused-vars': 0, |
66 | | - // 函数括号前的空格规则 |
67 | | - 'space-before-function-paren': 0, |
68 | | - |
69 | | - // Vue 模板相关规则 |
70 | | - 'vue/attributes-order': 0, |
71 | | - 'vue/one-component-per-file': 0, |
72 | | - 'vue/html-closing-bracket-newline': 0, |
73 | | - 'vue/max-attributes-per-line': 0, |
74 | | - 'vue/multiline-html-element-content-newline': 0, |
75 | | - 'vue/singleline-html-element-content-newline': 0, |
76 | | - 'vue/attribute-hyphenation': 0, |
77 | | - 'vue/require-default-prop': 0, |
78 | | - 'vue/require-explicit-emits': 0, |
79 | | - // HTML 标签自闭合规则 |
80 | | - 'vue/html-self-closing': [ |
81 | | - 1, |
82 | | - { |
83 | | - html: { |
84 | | - void: 'always', // 空元素总是自闭合 |
85 | | - normal: 'never', // 普通元素不自闭合 |
86 | | - component: 'always', // 组件总是自闭合 |
| 18 | + { |
| 19 | + rules: { |
| 20 | + 'no-debugger': 'error', // 禁止使用 debugger 语句 |
| 21 | + // 'no-console': ['error', { allow: ['warn', 'error', 'info', 'clear'] }], // 禁止使用 console 语句，但允许 warn, error, info 和 clear |
| 22 | + 'prefer-const': 'error', // 强制使用 const 而不是 let |
| 23 | + 'sort-imports': ['error', { ignoreDeclarationSort: true }], // 强制排序导入语句，但忽略声明排序 |
| 24 | + 'no-duplicate-imports': 'error', // 禁止重复导入 |
| 25 | + // 该规则强制使用 '@ts-expect-error' 注释在 TypeScript 代码中指示故意的类型错误，提高代码的清晰度和可维护性。 |
| 26 | + '@typescript-eslint/prefer-ts-expect-error': 'error', // 强制使用 @ts-expect-error 而不是 @ts-ignore |
| 27 | + // 强制使用 'import type' 进行类型导入 |
| 28 | + '@typescript-eslint/consistent-type-imports': [ |
| 29 | + 'error', |
| 30 | + { |
| 31 | + fixStyle: 'inline-type-imports', // 使用内联类型导入样式 |
| 32 | + disallowTypeAnnotations: false, // 允许类型注解 |
87 | 33 | }, |
88 | | - svg: 'always', |
89 | | - math: 'always', |
90 | | - }, |
91 | | - ], |
92 | | - // 允许单个单词的组件名 |
93 | | - 'vue/multi-word-component-names': 0, |
94 | | - // 允许使用 v-html |
95 | | - 'vue/no-v-html': 0, |
96 | | - // transition 组件内的 toggle 规则 |
97 | | - 'vue/require-toggle-inside-transition': 0, |
98 | | - // 允许使用空对象类型 {} |
99 | | - '@typescript-eslint/no-empty-object-type': 0, |
| 34 | + ], |
| 35 | + // 强制在导入仅包含内联类型限定符的规范时使用顶级导入类型限定符 |
| 36 | + '@typescript-eslint/no-import-type-side-effects': 'error', // 禁止导入类型时产生副作用 |
| 37 | + 'vue/max-attributes-per-line': 'off', // 关闭每行最多属性数的限制 |
| 38 | + 'vue/singleline-html-element-content-newline': 'off', // 关闭单行 HTML 元素内容换行的限制 |
| 39 | + 'vue/multi-word-component-names': 'off', // 关闭多单词组件名称的限制 |
| 40 | + 'vue/html-self-closing': [ |
| 41 | + 'error', |
| 42 | + { |
| 43 | + html: { component: 'always', normal: 'always', void: 'any' }, // 强制 HTML 组件和普通元素始终自闭合，void 元素可以自闭合或不自闭合 |
| 44 | + math: 'always', // 强制 math 元素始终自闭合 |
| 45 | + svg: 'always', // 强制 svg 元素始终自闭合 |
| 46 | + }, |
| 47 | + ], |
| 48 | + }, |
100 | 49 | }, |
101 | | -}); |
| 50 | +); |
0 commit comments