前端项目vue3项目集成eslint@9.x跟prettier

tips: 这些涉及编辑器的修改不一定能及时生效，如果没有生效，可以试试重启编辑器窗口

编辑器集成

我的编辑器是vscode，需要安装这两个编辑器插件

eslint
prettier

我这个配置主要是通过eslint提供的配置cli命令生成，在里面加入了对prettier的支持。
eslint官方提供的命令，根据他的提供的选项一项一项选就可以了，我这里是生成的ts + vue的项目

npm init @eslint/config@latest

生成的最初代码

import js from "@eslint/js";
import globals from "globals";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";
import { defineConfig } from "eslint/config";


export default defineConfig([
  { files: ["**/*.{js,mjs,cjs,ts,mts,cts,vue}"], plugins: { js }, extends: ["js/recommended"] },
  { files: ["**/*.{js,mjs,cjs,ts,mts,cts,vue}"], languageOptions: { globals: globals.browser } },
  tseslint.configs.recommended,
  pluginVue.configs["flat/essential"],
  { files: ["**/*.vue"], languageOptions: { parserOptions: { parser: tseslint.parser } } },
]);

我安装的项目中的插件

eslint-config-prettier (关闭 ESLint 中所有与 Prettier 冲突的​​格式化规则​​（如缩进、引号、分号等），避免重复检查和修复冲突)
eslint-plugin-prettier （将 Prettier 的格式化规则​​作为 ESLint 规则运行​​，使 Prettier 的格式问题通过 ESLint 报错，并支持 eslint --fix 自动修复）

.prettierc.json (prettier的格式化配置规则，放在项目根目录中)

{
  "printWidth": 150,
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "bracketSameLine": true,
  "arrowParens": "always",
  "endOfLine": "auto"
}

最终完整代码

import js from '@eslint/js'
import globals from 'globals'
import tseslint from 'typescript-eslint'
import pluginVue from 'eslint-plugin-vue'
import { defineConfig } from 'eslint/config'
import EslintConfigPrettier from 'eslint-config-prettier'
import pluginPrettierRecommended from 'eslint-plugin-prettier/recommended'

export default defineConfig([
  { files: ['**/*.{js,mjs,cjs,ts,mts,cts,vue}'], plugins: { js }, extends: ['js/recommended', pluginPrettierRecommended] },
  {
    files: ['**/*.{js,mjs,cjs,ts,mts,cts,vue}'],
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node
      }
    }
  },
  tseslint.configs.recommended,
  pluginVue.configs['flat/essential'],
  { files: ['**/*.vue'], languageOptions: { parserOptions: { parser: tseslint.parser } } },
  {
    rules: {
     //	这条规则是说如果变量未被更改，则应用const声明，
     // 这里写出来的原因是只有ts文件有效，而vue文件中没有自动修复，我就在这里重写了，保证行为一致
      'prefer-const': [
        'error',
        {
          destructuring: 'any',
          ignoreReadBeforeAssign: false
        }
      ],
      'vue/multi-word-component-names': 'off'
    }
  },
  EslintConfigPrettier
])