使用VS Code的React文件中的清理格式

Question

因此，我很好奇如何快速糾正.jsx文件中代碼的格式。 嘗試了一些擴展，例如美化反應，美化等等...，但是它們似乎在vs代碼中不能正常工作。

我看到的是：

您可以看到我的縮進線被弄亂了。 我相信這是來自團隊中使用其他編輯器的開發人員，其間距設置不同。

那么，有沒有一種方法可以保持這種狀態清潔，甚至可以為其添加一些自動功能？

Answer 1

肚里非常清楚我的一個.jsx和.js是更漂亮

您可以將其安裝為項目依賴項：

npm install --save-dev --save-exact prettier

如果您想更漂亮地監視更改，可以將以下內容添加到package.json

  "scripts": {
    "prettier-watch": "onchange '**/*.js' -- prettier --write {{changed}}"
  }

VS更漂亮的配置

您可以查看其他Prettier編輯器配置以了解更多詳細信息

Answer 2

eslint有通過為自動修復文件的能力--fix如果你有定義的樣式規則的命令行參數。 它具有可通過插件使用的相當大量的規則。 還有標准化的配置，例如https://github.com/standard/eslint-config-standard-react 。 這將幫助您格式化和執行其他最佳實踐。

它與vscode集成 。

Answer 3

Visual Studio 2017為.jsx文件提供了不錯的格式設置選項。 使格式化變得困難的原因是它們將標記與JavaScript結合在一起。 我不確定VS Code是否具有此功能，但是您可以使用此鍵盤快捷鍵來清理.jsx文件的格式。

Ctrl + K + D

它還將清除json等的格式。我認為這是Visual Studio的第一個版本，它為.jsx提供這種格式的格式。