fxbois / web-mode

web template editing mode for emacs
https://web-mode.org
GNU General Public License v3.0
1.63k stars 262 forks source link

TSX Comment formats issue #1225

Closed ZelCloud closed 1 year ago

ZelCloud commented 2 years ago

I'm trying to set it so web-mode uses single line comments for regions of JavaScript and TypeScript code inside a tsx or jsx file, while still using the correct comment syntax for the jsx/tsx html portion.

I've tried setting the web-mode-comment-formats variable, but I'm not getting the desired behavior.

If I set web-mode-comment-formats for JavaScript and typescript like so

(setq-default web-mode-comment-formats
    '(
      ("javascript" . "//")
      ("typescript" . "//")
     )
    )

Inside my tsx file, I get this behavior:

function Sample() {

    /* function Test() {
     * console.log("Ipsum");
     * } */ - Wrong syntax should be //

    return (
    <div>
        {/* <p>ipsum</p> */} - Correct comment sytnax here
    </div>
    )
}

If I set the jsx tsx comment in web-mode-comments-formats like so

(setq-default web-mode-comment-formats
    '(
      ("javascript" . "//")
      ("typescript" . "//")
      ("jsx" . "//")
      ("tsx" . "//")
     )
    )

I get this behaviour

function Sample() {

    // function Test() {
    //  console.log("Ipsum");
    // }  - Correct syntax

    return (
    <div>
        // <p>ipsum</p> - completely wrong syntax doesn't work for jsx / tsx
    </div>
    )
}

What I want ideally is

function Sample() {

    // function Test() {
    //  console.log("Ipsum");
    // }  - Correct single line syntax

    return (
    <div>
        {/* <p>ipsum</p> */} - Correct comment sytnax here
    </div>
    )
}

I'm not sure if this is a bug, or if there's something I'm missing with web-mode-comment-formats. Any help would be appreciated.

UwUnyaa commented 2 years ago

// comments inside of JSX aren't just "wrong", they won't work as comments at all.

ZelCloud commented 2 years ago

// comments inside of JSX aren't just "wrong", they won't work as comments at all.

Yes, you're right. That was poor wording on my part the // comment sytnax doesn't work at all for jsx / tsx.

zhaozhemin commented 2 years ago

I've noticed another issue. Commenting out an argument should look like

<Foo
  // bar={baz}
/>

instead of

<Foo
  {/* bar={baz} */}
/>
P233 commented 2 years ago

I also get incorrect indentation of multiple line comments, for example:

function() {
  let a = 1;
  let b = 2;
  let c = 3;
}

when I seleceted the three variables declaration lines and then press M-;, I got:

function() {
  // let a = 1;
// let b = 2;
// let c = 3;
}