解决Eslint和Prettier关于三元运算符的冲突问题

原创 已于 2024-11-14 15:34:33 修改 · 2k 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #代码规范 #eslint #prettier

于 2023-12-08 15:40:31 首次发布
本文介绍了如何在使用Prettier进行代码格式化时，针对Eslint对三元运算符的报错进行配置，通过加入特定的indent规则并忽略ConditionalExpression，解决了格式化与规范之间的冲突。

万能大法

// eslint加入配置
indent: 0

三元运算符Prettier的格式化

在这里插入图片描述

三元运算符Eslint的格式要求

在这里插入图片描述

解决办法

// eslint加入配置，屏蔽标红报错
indent: ['error', 2, {
   
    ignoredNodes
最低0.47元/天 解锁文章
esLint 规范总结 eslint配合prettier使用
cccccccccz的博客
04-01 874
esLInt规范总结 //.eslintrc.js module.exports = { // 解析ES6 'parser': 'babel-eslint', 'parserOptions': { // 启用ES8语法支持 'ecmaVersion': 2017, // module表示ECMAScript模块 ...
vue3 + vite + js 配置Eslint + prettier_vite+js+vue3配置eslint
2501_90229280的博客
01-14 909
proseWrap: ‘preserve’, // 使用默认的折行标准 参考 https://prettier.io/docs/en/options.html#trailing-commas。trailingComma: ‘none’, // 代码末尾不需要逗号 参考 https://prettier.io/docs/en/options.html#prose-wrap。‘jsx-quotes’: [2, ‘prefer-single’], // 强制在JSX文件中一致使用单引号。
确保正确使用三元条件表达式的ESLint规则
08-14
确保正确使用三元/条件表达式的ESLint规则
eslint语法简写三元运算符
qiaoguoqing的专栏
12-27 2536
// 标准 var isYes = answer === 1 ? true : false; // 优化 var isYes = answer === 1; // 标准 var isNo = answer === 1 ? false : true; // 优化 var isNo = answer !== 1;
prettier和eslint冲突怎么解决？
柒君的博客
02-04 2223
配置.eslintrc，把eslint-plugin-prettier插件配置在extends数组中的最后一位，以便可以覆盖其他风格配置规则。“eslint-plugin-prettier”: eslint插件，使eslint可以使用prettier的风格规则进行检查。前提：项目中已安装：eslint，prettier，已配置.eslintrc和.prettierrc。prettier：用来校验和处理js文件，css文件，html文件，格式问题。eslint：用来校验和处理js文件，逻辑和格式问题。
使用Prettier格式化代码
星环
12-15 8610
Prettier 文档 Prettier   Prettier 用来检查代码风格问题，它支持多种语言，我们这里讨论关于 JavaScript 的，它主要解决的问题是：应该使用单引号还是双引号，什么地方可以换行，TAB 键占多少个空格，结尾要不要分号 等等问题，这些都属于代码风格问题，正常情况下并不会有bug，但是在团队合作的时候容易让人暴躁。   单引号也没有没有错，双引号也没有错。但是总是要选择一个代码风格的，Prettier 希望人们放弃关于代码风格的讨论，把代码风格完全交给Prettier来处理，而不
React中 eslint格式化错误之三元表达式
weixin_58207509的博客
11-10 1871
今天做项目突然报出错误并且配置格式化 按ctrl+s 一直没有解决 这个错误大体意思就是你的三元格式写错了 至于为什么ctrl+s为什么会冲突 无法解决 大体就三种 第一种 你安装的beauty 美化压缩插件 与 你在setting.json中有个配置项 “editor.formatOnSave”: true 发生了冲突 第二种 你下的prettier 前端代码规范插件 还是与你在setting.json中配置项 “editor.formatOnSave”: true 发生了冲突 ...
Eslint 和 格式化工具prettier冲突问题
weixin_44362304的博客
08-08 1848
eslint prettier
【Prettier去换行深度解析】：2小时精通换行代码的优化策略
![【Prettier去换行深度解析】：2小时精通换行代码的优化策略]... Prettier基础介绍和换行机制概述 ## 什么是P
Prettier：掌握代码去换行技巧，提升代码审查效率
![Prettier 自动格式化去换行实现代码](https://user-images.githubusercontent.com/5748170/44157608-7be62480-a078-11e8-832c-74a2a85c2c93.png) ...Prettier是一种流行的代码格式化工具，它支持多种编程语言和风
ESLint规则可确保正确使用三元/条件表达式-JavaScript开发
05-26
ESLint插件：适当的三元概述固有的ESLint插件提供了控制？的定义的规则。 ：条件表达式（又称“三元表达式”），将它们限制在较窄的ESLint插件中：适当的三元概述适当的三元ESLint插件提供了控制？的定义的规则。 ：条件表达式（又称“三元表达式”），将它们限制为更窄，更合适/更易于理解的形式。 此插件中定义的规则：“嵌套”：控制？的嵌套。 ：三元表达式。 “ parens”：要求在三元表达式子句中的特定类型的表达式周围加上（..）括号。 “ where”：限制程序中的位置
Prettier一个漂亮的JavaScript格式化程序
08-09
Prettier一个漂亮的JavaScript格式化程序
ESLINT 报错 Unnecessary use of boolean literals in conditional expression
qq_34466755的博客
08-04 5203
ESlint报错：Unnecessary use of boolean literals in conditional expression 在使用三元运算符时，如果给定的返回的结果是boolean值则会出现这个错误。 假设有如下方法： var a = [1,2,3] function fun(array) { return array.length > 0 ? true : false } console.log(fun(a)) // true 错误原因：array.length > 0 这
ESLint与Prettier的结合
LauSET的博客
11-12 2109
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、ESLint?VSCode 配置Rules 常用规则忽略文件二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、ESLint? 记得第一次接触 eslint 的时候，这到底是什么啊？怎么把这东西删掉啊 VSCode
【Prettier】代码格式化工具Prettier的使用和配置介绍
热门推荐
qq_2511276124的博客
08-21 2万+
前段时间，因为项目的prettier的配置和eslint格式检查有些冲突，在其prettier官网和百度了一些配置相关的资料，在此做一些总结，以备不时之需。
eslint+prettier前端代码规范配置
前端菜鸟
10-26 2520
Eslint虽然可以检测代码质量问题并给出提示，但是格式化的能力有限，只能格式化js，不支持css,html等语言。而Prettier具有更强大的功能，能够支持包括 js、ts、各种 css、vue 和 md 等前端绝大部分的语言和文件格式 因此，我们可以通过Eslint和Prettier组合使用，用Eslint进行代码校验，用Prettier统一代码风格。
[vue/no-parsing-error] Parsing error: invalid-first-character-of-tag-name. 使用三元运算符导致eslint报错解决方式
m0_56305846的博客
05-12 2706
问题解析： 代码是可以正常运行的，但是Eslint会报错，因为在Html代码中会校验到一个单独的<号，会被Eslint认为是Html代码的一部分而不会认为是模板语言，但因为Vue会去解析这部分的表达式再进行输出，所以是可以正常运行的 解决方式： 方法一：可以使用Html的转义符 < 来进行对<或>号替换 <p>{{ (num &lt; 1) ? "你好":"hello" }}</p> 方法二： 使用 v-text 指令 &l...
eslint各种错误解决办法汇总:indentation of 2 spaces but found 4 / Newline required at end of file but not found
stefanie_sun723的博客
06-09 221
Expected indentation of 2 spaces but found 4 / Newline required at end of file but not found
esLint和prettier冲突解决
m0_72801772的博客
12-27 481
主要问题在于你再保存的时候prettier会自动帮你加上‘；’和‘，’，这两个符号再esLint里面会被校验说有不必要的符号，这时候我们需要新建一个文件在你的src下面。文件名：.prettierrc.cjs。
如何解决 ESLint 和 Prettier 的冲突问题？
最新发布
06-20
### 配置 ESLint 和 Prettier 以避免冲突并协同工作 为了解决 ESLint 和 Prettier 的冲突问题，可以按照以下方法配置两者以确保它们能够协同工作。 #### 安装依赖 首先，需要安装必要的依赖项来支持 ESLint 和 Prettier 的集成。运行以下命令以安装所需的包： ```bash pnpm add -D eslint prettier eslint-config-prettier eslint-plugin-prettier ``` - `eslint-config-prettier`：禁用所有可能与 Prettier 冲突的 ESLint 规则[^1]。 - `eslint-plugin-prettier`：将 Prettier 集成到 ESLint 中，使其作为规则的一部分运行[^3]。 #### 配置 `.eslintrc.json` 接下来，在项目的根目录中创建或更新 `.eslintrc.json` 文件，添加以下内容： ```json { "extends": [ "eslint:recommended", "plugin:prettier/recommended" ], "plugins": ["prettier"], "rules": { "prettier/prettier": "error" } } ``` - `"extends"`：扩展了 ESLint 推荐的规则集以及 `eslint-plugin-prettier` 提供的推荐规则集[^4]。 - `"plugins"`：声明使用 `prettier` 插件。 - `"rules"`：设置 `prettier/prettier` 规则为错误级别，确保代码不符合 Prettier 格式时会抛出错误。 #### 配置 `.prettierrc` 为了定义 Prettier 的格式化规则，可以在项目根目录中创建一个 `.prettierrc` 文件，例如： ```json { "semi": true, "singleQuote": true, "tabWidth": 2, "trailingComma": "es5" } ``` 此文件定义了代码格式化的具体规则，如是否使用分号、引号类型等[^5]。 #### 配置 VSCode 在 VSCode 的 `settings.json` 文件中添加以下内容以确保编辑器正确使用 ESLint 和 Prettier： ```json { "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": false, "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" }, "eslint.format.enable": true } ``` - `"editor.defaultFormatter"`：设置默认格式化工具为 Prettier[^5]。 - `"editor.formatOnSave"`：关闭保存时自动格式化功能，以避免与 ESLint 的自动修复功能冲突[^2]。 - `"editor.codeActionsOnSave"`：在保存时显式触发 ESLint 的修复功能[^4]。 #### 禁用 ESLint 的格式化规则 通过使用 `eslint-config-prettier`，所有与代码格式相关的 ESLint 规则都会被禁用，从而避免与 Prettier 的规则发生冲突[^1]。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Vgbire

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值