JS代码在VS Code/Node运行正常但在线IDE报语法错误的原因

编写的测试JavaScript代码如下：

class Test {
  name = 'David';
  static var1 = 'John';
  printName() {
    console.log(this.name);
  }
  static staticMethod() {
    console.log('This is a static method');
  }
}
const test = new Test();
test.printName();
Test.staticMethod();
console.log(Test.var1);

这段代码在搭载Live Server插件的VS Code环境、本地Node.js环境中都能正常运行，输出结果符合预期，但放到JSFiddle、Programiz等在线IDE里运行就会触发语法错误。

这个兼容性问题完全是JavaScript类字段（Class Fields）语法的版本支持差异导致的：

• 代码里直接在类体中写name = 'David'定义实例属性、static var1 = 'John'定义静态属性的写法，是ES2022（ES13）才正式写入ECMAScript标准的特性。在ES2022之前的版本规范中，类的实例属性必须写在constructor构造函数内，通过this.属性名 = 值的形式定义；静态属性也只能在类声明完成后，通过类名.属性名 = 值的方式手动挂载，根本不支持直接在类体里写属性赋值的语句。
• 本地的Node.js、VS Code Live Server调用的是本机安装的高版本浏览器内核，这些高版本运行时早就完成了ES2022特性的原生适配，所以跑这段代码不会有任何问题。
• JSFiddle、Programiz这类在线IDE如果默认配置的是低版本JavaScript解析规则（比如默认按ES6/ES2015规范做语法校验）、或者内置的JS运行环境版本过旧没有适配ES2022特性，遇到类体内直接定义字段的写法，就会直接判定为语法非法抛出错误。
• 要在这类在线平台跑通原代码，要么去平台设置里把JavaScript解析版本切换到支持ES2022/最新ECMAScript规范的选项，要么把代码改成向下兼容旧规范的写法：

class Test {
  constructor() {
    this.name = 'David';
  }
  printName() {
    console.log(this.name);
  }
  static staticMethod() {
    console.log('This is a static method');
  }
}
Test.var1 = 'John';
const test = new Test();
test.printName();
Test.staticMethod();
console.log(Test.var1);

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