TypeScript路径别名符号(@、~、#等)使用约定及ESLint校验问询

一、不同文件类型的路径别名符号约定 #

TypeScript官方并未制定强制统一的路径别名符号标准，但社区逐渐形成了一些不成文的常用约定，按文件类型区分如下：

• 业务代码/文件系统模块：最普遍使用@，比如@/components/*、@/pages/*，通常对应项目根目录下的核心业务目录，能清晰区分相对路径和根路径导入，避免多层../的混乱。
• 内部公共模块/工具库：部分团队会用#来隔离核心工具模块与业务代码，比如#/utils/*、#/constants/*，突出这类模块的公共性与复用性，和业务代码的@做明确区分。
• 资源/静态文件：~偶尔会被用来指向静态资源目录，比如~assets/styles/global.css，不过更多团队还是延续@的统一风格，用@/assets/*来管理图片、样式等静态资源，保持规则一致性。

二、可强制执行规则的ESLint插件与配置 #

有多个ESLint工具可以帮你强制执行路径别名的使用规则：

• eslint-plugin-import + eslint-import-resolver-typescript：
  • 配置import/no-unresolved可以确保别名路径解析正确，避免无效的别名导入；
  • 通过import/order规则可以强制别名导入的顺序（比如让@或#开头的导入排在相对路径之前），保持代码风格统一。
• eslint-plugin-path-alias：
  • 专门针对路径别名设计的插件，支持强制使用别名替代相对路径、禁止混用不同符号的别名等规则，能精准管控团队的别名使用规范。
• 注意事项：无论使用哪个插件，都需要在ESLint配置中正确关联tsconfig.json的paths配置，确保ESLint能识别自定义的别名规则。

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