TypeScript下ESLint类成员中缀空格规则及配置方法咨询

嘿，我刚好碰到过一模一样的情况！你遇到的问题本质是原生ESLint的space-infix-ops规则没法正确识别TypeScript的类成员初始化语法，得用TypeScript ESLint插件提供的专属规则来搞定。

对应的ESLint规则 #

你需要启用的是@typescript-eslint/space-infix-ops——这是TypeScript ESLint专门为TS语法扩展的规则，能覆盖类成员、接口属性等TS特有的场景，而原生ESLint规则只处理普通变量的情况。

具体配置步骤 #

1. 确保依赖安装
   如果还没装TypeScript ESLint的核心插件和解析器，先通过包管理器安装：

   npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser
   # 或者用yarn
   yarn add --dev @typescript-eslint/eslint-plugin @typescript-eslint/parser
   

2. 修改ESLint配置文件
   打开你的.eslintrc.js（或.eslintrc.json），做以下调整：

   • 指定解析器为@typescript-eslint/parser，让ESLint能识别TS语法
   • 把@typescript-eslint加入插件列表
   • 启用@typescript-eslint/space-infix-ops规则，并设置为error或warn级别

举个完整的.eslintrc.js配置示例：

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended'
  ],
  rules: {
    // 关闭原生规则，避免和TS规则冲突
    'space-infix-ops': 'off',
    // 启用TS专属的中缀空格规则
    '@typescript-eslint/space-infix-ops': ['error', {
      int32Hint: false // 这个选项用于处理`0x1234`这类数字的特殊情况，默认false即可
    }]
  }
};

3. 验证效果
   配置完成后，运行ESLint修复命令：

   npx eslint --fix your-file.ts
   

   你会看到类成员代码class Hello { a=2 }被自动格式化为class Hello { a = 2 }，和普通变量的格式化效果完全一致啦！

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