Vue3+ESLint9.0版本+Prettier 配置：解决格式化冲突与代码规范问题

原创已于 2025-05-11 18:32:19 修改 · 549 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2025-05-11 18:27:12 首次发布

项目场景：

vue3+eslint9.0+prettier配置

解决方案：

核心配置文件：eslint.config.jseslint.config.js文件

import { defineConfig, globalIgnores } from 'eslint/config'
import globals from 'globals'
import js from '@eslint/js'
import pluginVue from 'eslint-plugin-vue'
import pluginPrettier from 'eslint-plugin-prettier'
// import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'

export default defineConfig([
  {
    name: 'app/files-to-lint',
    files: ['**/*.{js,mjs,jsx,vue}']
  },

  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),

  {
    languageOptions: {
      globals: {
        ...globals.browser
      }
    }
  },

  js.configs.recommended,
  ...pluginVue.configs['flat/essential'],

  // 添加 Prettier 插件和规则
  {
    plugins: { prettier: pluginPrettier },
    rules: {
      // 应用你的 Prettier 配置
      'prettier/prettier': [
        'warn',
        {
          singleQuote: true,
          semi: false,
          printWidth: 80,
          trailingComma: 'none',
          endOfLine: 'auto'
        },
        {
          // 确保 ESLint 不会检查 Prettier 已经处理的格式问题
          usePrettierrc: false,
          // 添加这一行来跳过格式化冲突检查
          skipFormatting: true // 注意：这里应该是布尔值，而不是数组
        }
      ],

      // 自定义 Vue 规则 规范
      'vue/multi-word-component-names': [
        'warn',
        {
          ignores: ['index']
        }
      ],
      'vue/no-setup-props-destructure': 'off',
      'no-undef': 'error'
    }
  }

  // 添加自定义 Vue 规则
  //  ...skipFormatting,
])

VSCode 编辑器配置：setting.json

 "editor.codeActionsOnSave": {
    "source.fixAll": "always",
    "source.fixAll.eslint": "always", 
  },
  "editor.formatOnSave": false,

关键依赖安装：pnpm add --save-dev eslint-plugin-prettier

验证配置效果：pnpm exec eslint src --ext .js,.vue