VSCode红线源于TypeScript语言服务或ESLint等工具，非Babel运行所致；需配置jsconfig.json/tsconfig.json启用实验性语法、ESLint改用@babel/eslint-parser解析器，并切换为工作区TypeScript版本后重启TS Server。
VSCode 本身不运行 Babel，也**不会**因为装了 Babel 就自动消除红线——红线来自 TypeScript 语言服务或 ESLint 等静态检查工具，不是语法解析器报的错。要让红线消失，得让这些工具“认出”你写的实验性语法。
为什么装了 Babel 还是满屏红线
很多人执行了 npm install @babel/core @babel/preset-env @babel/plugin-proposal-class-properties --save-dev、写了 .babelrc，结果 VSCode 里 class Foo { bar = 1; } 还是标红。这是因为：
- Babel 只在构建/编译时起作用（比如
npx babel或 Webpack 里调用），不影响编辑器实时语法检查 - VSCode 默认用 TypeScript 语言服务做 JS/TS 文件的语义分析，而 TS 默认不启用实验性提案（如类属性、装饰器）
- ESLint 若没配对的 parser 和 plugin，也会把
?.、??、using当成非法语法
让 TypeScript 语言服务识别实验性语法
这是解决 JS 文件中类属性、私有字段、装饰器等红线最直接的方式。关键不是改 Babel，而是告诉 TS：“请按最新标准解析 JS”。
- 在项目根目录添加或修改
jsconfig.json（纯 JS 项目）或tsconfig.json（TS 项目） - 确保
"checkJs": true（JS 项目需要）或"allowJs": true（TS 项目若混用 JS） - 加上实验性支持选项：
"experimentalDecorators": true、"useDefineForClassFields": true（对应类字段赋值行为） - 如果用了
static block或array.at()等新特性，需设"target": "ES2022"或更高
示例 jsconfig.json：
{
"compilerOptions": {
"checkJs": true,
"allowJs": true,
"target": "ES2022",
"experimentalDecorators": true,
"useDefineForClassFields": true,
"moduleDetection": "force"
},
"include": ["**/*.js"],
"exclude": ["node_modules"]
}
ESLint 配合 Babel 解析器处理提案语法
如果你开了 ESLint（比如通过 eslint.enable 或插件），它默认用 espree 解析器，根本不认识 class A { #x = 1; }。必须换 Babel 解析器。
- 安装：
npm install eslint @babel/eslint-parser @babel/plugin-proposal-class-properties @babel/plugin-proposal-private-methods --save-dev - 在
.eslintrc.cjs中指定解析器：parser: "@babel/eslint-parser" - 启用对应插件：
plugins: ["@babel"]，并在rules下开对应规则（如"@babel/new-cap": "off"） - 重要：必须配置
parserOptions.requireConfigFile = false，否则它会强行找babel.config.js
常见漏掉的点：@babel/eslint-parser 不会自动读取你的 .babelrc，你要显式传 parserOptions.plugins 或确保 Babel 配置文件存在且被识别。
别忽略 VSCode 的 TypeScript 版本切换
即使配置全对，VSCode 右下角显示的是 “TypeScript v5.3.3 (Workspace)”，但你点开发现其实是内置版本——红线就不会退。必须手动切。
- 点击右下角 TypeScript 版本号（如 “TypeScript v5.4.5”）
- 选 “Use Workspace Version”（不是 “Use VS Code’s Version”）
- 确认项目里已装
typescript：npm install typescript --save-dev - 改完后按
Ctrl+Shift+P→ 输入并执行 “TypeScript: Restart TS Server”
这一步失败，前面所有配置都白搭。很多人的红线就卡在这儿——以为配好了，其实 TS Server 还在用老版本跑。
