SWC在VSCode中需手动配置tasks.json或npm script才能触发编译,不自动监听文件;其配置.swcrc与tsconfig.json不兼容,须按swc规范设置jsx、target等字段;必须显式启用sourceMaps并校准路径,且swc完全不读取tsconfig.json。

SWC在VSCode里不自动触发编译,因为根本没配构建任务
VSCode默认不运行任何编译器,swc不会像WebStorm那样自动监听文件。你改了.ts文件,没手动执行命令或配置任务,就永远看不到.js输出。
- 必须显式配置
tasks.json,把swc命令包装成VSCode可识别的构建任务 -
swc本身不带watch模式(v1.3.104起支持--watch,但VSCode集成仍需手动绑定) - 别指望“安装插件就自动生效”——目前没有成熟插件能接管整个TS→JS流程,
vscode-swc等仅提供语法高亮或简单右键编译 - 推荐用
swc-cli配合npm script:在package.json里加"build": "swc src -d lib --config-file .swcrc",再让VSCode调用它
swc编译报错“Unknown option 'jsx'”,其实是.swcrc里用了tsc专属配置
swc和tsc配置不兼容。.swcrc不是tsconfig.json的替代品,很多字段名、值类型、默认行为都不同,硬搬会直接失败。
-
jsx在.swcrc里要写成"jsc": { "transform": { "react": { "jsx": "react-jsx" } } },不是"jsx": "preserve" -
target对应jsc.target,且只接受"es2015"这类字符串,不支持"ES2020"或"latest" -
module字段在swc中由jsc.parser.syntax和jsc.transform.legacyDecorator等分散控制,不能直接照抄 - 最稳做法:删掉
.swcrc,用CLI参数驱动,比如swc src -d lib --jsc.target es2020 --jsc.parser.syntax typescript
VSCode调试时断点进不到源码,因为swc没生成source map或路径不对
swc默认不生成.map文件,即使开了--source-maps,VSCode也可能找不到sources路径,导致断点失效。
- 必须加
--source-maps inline(内联)或--source-maps(单独文件),否则debugger和断点全失灵 - 如果用
--source-maps,确保.map文件和.js同目录,且sources字段指向的是../src/xxx.ts这种相对路径(不是绝对路径或src/xxx.ts) - VSCode的
launch.json里sourceMaps设为true,并检查outFiles是否匹配lib/**/*.js - 常见坑:
swc生成的sources默认是["index.ts"],但实际文件在src/index.ts,需手动加"sourceRoot": "../src"到.swcrc的sourceMaps配置里
为什么改了tsconfig.json,swc却完全不认
swc根本不读tsconfig.json。它只认.swcrc或CLI参数。哪怕你把strict设成true,swc也不会做类型检查,也不会按compilerOptions.paths解析模块。
-
swc只做转译(transpilation),不做类型检查——那是tsc --noEmit或typescript-eslint的事 - 路径别名(
paths)需用@swc/jest或swc-loader配合tsconfig-paths插件,纯swc-cli不支持 - 装饰器(
decoratorMetadata)、实验性语法(useDefineForClassFields)等,必须显式在.swcrc里开对应开关,例如"jsc": { "transform": { "decoratorMetadata": true } } - 想保留
tsc的类型校验能力?只能双轨走:swc负责快编译,tsc --noEmit在保存时校验,用VSCode的typescript.preferences.disableSuggestions关掉冗余提示


















