当我使用 prettier 和 ESLint 在 VSCode 上保存代码时如何设置自动关闭?

Posted

技术标签:

【中文标题】当我使用 prettier 和 ESLint 在 VSCode 上保存代码时如何设置自动关闭?【英文标题】:How to setup self-closing when I save code on VSCode with prettier and ESLint? 【发布时间】:2020-01-17 15:09:30 【问题描述】:

我使用 React 和 VSCode,我想在保存代码时设置自动关闭但我不知道如何...

我想做的是

<Hello></Hello>

保存代码后

<Hello />

我在哪里可以设置自动关闭?

谢谢。

【问题讨论】:

有两个 VScode 设置可用,看看你的设置是否有点像:"editor.defaultFormatter": "esbenp.prettier-vscode""editor.formatOnSave": true 在你的设置中,看看它是否能解决你的问题,我正在处理我的问题,所以只是想查明是哪个设置。 【参考方案1】:

您需要启用相关规则并确保已集成 VSCode 以修复保存时出现的 lint 警告/错误。

    启用react/self-closing-comp 规则:
// eslint config file (package.json / eslintrc / settings.json etc.)

  ...
  "rules": 
    "react/self-closing-comp": "error"
  

    settings.jsonVSCode 内确保您启用了自动修复(例如使用 vscode-eslint 扩展,它可能与任何其他 lint 扩展相关):
// settings.json @ VSCode
 
...
  "eslint.autoFixOnSave": true,
  "eslint.run": "onSave",

请参阅eslint-plugin for vscode 进行集成。

注意eslint-config-airbnb 默认启用它(我建议使用任何配置)。

【讨论】:

我需要在 VSCode 的 ESLint 中添加验证【参考方案2】:

据我所知,您可以使用"javascript.autoClosingTags": false 实现类似的目标。但是我知道社区的某些部分确实不喜欢此功能,因为它经常关闭您不想关闭的组件。不知道大家是否熟悉Typescript?但如果你是我推荐结合使用 React 和类型脚本(通过npx create-react-app . --typescript 创建一个项目。在开发时它会自动检查这些情况,如果你有一个空组件,则会给你一个编译错误。

我希望这能回答你的问题

【讨论】:

【参考方案3】:

添加这个 ti vscode 配置:

vscode settings.json:

"editor.codeActionsOnSave": 
  "source.fixAll.eslint": true
,

【讨论】:

以上是关于当我使用 prettier 和 ESLint 在 VSCode 上保存代码时如何设置自动关闭?的主要内容,如果未能解决你的问题,请参考以下文章

Eslint 在大括号之间添加了不必要的空格,Prettier 显示错误

Atom 与 prettier、eslint 和 airbnb 风格的 React 开发指南

VSCode 加载插件失败找不到模块 'eslint-plugin-prettier'

为啥看起来 eslint 和 prettier 好像在打架?

Linter:“在 React + TS + 样式化组件上插入 `··` eslint(prettier/prettier)”

React-Native 应用程序中的 ESLint / Prettier / Husky 缩进问题