首先下载 eslint, prettier, eslint-config-prettier, eslint-plugin-prettier npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier 项目根目录添加 .eslintrc.js 和 .prettierrc // .eslintrc.json { "extends": ["plugin:prettier/recommended"] } // .prettierrc.json...
"prettier.jsxBracketSameLine": true, "prettier.bracketSpacing": false, // 去掉数组内部前后的空格 "prettier.semi": false, // 不要给语句加; "prettier.singleQuote": true, // 采用单引号 "prettier.trailingComma": "none", // 不要尾随逗号, "prettier.printWidth": 80, // 每行超过80列就换行 ...
这样ESLint 将使用 Prettier 的规则,并且禁用与其冲突的规则。 #调整执行顺序 可以使用 eslint-plugin-prettier 插件将 Prettier 集成到 ESLint 中。该插件将在检查代码的同时自动应用 Prettier 的格式化规则,确保代码风格一致。 1、安装 eslint-plugin-prettier 代码语言:javascript 复制 npm i eslint-plugin-prettier...
在前端开发中,很多人使用 prettier 作为代码格式化工具,用 ESLint 控制代码风格,以及检查错误。 但是在同时使用 ESLint 和 prettier 的时候,由于代码规则不一样就会发生冲突,发生冲突的原因是:在保存文件时,**ESLint 先修复了代码符合 ESLint 的代码风格,之后 prettier 又格式化了代码,导致代码不符合 ESLint 规则了...
后面用到的Prettier主要负责: 风格检查, 没有质量检查 三 安装ESLint 1. 安装npm包 npm install -D eslint 2. 安装ESLint插件 这时候, ESLint其实已经可以用了, 例如 Vetur也继续可用 3. 启用ESLint .vscode/settings.json文件(或者 code-》首选项-》设置-》工作区JSON)加入如下配置 ...
官方推荐的配置是将上述步骤整合，利用plugin:prettier/recommended插件来自动化处理大部分冲突。这个插件负责执行Prettier的规则，简化了配置过程。值得注意的是，从ESLint v8.53.0开始，官方计划弃用代码风格相关规则，因此项目根目录应同时包含.eslintrc.js和.prettierrc文件，以适应这一变化。
项目中的 ESLint 配置中使用了 Airbnb JavaScript 风格指南校验后,其规则之一是代码结束后面要加分号,而我们在 Prettier配置文件中加了代码结束后面不加分号的配置项,这样就有冲突了,会出现用 Prettier 格式化后的代码,ESLint 检测到格式有问题的,从而抛出错误提示。
其中Eslint负责代码质量、错误检查,Prettier负责代码风格检查。优点是能够满足代码质量、风格检查。缺点是: Eslint与Prettier规则可能冲突,配置成本高 代码风格检查的可配置性低(Prettier配置性低) 方案2 只使用Eslint 使用「代码风格相关规则的集合」,比如@stylistic/eslint-plugin-js[4]管理代码风格。再使用其他规则管...
为让项目中代码风格统一,需要解决配置中的冲突。 多个插件同时格式化一个文件。 一段代码有 n 个 lint 规则冲突。 消除vscode 集成插件冲突。 vscode 目前常用的格式化插件有 prettier,volar,eslint,vetur。 保存格式化与手动格式化配置需要一致,推荐 2 选一。