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

前提创建项目时勾选了prettier和eslint若未请参考Eslint:已有vue2项目添加eslint自动格式化Eslint (standard) Husky Lint-stagedprettier_vue2 eslint-CSDN博客prettier风格配置官网https://prettier.ioEslint代码纠错关注于规范prettier专注于代码格式化的插件让代码更加美观两者各有所长配合使用优化代码生效前提1禁用格式化插件prettier使用的是内置的prettier包可以在package中查看版本没有就下载pnpm add --save-dev prettier2安装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.vuevue组件名称要求必须由多单词组成但是有时候需要设置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-vue3.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.jsimport { 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-prettiernpm i -D eslint-plugin-prettier pnpm add -D globals eslint-plugin-prettierimport { 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 )有时候会出现校验和保存冲突的情况用下面的代码消除某一个文件的校验npx eslint 文件名 --fix