TS编译生成的.js无法设只读，常误改编译文件求可行方案

之前有人提议让tsc自动将编译生成的JS文件标记为只读，但该方案被判定不可行。我作为经常误改编译产物而非TS源文件的开发者，受限于现有项目结构（编译后的.js与.ts同目录，且存在可编辑的原生JS文件），试过文件颜色区分、VS Code全局只读功能都没用，想找可行的解决办法。我的项目多为Chrome扩展或静态网页，目前未打包，直接使用编译后的JS文件，愿意尝试构建工具但经验有限。

以下是几个实用的解决选项：

1. 编译后自动标记只读脚本 #

写一个简单脚本，在tsc编译完成后自动执行，给所有和.ts配对的.js文件设置只读属性，跳过原生JS文件：

• Windows环境：使用attrib +r命令，Node.js脚本示例：

  const fs = require('fs');
  const path = require('path');
  const { execSync } = require('child_process');
  
  function traverseDir(dir) {
    const files = fs.readdirSync(dir);
    files.forEach(file => {
      const fullPath = path.join(dir, file);
      const stats = fs.statSync(fullPath);
      if (stats.isDirectory()) {
        traverseDir(fullPath);
      } else if (file.endsWith('.js')) {
        const tsPath = fullPath.replace('.js', '.ts');
        if (fs.existsSync(tsPath)) {
          execSync(`attrib +r "${fullPath}"`);
        }
      }
    });
  }
  
  traverseDir('.');
  

• macOS/Linux环境：将上述脚本中的execSync命令替换为execSync(chmod -w "${fullPath}")
• 把脚本加到package.json的scripts里，实现编译后自动执行：

  "scripts": {
    "build": "tsc",
    "postbuild": "node ./mark-readonly.js"
  }
  

2. VS Code自定义区分规则 #

通过VS Code配置，给编译生成的JS文件单独设置图标或背景色，和原生JS明确区分：

• 自定义图标：安装Material Icon Theme插件后，在.vscode/settings.json添加规则：

  "material-icon-theme.files.associations": {
    "**/*.js": {
      "when": "exists:${fileDirname}/${fileBasenameNoExtension}.ts",
      "icon": "javascript-off"
    }
  }
  

  这样和TS配对的JS文件会显示灰色禁用图标，一眼就能识别是编译产物。
• 编辑器背景色区分：在.vscode/settings.json添加配置：

  "workbench.colorCustomizations": {
    "editor.background": {
      "when": "resourceExtname == .js && exists:${fileDirname}/${fileBasenameNoExtension}.ts",
      "#f5f5f5": "#f0f0f0"
    }
  }
  

  编译生成的JS文件编辑器背景会稍暗，直观提醒这是不可编辑的产物。

3. 隐藏编译生成的JS文件 #

在VS Code的.vscode/settings.json里设置排除规则，默认不显示和TS配对的JS文件：

"files.exclude": {
  "**/*.js": {
    "when": "exists:${fileDirname}/${fileBasenameNoExtension}.ts"
  }
}

平时资源管理器里只显示TS源文件和原生JS文件，从根源减少误改可能。如果需要查看编译产物，可临时右键选择"显示已排除的文件"。

4. 用简单构建工具分离产物（可选） #

如果愿意微调项目引用路径，可以用tsc的outDir配置把编译产物输出到单独目录（比如dist）：

• 修改tsconfig.json：

  "compilerOptions": {
    "outDir": "./dist",
    "rootDir": "./"
  }
  

• 调整项目里的引用路径（比如Chrome扩展的manifest.json、HTML的<script>标签）指向dist目录下的JS文件，原生JS文件保留在原目录不受影响。

这种方式能彻底把源文件和产物分开，从根本解决误改问题。

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