eslint+prettier简单配置过程

依赖说明

"devDependencies": {
    "@babel/eslint-parser": "^7.26.8",
    "@eslint/js": "^9.20.0",
    "eslint": "^9.20.1",
    "eslint-config-prettier": "^10.0.1",
    "eslint-plugin-import": "^2.31.0",
    "eslint-plugin-vue": "^9.32.0",
    "globals": "^15.15.0",
    "prettier": "^3.5.1",
    "vue-eslint-parser": "^9.4.3"
  }

配置文件处理

import js from '@eslint/js';
import globals from 'globals';

import eslintPluginVue from 'eslint-plugin-vue';
import importPlugin from 'eslint-plugin-import';
import vueRecommended from 'eslint-plugin-vue/lib/configs/vue3-recommended.js';
import prettierConfig from 'eslint-config-prettier';

import vueEslintParser from 'vue-eslint-parser';
import babelEslintParser from '@babel/eslint-parser';

// --- Clean configurations ---
const cleanVueRecommended = { ...vueRecommended, plugins: { vue: eslintPluginVue } };
// 移除 extends 以符合 flat config 要求
delete cleanVueRecommended.extends;

const cleanPrettierConfig = { ...prettierConfig };
delete cleanPrettierConfig.extends;

// --- Export ESLint configuration ---
export default [
  // 忽略 *** 下的所有文件
  // { ignores: ['***/**'] },

  // 为 .vue 文件设置解析器和解析选项
  {
    files: ['**/*.vue'],
    languageOptions: {
      parser: vueEslintParser,
      parserOptions: {
        parser: babelEslintParser,
        ecmaVersion: 'latest',
        sourceType: 'module',
        requireConfigFile: false, // 无需 Babel 配置文件
      },
    },
  },

  // 全局插件注册
  {
    plugins: {
      vue: eslintPluginVue,
      import: importPlugin,
    },
  },

  // 引用清洗过的 Vue3 推荐配置
  cleanVueRecommended,

  // 引用清洗过的 Prettier 配置
  cleanPrettierConfig,

  // 针对 src 目录下的文件的额外规则和选项
  {
    ignores: ['**/node_modules/**', '**/dist/**', '**/build/**'],
    files: ['**/src/**/*.{js,mjs,cjs,jsx,ts,tsx,vue}'],
    languageOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
      globals: {
        ...globals.browser,
        ...globals.es2021,
        ...globals.node,
      },
    },
    rules: {
      ...js.configs.recommended.rules,
      'vue/multi-word-component-names': 'off',
      'import/no-unresolved': 'error',
      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
      'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    },
  },
];

编辑器配置推荐（VsCode）

• .vscode

  {
    "recommendations": [
      "vue.volar",
    ]
  }
  

  {
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "always"
  },
  "eslint.validate": [
      "javascript",
      "javascriptreact",
      "typescript",
      "typescriptreact",
      "vue"
    ],
    "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[vue]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode",
      "editor.formatOnSave": true
    }
  }