當我使用 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
},