vue3项目eslint@9.20.1 对应的eslint.config.js示例

// eslint.config.js
import eslint from '@eslint/js';
import tsParser from '@typescript-eslint/parser';
import vueParser from 'vue-eslint-parser';
import stylistic from '@stylistic/eslint-plugin';
import vuePlugin from 'eslint-plugin-vue';
import tsPlugin from '@typescript-eslint/eslint-plugin';

import globals from 'globals';
import importPlugin from 'eslint-plugin-import';
import eslintPluginPrettier from 'eslint-plugin-prettier';

export default [
  // 基础 ESLint 规则
  eslint.configs.recommended,

  // Vue3 规则
  {
    files: ['**/*.vue'],
    languageOptions: {
      parser: vueParser,
      parserOptions: {
        parser: {
          ts: tsParser, // 解析 Vue 文件中的 TypeScript
          js: 'espree',
        },
        extraFileExtensions: ['.vue'],
        ecmaVersion: 'latest',
        sourceType: 'module',
      },
    },
    plugins: {
      vue: vuePlugin,
      '@stylistic': stylistic,
    },
    rules: {
      ...vuePlugin.configs['vue3-recommended'].rules,
      // 自定义 Vue 规则
      'vue/no-v-html': 'off',
      'vue/require-default-prop': 'off',
      'vue/require-explicit-emits': 'off',
      'vue/multi-word-component-names': 'off',
      'vue/html-self-closing': ['error', { html: { void: 'always' } }],
    },
  },

  // TypeScript 规则
  {
    files: ['**/*.ts', '**/*.tsx'],
    languageOptions: {
      parser: tsParser,
    },
    plugins: {
      '@typescript-eslint': tsPlugin,
    },
    rules: {
      ...tsPlugin.configs.recommended.rules,
      '@typescript-eslint/no-unused-vars': 'warn',
      '@typescript-eslint/no-redeclare': 'error',
      '@typescript-eslint/ban-ts-comment': 'off',
      '@typescript-eslint/ban-types': 'off',
      '@typescript-eslint/explicit-module-boundary-types': 'off',
      '@typescript-eslint/no-empty-function': 'off',
      '@typescript-eslint/no-explicit-any': 'off',
      '@typescript-eslint/no-non-null-assertion': 'off',
      '@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
      // '@typescript-eslint/consistent-type-imports': ['error', { disallowTypeAnnotations: false }],
      '@typescript-eslint/no-var-requires': 'off',
      '@typescript-eslint/no-this-alias': 'off',
    },
  },

  // 通用 JavaScript/TypeScript 规则
  {
    files: ['**/*.js', '**/*.ts', '**/*.vue'],
    plugins: {
      '@stylistic': stylistic,
      import: importPlugin,
      prettier: eslintPluginPrettier,

    },
    rules: {

      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
      'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
      // 'no-console': ['warn', { allow: ['error'] }],
      'no-restricted-syntax': ['error', 'LabeledStatement', 'WithStatement'],
      camelcase: ['error', { properties: 'never' }],

      'no-undef': 'off',
      'no-var': 'error',
      'no-empty': ['error', { allowEmptyCatch: true }],
      'no-void': 'error',
      'prefer-const': ['warn', { destructuring: 'all', ignoreReadBeforeAssign: true }],
      'prefer-template': 'error',
      'object-shorthand': ['error', 'always', { ignoreConstructors: false, avoidQuotes: true }],
      'block-scoped-var': 'error',

      'no-constant-condition': ['error', { checkLoops: false }],


      // 代码风格规则
      // '@stylistic/indent': ['error', 2],
      '@stylistic/quotes': ['error', 'single'],
      // '@stylistic/semi': ['error', 'never'],
      '@stylistic/comma-dangle': ['error', 'always-multiline'],
      
      // import
      'import/first': 'error',
      'import/no-duplicates': 'error',
      'import/order': [
        'error',
        {
          groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index', 'object', 'type'],

          pathGroups: [
            {
              pattern: 'vue',
              group: 'external',
              position: 'before',
            },
            {
              pattern: '@vue/**',
              group: 'external',
              position: 'before',
            },
            {
              pattern: 'ant-design-vue',
              group: 'internal',
            },
          ],
          pathGroupsExcludedImportTypes: ['type'],
        },
      ],
      'import/no-unresolved': [
        'error',
        {
          ignore: ['^@/'], // 忽略以'@/'开头的模块路径
        },
      ],

      // prettier
      'prettier/prettier': 'error',

    },
  },

  // 全局环境配置
  {
    languageOptions: {
      globals: {
        process: 'readable',
        __dirname: 'readable',
        require: 'readable',
        module: 'readable',
        ...globals.browser,
        ...globals.es2021,
        ...globals.node,
      },
      ecmaVersion: 'latest',
    },
    ignores: [
      '*.sh',
      'node_modules',
      '*.md',
      '*.woff',
      '*.ttf',
      '.vscode',
      '.idea',
      '/public',
      '/docs',
      '.husky',
      '.local',
      '/bin',
      '/src/mock',
      'Dockerfile',
      'commitlint.config.js',
      '‌**/dist/**‌',
      '‌**/dist-ssr/**‌',
      '‌**/coverage/**‌'
    ],
  },
];
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。