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

Question

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

我想做的是

<Hello></Hello>

保存代码后

<Hello />

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

谢谢。

Answer 1

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

我希望这能回答你的问题

Answer 2

您需要启用相关规则并确保 VSCode 已集成以修复保存时的 lint warnings/errors。

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

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

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

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

参考eslint-plugin for vscode整合。

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

Answer 3

将此添加到 vscode 配置：

vscode settings.json:

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

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

How to setup self-closing when I save code on VSCode with prettier and ESLint?

javascript

reactjs

eslint

visual-studio-code

prettier