Using '#' pound sign for 'private' properties in a .js file causes syntax issues to not be highlighted

[SamuelBanya]

Hello,

I am using 'js2-mode' which is found in this block of my config:

(use-package js2-mode
  :ensure t
  :custom
  (js-indent-level 2)
  (js2-basic-offset 2)
  :init
  (add-to-list 'auto-mode-alist '("\\.js\\'" . js2-mode)))

Problem:

• If I attempt to use a private method '#', I don't get any syntax highlighting
• Also, it causes later downstream weirdness within the same file with LSP mode

Question:

• Is there any workaround to ACTUALLY using private methods with '#' prefixed to a method?
• I ask this because I took a look at the issues and it appears that steps were tried to be done to implement this to 'fix' it but it still doesn't really work at all.
• Is there any specific git branch that contains the fix for this as well?

My Affected Environment:

• MacOS Monterey 12.4
• Emacs Version 28.1 (Macports via Homebrew port) which was installed via these commands:

  brew tap railwaycat/emacsmacport
  brew install --cask emacs-mac

• My Emacs config:
• https://github.com/SamuelBanya/SamsEmacs/blob/main/configuration.org

[SamuelBanya]

Should I use the local hack version provided in this comment? https://github.com/mooz/js2-mode/issues/537#issuecomment-578446942

I ask because I need to have a solid JS config for Emacs since I edit JS stuff all the time.

[SamuelBanya]

I tried using this as a hacky workaround but I'm still getting weird issues in LSP mode like '#radius is declared but its value is never read': https://www.draketo.de/software/emacs-javascript.html

Related config change I tried to add:

(use-package js2-mode
  :ensure t
  :custom
  (js-indent-level 2)
  (js2-basic-offset 2)
  :init
  (add-to-list 'auto-mode-alist '("\\.js\\'" . js2-mode))
  :config
  ;; Patch in basic private field support since it clearly doesn't work at all
  ;; This also has the super annoying side effect of causing tons of syntax issues
  ;; afterwards, so this HAS to be patched in order to use private methods
  ;; Used this blog post as a basis for this:
  ;; https://draketo.de/software/emacs-javascript.html
  (advice-add #'js2-identifier-part-p
              :after-until
              (lambda (c) (eq c ?#))))

Related code block that results in weirdness when even trying to use private methods as a basic example:

class Bird {
  #phrase;

  constructor(name) {
    this.name = name;
  }

  set phrase(phrase) {
    this.#phrase = phrase;
  }

  get speak() {
    return `${this.name} says ${this.#phrase || "Squawk"}`;
  }
}

class Circle {
  #radius;

  constructor(radius) {
    this.radius = radius;
  }

  get diameter(radius) {
    return this.radius * this.radius;
  }

  get circumference(radius) {
    return 2 * Math.pi * this.radius;
  }

  get area(radius) {
  }

  set diameter(radius) {
  }

  set circumference(radius) {
  }

  set area(radius) {
    return area = Math.sqrt(radius);
  }

}

const daffy = new Bird("Daffy");
console.log(`daffy.speak: ${daffy.speak}`);
daffy.phrase = "it's rabbit season!";
console.log(`daffy.speak: ${daffy.speak}`);

[UwUnyaa]

If you use LSP mode, is there a reason to still use JS2?

[SamuelBanya]

If I am understanding you correctly, I should just disable LSP and see if 'js2-mode' is causing the problem?

[UwUnyaa]

No, the other way around. JS2 provides error checking for js-mode, but things like syntax highlighting and indentation aren't handled by itself.

[dgutov]

Hi! Which version of js2-mode are you using?

This feature should work since https://github.com/mooz/js2-mode/issues/537, and indeed your example in https://github.com/mooz/js2-mode/issues/588#issuecomment-1146869291 highlights fine for me. Without extra configuration.