如何配置ESLint规则以触发“Object is possibly null”告警

要在ESLint侧实现Object is possibly 'null'的告警校验，无需修改生产环境的TS配置，按以下步骤调整即可：

步骤1：新增ESLint专用的TS配置文件 #

你原有的tsconfig.json已经排除了单元测试等文件，需要新建一个tsconfig.eslint.json给ESLint做类型解析用，该文件仅用于ESLint校验，不影响原有项目编译流程：

{
  "extends": "./tsconfig.json",
  "exclude": ["dist/**/*"],
  "include": ["lib/**/*.ts", "lib/**/*.tsx", "lib/**/*.spec.tsx", "lib/**/*.stories.tsx", "lib/**/*.styles.tsx", "settings/**/*"]
}

步骤2：修改.eslintrc.json配置 #

首先在parserOptions中添加project字段，指向刚才新建的TS配置，让ESLint可以获取类型信息：

"parserOptions": {
  "ecmaFeatures": {
    "jsx": true
  },
  "ecmaVersion": 12,
  "sourceType": "module",
  "project": "./tsconfig.eslint.json"
}

然后在extends数组中加入类型校验相关的推荐规则集，里面已经内置了空值访问检测规则，能直接抛出和TS原生一致的Object is possibly 'null'告警：

"extends": [
  "eslint:recommended",
  "plugin:react/recommended",
  "plugin:@typescript-eslint/recommended",
  "plugin:@typescript-eslint/recommended-requiring-type-checking",
  "prettier"
]

如果不需要该规则集里的其他规则，也可以单独开启空值校验相关规则：

"rules": {
  "@typescript-eslint/no-inferrable-types": "off",
  "@typescript-eslint/no-unnecessary-condition": ["error", {
    "allowConstantLoopConditions": true
  }],
  "@typescript-eslint/strict-boolean-expressions": ["error", {
    "allowNullableObject": false,
    "allowNullableString": false,
    "allowNullableNumber": false
  }]
}

步骤3（可选）：仅对单元测试文件生效规则 #

如果你只需要单元测试文件触发空值告警，不想影响业务代码的校验逻辑，可以用overrides配置单独作用于测试文件：

"overrides": [
  {
    "files": ["**/*.spec.ts", "**/*.spec.tsx"],
    "extends": ["plugin:@typescript-eslint/recommended-requiring-type-checking"]
  }
]

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