vscode 中 prettier 和 ESLint 冲突解决

问题

有一天,领导让接手了个带有 ESLint 配置的老项目,这个 ESLint 配置是打在 node_modules 里。

在熟悉的代码时候,我调制并保存了下,此时由于 VS Code 安装了 prettier 插件,采用 prettier 对代码进行了格式化,此时在终端报了各种错误,如下图:
终端报错
这是由于 ESLint 跟 prettier 在校验上的不一致,在 VS Code 的 setting.json 里配制了保存就格式化,所以会在保存后就报错。

"editor.formatOnSave": true // 保存就格式化

修复

首先想到的是将两者的校验规则改为一致,可是这个项目的 ESLint 配制文件是打包在 node_modules ,当然也可以重写覆盖,但很明显这不合适。

翻阅了下对 prettier 插件的说明,看到
用法
恍然大悟,为什么要启动保存就校验呢?

所以将 editor.formatOnSave 改为 false ,这样在有需要的时候再进行校验,可以右键选择 Format Document 整个文件校验,也可以选中部分,右键选择 Format Selection 对选中部分校验。

完善

以上规避了 prettier 与 eslint 冲突问题,但 eslint 的验证每次都要在终端里才能发现,要在 VS Code 编辑器中实时发现错误,需安装 ESLint插件

ESLint

安装好之后,在 setting.json 里添加如下配制:

{
  "editor.codeActionsOnSave": { //eslint错误保存自动fix
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html"
  ],
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  "eslint.format.enable": true,
  // 要验证的语言类型
  "eslint.probe": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html"
  ]
}

此时可以通过先右键 Format Document 采用 prettier 格式化代码,再保存采用 ESLint 校验,完美解决。

完整 setting.json 内容如下:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html"
  ],
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  "eslint.format.enable": true,
  "eslint.probe": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html"
  ],
  "editor.formatOnSave": false,
  "editor.suggestSelection": "first",
  "editor.detectIndentation": false,
  "editor.tabSize": 2,
  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript|react]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript|react]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "workbench.iconTheme": "vscode-icons",
  "window.zoomLevel": 0,
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "git.autofetch": true,
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "explorer.confirmDelete": false
}

其他

如果 VS Code 安装完 ESLint,保存时没有校验,要看下右下角是否开启 ESLint 校验。如下图

禁用ESLint

如果被禁用,请点击它,会弹出选项,选择最左边的选项即可。方可生效。
启用ESLint

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
在 monorepo 使用 prettiereslint 可以非常有效地帮助我们统一代码风格并保持代码质量。 首先,Prettier 是一个代码格式化工具,它能够自动识别代码的格式问题,并通过自动化调整代码格式,使其在项目保持一致。在 monorepo 使用 Prettier 可以确保不同子项目的代码风格保持一致,避免因为多人协作或者多个子项目而导致的格式不一致的问题。可以通过在 monorepo 的根目录配置 Prettier,并在各个子项目使用相同的配置文件来实现统一的代码格式。 而 Eslint 是一个静态代码分析工具,可以帮助我们检查代码的潜在问题、错误和不规范的写法。在 monorepo ,使用 Eslint 可以帮助我们规定一致的代码质量标准,并对代码进行自动化的检查。可以在 monorepo 的根目录配置 Eslint,并在各个子项目使用相同的配置文件,以保持一致的代码规范。 同时,在 monorepo 使用 prettiereslint,我们可以通过版本控制工具(如 Git)在团队协作实现持续集成和自动化的代码格式检查。当代码提交到版本控制工具时,可以配置钩子(hooks)来触发 PrettierEslint 的检查,并在检查不通过时阻止代码提交,从而确保每个提交的代码都符合团队的要求。 总结来说,在 monorepo 使用 prettiereslint 可以帮助我们统一代码格式和质量标准,提高开发效率,减少潜在问题和维护成本。但需要注意,在配置过程要保持一致的配置文件,并在团队进行培训和沟通,以确保所有开发者都能正确使用这些工具。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值