如何让tsc生成的JS文件符合ESLint格式规范？

方法1：构建后用ESLint自动修复生成的JS文件 #

这是最直接的方案，在tsc编译完成后，追加ESLint命令修复格式问题：

• 修改package.json的脚本：

  {
    "scripts": {
      "build": "tsc && eslint dist/**/*.js --fix"
    }
  }
  

• 确保你的ESLint配置文件（.eslintrc.js/.eslintrc.json）没有排除JS文件，规则要覆盖缩进、引号、分号等你关心的格式项。

方法2：配置tsconfig让输出贴近ESLint规则 #

通过TypeScript编译器选项减少格式差异，虽然没法完全覆盖ESLint规则，但能降低后续修复成本：

• 在tsconfig.json中添加这些配置（根据你的ESLint规则调整）：

  {
    "compilerOptions": {
      "indentStyle": "space",
      "indentSize": 2,
      "quoteStyle": "single",
      "semicolons": "always",
      "bracketSpacing": true,
      "arrowParentheses": "always"
    }
  }
  

方法3：Prettier + ESLint组合统一格式 #

如果项目用了Prettier，可先让Prettier格式化JS文件，再用ESLint补全规则：

• 更新构建脚本：

  {
    "scripts": {
      "build": "tsc && prettier --write dist/**/*.js && eslint dist/**/*.js --fix"
    }
  }
  

• 记得安装eslint-config-prettier和eslint-plugin-prettier，避免Prettier和ESLint的规则冲突。

方法4：集成构建工具链处理格式 #

用Webpack、Vite这类工具时，可以集成ESLint插件，在打包过程中直接处理输出文件的格式：

• 比如Webpack可以用eslint-webpack-plugin，配置插件时指定处理输出目录的JS文件；
• Vite可通过@rollup/plugin-eslint扩展，在构建阶段注入格式校验和修复逻辑。

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