如何缩短Angular组件文件名？将heroes.component.ts改为heroes.comp.ts

Angular官方推荐的.component.后缀只是一套命名规范，目的是让项目结构更清晰，但并没有强制要求必须使用。如果你觉得这个后缀太长占空间，完全可以自定义缩短成.comp.或者其他你喜欢的格式，下面是具体的实现方法：

1. 手动修改现有组件文件 #

直接在VS Code资源管理器里重命名文件就行，比如把heroes.component.ts改成heroes.comp.ts，对应模板文件heroes.component.html改成heroes.comp.html。

不过要记得同步更新组件类里的路径配置，不然Angular找不到模板和样式文件：

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.comp.html', // 这里要改成新的文件名
  styleUrls: ['./heroes.comp.css'] // 样式文件也要同步修改
})
export class HeroesComponent { /* 组件逻辑 */ }

2. 配置Angular CLI自动生成缩短后缀的文件 #

如果你平时用Angular CLI创建组件（ng g c heroes这类命令），可以修改CLI配置，让它自动生成带.comp.后缀的文件：

1. 打开项目根目录的angular.json文件；
2. 找到schematics节点（没有的话就手动添加到项目配置里），添加以下配置：

"schematics": {
  "@schematics/angular:component": {
    "suffix": "comp" // 将默认的component替换成comp
  }
}

之后再用CLI创建组件，就会自动生成heroes.comp.ts、heroes.comp.html这类文件了。

如果还想保持组件类名还是HeroesComponent（而不是自动变成HeroesCompComponent），可以再加个skipSuffix: true配置：

"@schematics/angular:component": {
  "suffix": "comp",
  "skipSuffix": true // 组件类名不再自动添加后缀
}

3. 一些注意事项 #

• 如果是团队项目，一定要先和队友统一命名规则，避免出现命名混乱；
• VS Code的Angular相关插件（比如Angular Language Service）依然能正常识别自定义后缀的组件，只要@Component装饰器配置正确，就不会影响代码提示和语法检查；
• 大型项目建议一开始就确定好命名规范，后期批量修改文件名可能会涉及路由、组件引用等多处调整，成本较高。

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