VS Code 中 Angular 17 新控制流的缩进

Question

我正在使用 VS Code，但遇到了 Angular 17 缩进 (Alt+Shift+F) 的问题。我想更改缩进与 Angular 17 视图的配合方式。目前，新的控制流程正在执行以下操作：

我希望看到它这样做：

我不确定问题是否出在 Angular Language Service、Prettier 或 VS Code 上。

谁能指导我，因为这让我有点疯狂。

Answer 1

其他答案都不适合我单独使用，但结合 dylhunn 和 Sadra Rahmani 的答案就成功了：

1. 安装 Prettier 作为开发依赖项

   首先，将 Prettier 添加到您的项目中。这很重要，因为全局安装的 Prettier 对我不起作用。使用这个命令：

   npm i -D prettier
   

2. 添加.prettierrc文件

   然后，.prettierrc在项目的根目录中创建一个文件。将以下内容放入其中：

   {
     "overrides": [
       {
         "files": "*.html",
         "options": {
           "parser": "angular"
         }
       }
     ]
   }
   

   注意：简单地放在{"parser": "angular"}那里就破坏了 .ts 文件的格式。

3. 重新开始

   重新启动 Visual Studio Code 以开始使用新配置。

Answer 2

Prettier 3.1 支持 Angular 的新控制流。

运行以在您的开发依赖项npm i prettier@3.1 --save-dev中安装 v3.1 。package.json然后，确保您安装了 Prettier VSCode 扩展，该扩展使用您的node_modules. 最后，按Cmd+Shift+P，搜索Format...，然后使用 Prettier 进行格式化。