如何配置VS Code，让.tsx文件自动生成导入时使用.js而非.jsx

架构老林

2026-7-7

实现VS Code自动生成带.js后缀的TSX文件导入

要让VS Code在foo.tsx中导入bar.tsx时自动生成import Bat from './bar.js';这样的语句，需要同时配置TypeScript编译选项和VS Code的导入偏好设置，具体步骤如下：

1. 配置`tsconfig.json`

在项目根目录的tsconfig.json中，调整以下编译选项，确保TypeScript能正确解析带.js后缀的TSX文件：

{
  "compilerOptions": {
    // 使用支持ES模块解析的模式，bundler适配Vite、Webpack等打包工具，node16/nodenext适配Node.js ES模块规范
    "moduleResolution": "bundler",
    "module": "ESNext",
    "target": "ES2020",
    // 启用React JSX语法支持
    "jsx": "react-jsx",
    // 禁止导入时使用.ts/.tsx后缀
    "allowImportingTsExtensions": false,
    "resolveJsonModule": true,
    "strict": true
  },
  "include": ["src/**/*"]
}

2. 配置VS Code导入偏好

打开VS Code的设置（快捷键Ctrl+,），切换到「工作区设置」（避免影响全局配置），添加或修改以下选项：

{
  // 控制TypeScript文件自动导入的后缀为.js
  "typescript.preferences.importModuleSpecifierEnding": "js",
  // 同步JavaScript文件的导入后缀设置（可选，确保一致性）
  "javascript.preferences.importModuleSpecifierEnding": "js",
  // 可选：设置导入语句的引号风格，按个人习惯选择single/double
  "typescript.preferences.quoteStyle": "single"
}