使用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提供这种格式的格式。