vue3+TS+eslint9配置

发布于:2025-06-07 ⋅ 阅读:(21) ⋅ 点赞:(0)

记录eslint升级到9.x的版本之后遇到的坑

  1. 在 ESLint 9 中,配置方式发生了变化。Flat Config 格式(eslint.config.js 或 .ts)不再支持 extensions 选项。所以vscode编辑器中的 extensions 需要注释掉,要不然保存的时候不会格式化。

在这里插入图片描述
2. eslint9 只支持eslint.config.js/eslint.config.ts的写法,使用vite默认生成的项目模板不能格式化

import globals from 'globals'
import pluginJs from '@eslint/js'
import tseslint from 'typescript-eslint'
import pluginVue from 'eslint-plugin-vue'
import pluginPrettierRecommendedConfigs from 'eslint-plugin-prettier/recommended'
import parserVue from 'vue-eslint-parser';
export default [
  // eslint 默认推荐规则
  pluginJs.configs.recommended,
  // ts 默认推荐规则
  ...tseslint.configs.recommended,
  // vue3 基础推荐规则
  ...pluginVue.configs['flat/recommended'],
  // prettier 默认推荐规则
  pluginPrettierRecommendedConfigs,
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.es2020,
        ...globals.node,
      },
      ecmaVersion: 2020,
      parser: parserVue,
      parserOptions: {
        parser: tseslint.parser,
      },
    },
    rules: {
      // 覆盖 TypeScript 严格规则,允许显式 any
      '@typescript-eslint/no-explicit-any': 'off',
      'vue/multi-word-component-names': 'off',
      'vue/require-default-prop': 'off',
      '@typescript-eslint/no-unused-vars': 'off',
    },
  },
]

  1. eslint依赖项
    在这里插入图片描述
  2. eslint 调试方式
    在这里插入图片描述
    查看报错信息依次处理

网站公告

今日签到

点亮在社区的每一天
去签到