Angular 19组件导入段莫名出现空白行，如何解决？

这个问题大概率是代码格式化工具或Angular 19更新的默认规则导致的，以下是几种可行的解决思路：

• 调整Prettier导入分组规则
  很多项目用Prettier管理代码格式，Angular 19和新版Prettier的导入排序规则兼容时，可能会自动按模块分组插入空白行。打开项目根目录的.prettierrc（或.prettier.config.js），检查importOrder和importOrderSeparation配置：

  • 如果开启了importOrderSeparation，它会按importOrder定义的分组自动添加空白行。可以把@angular和rxjs归为同一组，或者直接关闭importOrderSeparation来消除不必要的空白。
    示例配置：

  {
    "importOrder": ["^@angular/(.*)$", "^rxjs/(.*)$", "^[./]"],
    "importOrderSeparation": false
  }
  

• 修改ESLint导入排序规则
  若项目用ESLint做代码检查，eslint-plugin-import的order规则可能会按模块类型分组并插入空白行。打开.eslintrc.json，调整import/order的配置：

  • 将@angular和rxjs都归到external组，同时设置newlines-between: "never"来禁止组间空白行。
    示例配置片段：

  "rules": {
    "import/order": [
      "error",
      {
        "groups": ["builtin", "external", ["internal", "parent", "sibling", "index"]],
        "pathGroups": [
          {
            "pattern": "@angular/**",
            "group": "external",
            "position": "before"
          },
          {
            "pattern": "rxjs/**",
            "group": "external",
            "position": "before"
          }
        ],
        "pathGroupsExcludedImportTypes": ["builtin"],
        "newlines-between": "never"
      }
    ]
  }
  

• 检查Angular CLI格式化配置
  Angular 19更新了CLI的默认格式化行为，打开angular.json，找到projects.[你的项目名].architect.format节点，查看是否有导入相关的规则参数，调整或关闭分组空白的设置。

• 统一编辑器格式化配置
  如果你用VS Code这类编辑器，确保"Format On Save"使用的是项目本地的格式化规则，而非全局默认。可以在VS Code的settings.json里添加：

  {
    "prettier.configPath": "${workspaceFolder}/.prettierrc",
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
  

  强制编辑器使用项目根目录的Prettier配置，避免全局规则干扰。

内容的提问来源于stack exchange，提问作者TheCuBeMan