WebStorm用Angular时ESLint无法启动语言服务，HLS的.ts文件冲突怎么解决？

解决方法 #

你之前的配置不生效的核心原因有两个：一是ng lint命令优先读取Angular自身的lint配置，不会完全继承ESLint的忽略规则；二是WebStorm的ESLint服务默认会遍历项目内所有.ts后缀文件，没有提前排除视频分片目录，导致服务被大量二进制文件卡住崩溃。
按照以下步骤操作即可修复：

• 第一步：补充angular.json的lint排除规则
  打开项目根目录的angular.json，找到对应项目下的architect > lint > options配置段，添加exclude字段：

  "options": {
    "lintFilePatterns": [
      "src/**/*.ts",
      "src/**/*.html"
    ],
    "exclude": [
      "**/src/assets/test-videos/**/*"
    ]
  }
  

• 第二步：调整ESLint配置的规则匹配范围
  不要全局给所有.ts文件应用TypeScript解析规则，用overrides配置精准限定业务代码范围，修改.eslintrc.json：

  {
    "root": true,
    "ignorePatterns": [
      "projects/**/*",
      "**/src/assets/test-videos/**/*"
    ],
    "overrides": [
      {
        "files": ["src/**/*.ts", "src/**/*.tsx"],
        "excludedFiles": ["**/src/assets/**/*"],
        // 把原来的TypeScript相关parser、plugins、rules配置都移到该overrides项下
        "parser": "@typescript-eslint/parser",
        "plugins": ["@typescript-eslint"],
        "rules": {
          // 原有规则保持不变
        }
      }
    ]
  }
  

  该配置会让ESLint仅对src下非assets目录的.ts文件执行TypeScript类型的lint检查，不会尝试解析HLS的.ts二进制分片文件。
• 第三步：配置WebStorm端的排除规则
  1. 打开WebStorm设置，进入Languages & Frameworks > JavaScript > Code Quality Tools > ESLint
  2. 在「Run for files」输入框中，在原有规则后追加排除规则，修改为：
     {**/*,*}.{js,ts,jsx,tsx,html,vue} !**/src/assets/test-videos/**/*
  3. 可选操作：在项目文件树中右键点击test-videos目录，选择「Mark Directory as > Excluded」，避免WebStorm全局索引把视频分片识别成TypeScript代码。
• 第四步：验证配置生效
  重启WebStorm的ESLint服务（右下角ESLint图标点击选择「Restart ESLint Server」），之后执行ng lint命令，确认不会再卡住，编辑器也不会再报ESLint服务启动失败的错误。

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