VSCode下、单独.js文件中使用装饰器（Decorator）

环境

• VSCode v1.57.1
• node v16.3.0
• babel v7.x

代码提示报错及消除

sample.js

@testable
class MyClass {}

function testable(target) {
  target.isTestable = true;
}
复制代码

报错信息

消除方法一

打开Settings → 搜索“experimentalDecorators” → 勾选下图选项

消除方法二

打开 settings.json → 添加如下配置：

"js/ts.implicitProjectConfig.experimentalDecorators": true
复制代码

以上方法只是消除了VSCode编辑器的报错提示，目前阶段直接使用 node sample.js 运行代码，会报错！

运行代码

安装

package.json

"devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/node": "^7.14.7",
    "@babel/plugin-proposal-decorators": "^7.14.5",
    "@babel/preset-env": "^7.14.7"
},
复制代码

配置

.babelrc

{
  "presets": ["@babel/env"],
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ]
  ]
}
复制代码

运行

npx babel-node .\sample.js
复制代码

过程中遇到的一些报错提示

报错一

Support for the experimental syntax 'decorators-legacy' isn't currently enabled
复制代码

【原因】：没安装babel下 decorators相关插件

【解决】：安装、配置 decorators-legacy

报错二

The decorators plugin requires a 'decoratorsBeforeExport' option, whose value must be a boolean. If you want to use the legacy decorators semantics, you can set the 'legacy: true' option. 
复制代码

【原因】配置项格式有误

【解决】decorators 的配置都要放在内数组中