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

Question

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

我想做的是

<Hello></Hello>

在我保存代码之后

<Hello />

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

谢谢你。

Answer 1

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

1. 启用react/self-closing-comp规则：

// eslint config file (package.json / eslintrc / settings.json etc.)
{
  ...
  "rules": {
    "react/self-closing-comp": "error"
  }
}

2. 在VSCode settings.json ，确保您启用了自动修复（例如使用 vscode-eslint 扩展，它可能与任何其他 lint 扩展相关）：

// settings.json @ VSCode
{ 
...
  "eslint.autoFixOnSave": true,
  "eslint.run": "onSave",
}

参考eslint-plugin for vscode进行集成。

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

Answer 2

据我所知，您可以使用"javascript.autoClosingTags": false实现类似的功能。 但是我知道社区的某些人真的不喜欢这个功能，因为它经常关闭你不想关闭的组件。 不知道大家是否熟悉Typescript？ 但是，如果您是我建议将 React 与 type script 结合使用（通过npx create-react-app . --typescript创建项目npx create-react-app . --typescript 。在开发时，它会自动检查这些情况，如果您有一个空组件，则会出现编译错误。

我希望这回答了你的问题

Answer 3

添加这个 ti vscode 配置：

vscode settings.json:

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