有没有一种方法可以在VSCode中自动格式化Flutter代码？

Question

我想知道是否有类似于Eslint的库可用于Flutter/Dart，它可以在我保存文件时自动插入分号和尾随逗号。

Flutter版本：1.22.3 Dart版本：2.10.3

- Fabio Dias

Answer 1

使用 VS Code 版本 1.53（之前的版本也有此功能），您无需安装任何特殊扩展程序。只需导航到：

首选项 -> 设置 -> 文本编辑器 -> 格式设置

确保启用“保存时格式化”

每次按下 Ctrl + S 键，文件都将被保存并进行代码格式化。

- Msmkt

---

如果这对你不起作用，请记住在按下“ctrl + S”之前必须先更改文件。否则格式化程序将无法运行。 - Jonathan Monsonego

Answer 2

1. 安装flutter扩展。
2. 在settings.json文件中追加或修改以下行：

"[dart]": {
    "editor.defaultFormatter": "Dart-Code.dart-code",
    "editor.formatOnSave": true,
}

完成后，您可以使用保存（Ctrl + S）操作格式化Dart文件。

- Zchary

---

在上述所有建议中，这是对我最有效的。非常感谢。 - Oluwaseyitan Baderinwa

这个运行得很好。 <3 - 钟智强

这是最佳选择，因为它不会影响其他语言的格式。太棒了！ - David Jentjens

Answer 3

你可以用一个命令来格式化每个Flutter文件，就像这样...

 dart format . -l 120

我相信它设置了行长度，这样一来，所有的代码都会以其独特的方式进行格式化，真是太棒了。

- martinseal1987

---

很好。感谢您提供这个命令。我会收藏这个答案的。 - Bugs Happen

请注意：[!]“format”命令已被弃用，并将在未来的Flutter版本中删除。请改用“dart format”子命令，该命令与“flutter format”具有相同的命令行参数。 - martinseal1987

Answer 4

打开 VS Code 设置

• 文件 -> 首选项 -> 设置

文本编辑器 -> 格式化

• 启用粘贴时格式化
• 启用保存时格式化

- Rahul Raj

Answer 5

实际上，可选冒号是允许自动格式化的原因...我不确定在一行的末尾自动添加冒号或分号是否真的有帮助，因为它可能会变化，而且我认为没有其他扩展能够有效地做到这一点（除了使用其他快捷方式）...

所以，虽然它并没有完全回答你的问题，但它可能会帮助其他正在寻找如何格式化其flutter代码的用户：如果你有所有可选的冒号，最好的方法是运行flutter插件中包含的命令。只需从终端运行flutter format lib，它将格式化lib目录及其子目录中的所有dart文件。您可以将lib更改为您喜欢的任何目录。

最后，您可以添加一些扩展并激活几个插件以获得更易读的文件。但这是个人喜好的问题。我个人使用：Bracket Pair Colorizer 2，Indent-Rainbow，并激活两个dart选项以获取此结果：

- gbaccetta

Answer 6

文档中有一个代码格式化帮助区域。此处有一份适用于 VS Code 的说明。它解释了

要自动格式化当前源代码窗口中的代码，请在代码窗口中右键单击，然后选择“格式化文档”。您可以在 VS Code 首选项中添加一个快捷键。

安装 Flutter 扩展程序之后即可进行操作。

我还发现了另一篇 Stack Overflow 帖子，其中提供了一些扩展建议和一种为 / 在 VsCode 中制作自己绑定的方法。

- KangarooRIOT

---

在VSCode中设置Flutter开发的说明请参见此处。 - Adam Kern

@AdamKern 也是个不错的链接。我只是想直接链接到代码格式化部分。我相信这些链接应该能解决问题。 - KangarooRIOT

如果你忘记了在代码中加上分号，它会显示缺少分号的错误。按下 "ctrl + ." 可以建议插入 ";"，但是与 Eslint 在 JavaScript 上自动修复不同，它不会在保存时自动修复。 - Fabio Dias

@FabioDias 我更新了我的回答，链接到另一个SO帖子，其中提供了一些关于如何配置VsCode以支持您想要的分号自动完成的建议。 - KangarooRIOT

似乎无法像 JavaScript 一样使用 Eslint 对 Dart 进行格式化。 - Fabio Dias

Answer 7

您可以按照官方文档https://flutter.dev/docs/development/tools/formatting中提到的方式来使用此命令。 flutter format .

- Akash Lilhare

Answer 8

在扩展中心搜索 [Prettier - 代码格式化工具]

它可以在你按下 ctrl+S 后自动为你格式化代码

- Mohamed Abdulhalim

Answer 9

如果在vs code中出现此图像而没有工具栏，请执行以下操作：

点击这里进入首选项->设置，然后找到->默认格式化程序

点击这里并将其更改为Dart即可完成。

- Leonardo Ferreira

Answer 10

一个简单的快捷方式来格式化Flutter代码（Dart）

  Ctrl + ALT + L

您的代码将被格式化。

- Nisha Jain