prettier和eslint冲突怎么解决?

前提:项目中已安装:eslint,prettier,已配置.eslintrc和.prettierrc

eslint:用来校验和处理js文件的逻辑和格式问题
prettier:用来校验和处理js文件,css文件,html文件,的格式问题
所以对于js文件:在格式处理方面,两者可能存在冲突

解决方案:
优先使用prettier的风格,不使用eslint建议的风格

第一步:
需要安装两个npm包:
“eslint-config-prettier”: 安装后会自动关闭eslint相关的风格建议
“eslint-plugin-prettier”: eslint插件,使eslint可以使用prettier的风格规则进行检查

第二步:
配置.eslintrc,把eslint-plugin-prettier插件配置在extends数组中的最后一位,以便可以覆盖其他风格配置规则

{
	"extends": ["plugin:prettier/recommended"]
}

第三步:
最好重启ide

  • 11
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于 PrettierESLint 的配置,你可以按照以下步骤进行设置: 1. 首先,确保在你的项目中已经安装了 PrettierESLint。你可以使用以下命令进行安装: ``` npm install prettier eslint --save-dev ``` 2. 在你的项目根目录下创建一个 `.prettierrc` 文件,并在其中定义 Prettier 的配置选项。比如,你可以指定代码的缩进大小、单引号还是双引号等。以下是一个示例配置文件: ```json { "printWidth": 80, "tabWidth": 2, "useTabs": false, "semi": true, "singleQuote": true, "trailingComma": "es5", "bracketSpacing": true, "jsxBracketSameLine": false, "arrowParens": "avoid" } ``` 3. 接下来,在你的项目根目录下创建一个 `.eslintrc` 文件,并在其中定义 ESLint 的配置选项。你可以基于你的项目需求来选择不同的规则,或者使用一些预设规则。以下是一个示例配置文件: ```json { "extends": ["eslint:recommended", "plugin:prettier/recommended"], "rules": { // 在这里定义你自己的 ESLint 规则 } } ``` 此处我们使用了 `eslint:recommended` 预设规则和 `plugin:prettier/recommended` 插件,后者会自动禁用与 Prettier 冲突ESLint 规则。 4. 如果你使用的是 VS Code 编辑器,你可以安装以下插件以实现自动格式化和代码检查: - ESLint 插件:用于在编辑器中展示 ESLint 错误和警告,并提供自动修复功能。 - Prettier 插件:用于在保存文件时自动运行 Prettier 进行代码格式化。 完成以上步骤后,你可以根据你的配置选项来自定义代码的格式化和代码质量检查。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值