How to format selected code using vscode and Prettier?

Question

I have add Prettier in my VScode but I want to format my code only when I highlight my code, say

let a = [1, 2, 3,          4]; (line1)

let b = [          1,2 ,3,4]; (line3)

how can I just format line 1 when I highlight line 1 only and the result should be

let a = [1, 2, 3, 4]; (line1)

let b = [          1,2 ,3,4]; (line3)

thanks

UPDATE: I know we can format the code in a code block. But what I want to do is

const test = (a, b,          c) => {  (line 1)
  console.log("show a",          a);   (line 2)
  console.log("show b",     b);   (line 3)
}

If I highlight b, c in line 1 and format it. It only formats the code in line 1 but not 2 and 3

futher update: this is my vscode shortcut setting

when I highlight like this,

it becomes like that

Answer 1

I dont know the solution yet, but there are some info that may help.

• Basically, there are something wrong with the linter. ( https://github.com/prettier/prettier-vscode/issues/137 )

  And your may fix it by checking out this https://prettier.io/docs/en/integrating-with-linters.html ,

• I dont know how & didnt try. cuz:: [[
  • looks complicated (download many things) & mess up with the project structure
  • may not even work
  • some info I have no knowledge of / incompatible with my understanding
  • dont know what will happen to my linters
  • dont know what is the next step

[]

https://github.com/prettier/prettier-vscode/issues/134

[]

No, the issue is with prettier-eslint not supporting range formatting.

...

I would suggest switching to the recommended approach of integrating ESLint and Prettier

https://github.com/prettier/prettier-vscode/issues/137

[]

let Prettier do the formatting and configure the linter to not deal with formatting rules. You can find instructions on how to configure each linter on the Prettier docs site.

...

For details refer to the Prettier documentation.

https://github.com/prettier/prettier-vscode#linter-integration

[]

Linters usually contain not only code quality rules, but also stylistic rules. Most stylistic rules are unnecessary when using Prettier, but worse – they might conflict with Prettier! Use Prettier for code formatting concerns, and linters for code-quality concerns, as outlined in Prettier vs. Linters.

Luckily it’s easy to turn off rules that conflict or are unnecessary with Prettier, by using these pre-made configs:

• eslint-config-prettier

• stylelint-config-prettier

https://prettier.io/docs/en/integrating-with-linters.html

[]

I would like to format my code with prettier, then apply all eslint fixes. Previously, this could be achieved by setting prettier.eslintIntegration to true. Now, the extension say that this option is [DEPRECTAED] and prettier-eslint should be used instead. However, it's not clear how to use prettier-eslint in vscode.

https://github.com/prettier/prettier-vscode/issues/999

---

Actually, "format only selected code" is working on my end, I didnt do any fancy extra config.

• What you need to pay attention to is the "syntax tree"

  -- ie: dont blindly select across the scope (the bracket {}).

  @eg::

  • given

    function test() {
      let a = [1, 2, 3,          4];
    
      let b = [          1,2 ,3,4]; // select only this line
    
      return false
    }
    

  • if you only select::

    let b = [          1,2 ,3,4];
    

    then press ctrl+k, ctrl+f

    everything is fine

  • if you select across the bracket (the } for function scope)::

      let b = [          1,2 ,3,4]; // select only this line
    
      return false
    }
    

    then press ctrl+k, ctrl+f

    the whole thing in the bracket (the } for function scope) gets formatted

• the "syntax tree" in a class is a bit weird.

  -- ie: if you select the WHOLE function AA & format it -- codes inside another function BB will also get formatted...

  you may need to apply // prettier-ignore somewhere to prevent formatting

• prettier-ignore

  A JavaScript comment of // prettier-ignore will exclude the next node in the abstract syntax tree from formatting.

  https://prettier.io/docs/en/ignore.html

  • (note, it seems there is no ending tag for // prettier-ignore for Javascript (at current stage of Prettier))

  • for the meaning of a "syntax tree", see ex below

    • if you place it above the code line
      seems it applies to the item (the code) (-- which is a "syntax tree node") directly below ((empty lines not counted for)) the // prettier-ignore line
      -- eg-below: console.log("show a", a);, and ends there.

    • if you place it behind the code line (inline)
      seems it applies to the inline code only

• @for_your_case-do_this:

  const test = (a, b,          c) => {  
    // prettier-ignore
    console.log("show a",          a);  
    // prettier-ignore
    console.log("show b",     b);  
  }
  
  // or
  const test = (a, b,          c) => {  
    console.log("show a",          a); // prettier-ignore
    console.log("show b",     b); // prettier-ignore
  }
  

Answer 2

Select the code or leave the cursor in the row you want to format and press Ctrl + K Ctrl + F.