13

I have this issue for a while. We have ESlint and it forbids us to add space before self-closing JSX-tag, but when I format .jsx file within VS Code it inserts it. How may I disable it?

There is screenshot with the problem:

enter image description here

Thanks!

Jan P
  • 786
  • 6
  • 27
Nikita Shchypyplov
  • 1,090
  • 1
  • 9
  • 18
  • 1
    Use `eslint-disable-next-line` or just `eslint-disable`? – najayaz Dec 21 '18 at 16:35
  • 1
    Disabling the line to just get around this warning isn't good advice in my opinion, the rule is hopefully there for a reason, otherwise remove it from your linters config. What are you using to format your code? Just code or something like Prettier? – Jan P Dec 21 '18 at 17:21
  • @JanP Just code. Also I can fix this with eslint command, but I would like to do it by default with VS Code. – Nikita Shchypyplov Dec 21 '18 at 17:54
  • I assume you have "javascript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": false in your settings - that is the default. – Mark Dec 21 '18 at 20:20

3 Answers3

2

To my knowledge there is no such formatting option within the javascript.format options. But you can always look into extensions for this kind of job.

A lot of people use Prettier these days, but it is opinionated and there is no guarantee it will work well with all your ESLint options. It has an ESLint integrationn though, so maybe you want to have a look at this.

You can also have a look at react-beautify, which seems to have an option for this. But I am not familiar with this extension.

Jan P
  • 786
  • 6
  • 27
1

Use language mode javascriptreact, instead of javascript

enter image description here

Debashis Chowdhury
  • 355
  • 3
  • 11
0

In VS Code Settings search for "prettier" Default Formatter and change it to Prettier ESLint (maybe you will need to install it i dont remember)

and checkout for eslint rule "react/jsx-tag-spacing"

check out screenshot

JKL
  • 1
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 14 '22 at 06:45