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

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

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

我想做的是

<Hello></Hello>

保存代码后

<Hello />

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

谢谢。

【问题讨论】：

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

标签： javascript reactjs visual-studio-code eslint prettier

【解决方案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
},

【讨论】：