如何解决TypeScript导入时TSlint提示行长度超100字符问题

嘿，这个问题我之前帮好几个开发者解决过！长导入路径触发TSlint的行长度限制确实挺烦的，拆分后又报错大概率是拆分方式不符合TSlint的格式规则，给你几个靠谱的解决方案：

1. 用TSlint认可的多行导入格式拆分 #

很多人拆分导入时格式不对才会触发新错误，TSlint对多行导入的格式有明确要求，只要按照下面的方式写，既能缩短行长度又不会报错：

命名导入拆分示例： #

// 错误拆分（可能触发格式错误）
import { FooService, BarComponent, 
         BazDirective, QuxPipe } from '../../../services/long-path-to-module/module-name';

// 正确拆分（符合TSlint规范）
import {
  FooService,
  BarComponent,
  BazDirective,
  QuxPipe
} from '../../../services/long-path-to-module/module-name';

默认导入+命名导入拆分示例： #

import DefaultModule, {
  FooService,
  BarComponent
} from '../../../services/long-path-to-module/module-name';

核心是把大括号单独换行，每个导入成员占一行，结尾的大括号也单独换行，这样TSlint的object-curly-spacing或max-line-length规则都会认可。

2. 配置TSlint，对导入语句放宽行长度限制 #

如果你不想改代码格式，可以直接在tslint.json里修改max-line-length规则，让它忽略所有导入语句：

{
  "rules": {
    "max-line-length": [
      true,
      {
        "limit": 100, // 你原来的行长度限制
        "ignore-pattern": "^import\\s.+from\\s.+;$"
      }
    ]
  }
}

这个正则表达式会匹配所有以import开头、以;结尾的导入语句，让TSlint跳过对它们的行长度检查。

3. 配置路径别名，从根源缩短导入路径 #

这是最彻底的解决方案，通过在tsconfig.json里配置路径别名，把冗长的相对路径改成简洁的别名：

第一步：在tsconfig.json中添加路径配置 #

{
  "compilerOptions": {
    "baseUrl": "./src", // 项目源码根目录
    "paths": {
      "@services/*": ["services/*"], // 把src/services下的文件映射为@services/xxx
      "@components/*": ["components/*"] // 同理可配置其他目录
    }
  }
}

第二步：使用别名替换长路径 #

原来的长导入：

import { FooService } from '../../../services/long-path-to-module/module-name';

现在可以写成：

import { FooService } from '@services/long-path-to-module/module-name';

不仅行长度大大缩短，代码可读性也提升了。如果你的项目用了Webpack、Vite等构建工具，记得同步配置对应的别名规则（比如Webpack的resolve.alias），确保构建时能正确解析路径。

4. 临时禁用单行导入的TSlint规则 #

如果只是个别导入路径特别长，不想全局修改规则或格式，可以在该行上方添加TSlint禁用注释：

// tslint:disable-next-line:max-line-length
import { FooService, BarComponent, BazDirective } from '../../../services/long-path-to-module/module-name';

这种方式适合临时处理个别特殊情况，不建议大规模使用。

内容的提问来源于stack exchange，提问作者Charlie-Greenman