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

Vue3-Eslint配合prettier完成代码风格配置

news 2026/7/4 9:56:21

前提：创建项目时勾选了prettier和eslint

若未，请参考Eslint:已有vue2项目添加eslint自动格式化，Eslint (standard)+ Husky + Lint-staged+prettier_vue2 eslint-CSDN博客

prettier风格配置

官网：https://prettier.io

Eslint：代码纠错，关注于规范

prettier：专注于代码格式化的插件，让代码更加美观

两者各有所长，配合使用优化代码

生效前提：

1）禁用格式化插件prettier

使用的是内置的prettier包，可以在package中查看版本

没有就下载>>pnpm add --save-dev prettier

2）安装Eslint插件

3）打开vscode的设置，点击右上角的页面进入代码设置

配置保存时自动修复以及关闭format on save

//ESlint插件+Vscode配置实现自动格式化修复 "editor.codeActionsOnSave": { "source.fixAll": "explicit" }, //关闭保存自动格式化 "editor.formatOnSave": false

按照红色框内修改代码

在配置文件.eslintrc.cjs中添加如下代码：查看注释理解代码含义，更多规则查看prettier官网

rules: { 'prettier/prettier': [ 'warn', { singleQuote: true, //单引号 semi: false, //无分号 printWidth: 80, //每行宽度至多80字符 trailingComma: 'none', //不加对象|数组最后逗号 endOfLine: 'auto' //换行符号不限制（win mac 不一致） } ] }

vue组件名称多单词组成（忽略index.vue）

vue组件名称要求必须由多单词组成，但是有时候需要设置index.vue就会报错，所以设置以下代码可以让index.vue不报错

'vue/multi-word-component-names': [ 'warn', { ignores: ['index'] //vue组件名称多单词组成（忽略index.vue） } ]

props解构（关闭）

正常props解构就会导致数据响应式丢失，但是我们可以有方法让其响应式不丢失，所以这里可以设置代码使props解构时不报错

'vue/no-setup-props-destructrue': ['off'], //关闭props解构的校验（props解构丢失响应式）

未定义的变量使用时报错

'no-undef': 'error' //添加未定义变量错误提示，create-vue@3.6.3关闭，这里加上是为了支持下一个章节演示

转义字符校验（关闭）

错误：Unnecessary escape character:\x.

解决：在.eslintrc.cjs文件中的rules添加'no-useless-escape': 'off'

总结：

.prettierrc.json文件

{ "$schema": "https://json.schemastore.org/prettierrc", "semi": false, "singleQuote": true, "printWidth": 80, "trailingComma": "none", "endOfLine": "auto" }

eslint.config.js

import { defineConfig, globalIgnores } from 'eslint/config' import globals from 'globals' import js from '@eslint/js' import pluginVue from 'eslint-plugin-vue' import pluginOxlint from 'eslint-plugin-oxlint' import eslintPluginPrettier from 'eslint-plugin-prettier' import skipFormatting from 'eslint-config-prettier/flat' export default defineConfig([ { name: 'app/files-to-lint', files: ['**/*.{vue,js,mjs,jsx}'] }, globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']), { languageOptions: { globals: { ...globals.browser } } }, js.configs.recommended, ...pluginVue.configs['flat/essential'], ...pluginOxlint.buildFromOxlintConfigFile('.oxlintrc.json'), { plugins: { prettier: eslintPluginPrettier }, rules: { 'prettier/prettier': 'warn', 'vue/multi-word-component-names': ['warn', { ignores: ['index'] }], 'vue/no-setup-props-destructure': 'off', 'no-undef': 'error' }, languageOptions: { globals: { ...globals.browser, ...globals.node, ElMessage: 'readonly', ElMessageBox: 'readonly', ElLoading: 'readonly' } } }, skipFormatting ])

补充：如果是用的TS文件，文件名就是eslint.config.ts

先引入eslint-plugin-prettier

npm i -D eslint-plugin-prettier pnpm add -D globals eslint-plugin-prettier

import { globalIgnores } from 'eslint/config' import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript' import pluginVue from 'eslint-plugin-vue' import pluginVitest from '@vitest/eslint-plugin' import pluginOxlint from 'eslint-plugin-oxlint' import eslintPluginPrettier from 'eslint-plugin-prettier' import skipFormatting from 'eslint-config-prettier/flat' import globals from 'globals' // To allow more languages other than `ts` in `.vue` files, uncomment the following lines: // import { configureVueProject } from '@vue/eslint-config-typescript' // configureVueProject({ scriptLangs: ['ts', 'tsx'] }) // More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup export default defineConfigWithVueTs( { name: 'app/files-to-lint', files: ['**/*.{vue,ts,mts,tsx}'] }, globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']), ...pluginVue.configs['flat/essential'], vueTsConfigs.recommended, { ...pluginVitest.configs.recommended, files: ['src/**/__tests__/*'] }, ...pluginOxlint.buildFromOxlintConfigFile('.oxlintrc.json'), { plugins: { prettier: eslintPluginPrettier }, rules: { 'prettier/prettier': [ 'warn', { singleQuote: true, semi: false, printWidth: 80, trailingComma: 'none', endOfLine: 'auto' } ], 'vue/multi-word-component-names': ['warn', { ignores: ['index'] }], 'vue/no-setup-props-destructure': 'off', 'no-undef': 'error' }, languageOptions: { globals: { ...globals.browser, ...globals.node, ElMessage: 'readonly', ElMessageBox: 'readonly', ElLoading: 'readonly' } } }, skipFormatting )

有时候会出现校验和保存冲突的情况，用下面的代码消除某一个文件的校验