ESLint 和 Prettier 配置冲突解决方案

简介: ESLint 和 Prettier 配置冲突解决方案

问题

项目使用 ESLint 做代码规范检查,使用 Prettier 进行代码格式化,因为二者在配置上的冲突导致类似如下的警告


'xxx' should be on a new line. eslint

1


微信图片_20230710104808.png

解决方案

根据 vuejs 官方的 ESLint 配置 https://eslint.vuejs.org/user-guide/#usage ,其中有讲到如何解决 ESLint 和 Prettier 配置冲突的问题


微信图片_20230710104811.png


安装 eslint-config-prettier 依赖


npm i -D eslint-config-prettier

1

配置 .eslintrc.cjs


 extends: [

   // 参考vuejs官方的eslint配置: https://eslint.vuejs.org/user-guide/#usage

   "plugin:vue/vue3-recommended",

   // 覆盖 ESLint 配置,确保 prettier 放在最后

   "prettier",

 ]



再回去看 ESLint 的警告已经没有了


微信图片_20230710104829.png


附件

项目源码:https://gitee.com/youlaiorg/vue3-element-admin


历史文章:【vue3-element-admin】ESLint+Prettier+Stylelint+EditorConfig 约束和统一前端代码规范


目录
打赏
0
0
0
0
42
分享
相关文章
前端常用的ESlint配置
前端常用的ESlint配置
130 1
前端项目代码规范工具 (ESLint. Prettier. Stylelint. TypeScript)
前端项目代码规范工具 (ESLint. Prettier. Stylelint. TypeScript)
184 4
在VSCode中 使用 ESLint + Prettier检查代码规范及自动格式化前端Vue代码
般的代码格式化工作,ESLint完全可以胜任,为什么要用Prettier代替ESLint的代码格式化功能?简而言之,Prettier的代码格式化功能比ESLint更强大,配置更简单,通过配置,ESLint可以使用Prettier的代码规则进行校验,如果不配置好,会出现冲突,导致二者不能配合使用。 下面详细介绍如何配置ESLint+Prettier在VSCode中开发Vue代码:
1498 29
在VSCode中 使用 ESLint + Prettier检查代码规范及自动格式化前端Vue代码
如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。
【10月更文挑战第9天】随着前端开发技术的发展,代码规范和格式化工具变得至关重要。本文介绍如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。通过安装插件、配置 ESLint 和 Prettier,以及设置 VSCode,实现代码实时检查和格式化,确保代码风格一致。
1076 2
前端工具 Prettier 详细使用流程(兼容ESLint)
前端工具 Prettier 详细使用流程(兼容ESLint)
307 0
前端工具 Prettier 详细使用流程(兼容ESLint)
前端工具 Prettier 详细使用流程(兼容ESLint)
547 0
[译] 以和为贵!让 ESlint、Prettier 和 EditorConfig 互不冲突
[译] 以和为贵!让 ESlint、Prettier 和 EditorConfig 互不冲突
[译] 以和为贵!让 ESlint、Prettier 和 EditorConfig 互不冲突
Prettier与ESLint:代码风格与质量的自动化保证
这两个工具协同工作以确保代码一致性。Prettier负责自动格式化,包括缩进、引号等,而ESLint执行静态分析,检查潜在错误和风格。Prettier配置文件如`.prettierrc`,ESLint配置如`.eslintrc.js`。安装它们并集成,例如使用`eslint-plugin-prettier`和`eslint-config-prettier`。在提交前,可通过husky和lint-staged在本地自动运行格式化和检查。IDE中配置插件可实现实时反馈。自定义规则和选择共享配置(如airbnb)以适应项目需求,并在CI流程中集成以保持高标准。
118 1
【源码共读】Vite 项目自动添加 eslint 和 prettier
【源码共读】Vite 项目自动添加 eslint 和 prettier
380 0
团队协作(一)—— 你不知道的 ESLint + Prettier3
团队协作(一)—— 你不知道的 ESLint + Prettier3
550 1