ESLint errors and warnings in Ace Editor for modern JS syntax (optional chaining, nullish coalescing, logical assignment operators)

[PrathamSingh]

Description

When using react-ace with the JavaScript mode, I’m seeing ESLint error/warning markers in the editor for valid modern ECMAScript syntax such as:

• Optional chaining (?.)
• Nullish coalescing (??)
• Logical assignment operators (&&=, ||=, ??=)

The code runs fine in my environment, but Ace Editor still shows red error markers and yellow warning markers as if these were invalid syntax.

This makes the editor misleading for developers, since the syntax is correct and supported in modern runtimes.

Is there a way to disable these specific ESLint checks/warnings in Ace Editor so that valid code isn’t flagged?

---

Example Code

if (mode === 'javascript' && editor?.session?.$worker) {
  editor.session.$worker.send('changeOptions', [{
    asi: true,
    debug: true,
    eqnull: true,
    expr: true,
    funcscope: true,
    lastsemic: true,
    loopfunc: true,
    notypeof: true,
    noyield: true,
    proto: true,
    supernew: true,
    validthis: true,
    withstmt: true,
  }]);
}

<AceEditor
  wrapEnabled
  markers={markers}
  value={valueAsString}
  mode={mode}
  readOnly={readOnly}
  showPrintMargin={false}
  showGutter={showGutter}
  theme={theme}
  onLoad={handleLoad}
  onChange={onChange}
  onSelectionChange={handleSelectionChange}
  highlightActiveLine={highlightActiveLine}
  setOptions={{
    useWorker,
    wrap,
    showInvisibles,
    showLineNumbers,
    displayIndentGuides,
    tabSize: 2,
    fontFamily: "'Fira Code', monospace",
  }}
  editorProps={editorProp}
/>

JS Example :

// ===== Optional chaining (?.), Nullish coalescing (??) =====
const user = { profile: { name: "Ada" } };
const city = user.profile?.address?.city ?? "Unknown City";
console.log("city:", city); // "Unknown City"

// ===== Logical assignment (??=, &&=, ||=) =====
let config = { title: null, enabled: false, cache: null };
config.title ??= "Untitled";         // sets because null
config.enabled &&= true;             // stays false
config.cache ||= new Map();          // sets because null
console.log("config:", config);

// ===== String.prototype.replaceAll & padStart =====
const s = "foo_bar_foo";
console.log("replaceAll:", s.replaceAll("foo", "baz")); // "baz_bar_baz"
console.log("padStart:", "42".padStart(5, "0"));        // "00042"

// ===== Object.hasOwn =====
const obj = Object.create({ inherited: 1 });
obj.own = 2;
console.log("Object.hasOwn own:", Object.hasOwn(obj, "own"));           // true
console.log("Object.hasOwn inherited:", Object.hasOwn(obj, "inherited"));// false

// ===== Array goodies =====
const arr = [3, 1, 2, 1, 4];

console.log("find (<3):", arr.find(n => n < 3));        // 1
console.log("toSorted:", arr.toSorted());               // [1,1,2,3,4]
console.log("toReversed:", arr.toReversed());           // [4,1,2,1,3]
console.log("toSpliced:", arr.toSpliced(1, 2, 9, 9));   // [3,9,9,1,4]
console.log("with (0->99):", arr.with(0, 99));          // [99,1,2,1,4]
console.log("findLast (<3):", arr.findLast(n => n < 3));// 2
console.log("findLastIndex (<3):", arr.findLastIndex(n => n < 3)); // 2
console.log("at(-1):", arr.at(-1));                     // 4
console.log("original arr still:", arr);                 // [3,1,2,1,4]

// ===== Object.groupBy / Map.groupBy =====
const words = ["apple", "apricot", "banana", "blueberry", "cherry"];
const byFirstLetterObj = Object.groupBy(words, w => w[0]);
console.log("Object.groupBy:", byFirstLetterObj);
// { a: [...], b: [...], c: [...] }

const nums = [1, 2, 3, 4, 5, 6];
const byParityMap = Map.groupBy(nums, n => (n % 2 ? "odd" : "even"));
console.log("Map.groupBy even:", byParityMap.get("even")); // [2,4,6]
console.log("Map.groupBy odd:", byParityMap.get("odd"));   // [1,3,5]

// ===== RegExp /v flag =====
const consonants = /[[a-z]--[aeiou]]/v;
console.log("RegExp /v (b):", consonants.test("b")); // true
console.log("RegExp /v (a):", consonants.test("a")); // false