当前位置：首页 > news >正文

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

news 2025/7/11 7:23:43

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
])