Stop Visual Studio Code From Automatically Adding Semicolons In .vue Files

Question

I use Visual Studio Code with Vetur extension, when I right click on my .vue file and chose "Format Document" option Visual Studio Code automatically add the semicolons that intentionally removed them.

How do I stop this?

I set autoformat to false, but that removes all autoformatting... :'-( `"editor.formatOnSave": false`. In Vetur, autoformatting didn't work that well anyway. — Kokodoko, Jan 12 '18 at 17:57
@Kokodoko I cant disable the autoformatting, I always use it even if it is not so good. — Engr.MTH, Jan 12 '18 at 21:26

score 44 · Accepted Answer · edited Jun 18 '18 at 09:39

44

Put this in your user settings and it won't change your semis:

"vetur.format.defaultFormatter.js": "vscode-typescript",

edited Jun 18 '18 at 09:39

wscourge

10,657
14
59
80

answered Jun 18 '18 at 09:22

KM3

474
5
2

1

This one has been irritating me for a while, thanks a lot! – Evertvdw Dec 12 '18 at 09:59
I suggest also `"prettier.eslintIntegration": true,` and ` "prettier.semi": false` – realtebo Jul 28 '19 at 06:57

score 25 · Answer 2 · edited Feb 08 '19 at 02:04

25

Forget the earlier answer, gives me runtime issues.

Install Prettier- code formatter extension and disable the addition of semi colons by unchecking the Prettier:Semi as in the screenshot below

Note : Dont forget to reload your vs code after you install the extension and before u do the config changes

edited Feb 08 '19 at 02:04

Chris Gong

8,031
4
30
51

answered Feb 08 '19 at 01:31

Gurudutt Shenoy

297
4
7

score 23 · Answer 3 · answered Oct 20 '20 at 05:45

23

Adding .prettierrc file in project root worked for me with following settings:

{
  "semi": false,
  "singleQuote": true
}

Changing prettier settings in VSCode Workspace did not work in my case.

answered Oct 20 '20 at 05:45

Sainath A

610
9
10

this is the ONLY setting working in cjs modules. None of the above will do the trick. I started to go crazy. – tonjo Feb 12 '21 at 13:50
If you want it to work in all cases, you have to add `"jsxSingleQuote": true` as well. `"singleQuote": true` alone is not enough. – Sebastian Voráč MSc. Feb 16 '23 at 16:52

score 12 · Answer 4 · answered Feb 22 '18 at 15:05

12

You can go to VSCode settings and search for the prettier section.... there's an option for turning off adding semicolons....

Or, just add this line to your custom settings in VSCode:

     "prettier.semi": false

I was trying to find a way to do this in the eslint config, and have vs code pick up whatever settings are in the eslint settings... but haven't found it yet. In the meantime, the above works for me...

answered Feb 22 '18 at 15:05

Sean Rasmussen

313
4
15

1

Thank you for your answer, although when I add `"prettier.semi": false` to the custom settings it tells me `"Unknown configuration setting"` but what happening know is, it removes the currently added semicolons! and I don't want it to add the missing ones or remove the existing one. I want to disable this automatic behavior entirely. – Engr.MTH Feb 24 '18 at 15:06
2

I guess it depends on which extensions you have.... I have prettier installed so it works... You can search the settings for "semi" and see if you can find something... – Sean Rasmussen Feb 25 '18 at 03:39
I don't have a formatting extension installed, also when I search for "semi" in the settings cant find any result contains "semi" in it. – Engr.MTH Feb 25 '18 at 05:47
Was anyone able to fix this bug? – Developer Apr 27 '18 at 20:27
Can you make it more clear in your answer that you are suggesting the OP first install and use the Prettier add-on? – Michael Fulton Feb 21 '19 at 19:52

score 10 · Answer 5 · answered Feb 09 '20 at 09:37

10

go to settings

Go to Text Editor's Settings

"javascript.format.semicolons": "remove",
"typescript.format.semicolons": "remove",
"typescriptHero.imports.insertSemicolons": false, 
"typescript.preferences.quoteStyle": "single",
"javascript.preferences.quoteStyle": "single",

Editor

YouTube Video

answered Feb 09 '20 at 09:37

Rashid Iqbal

1,123
13
13

Hi could you help me here? I tried your solution and I still get missing semi colon warnings: https://stackoverflow.com/questions/72779221/how-to-add-prettier-config-into-eslint-config – Leon Gaban Jun 27 '22 at 23:49

score 7 · Answer 6 · answered Nov 28 '19 at 07:07

7

You can add in your VSCode settings.json

"vetur.format.defaultFormatterOptions": {
    "prettier": {
        "semi": false
    }
},

answered Nov 28 '19 at 07:07

jojo

71
2
4

Hi could you help me here? I tried your solution and I still get missing semi colon warnings: https://stackoverflow.com/questions/72779221/how-to-add-prettier-config-into-eslint-config – Leon Gaban Jun 27 '22 at 23:49

score 2 · Answer 7 · answered Nov 07 '18 at 07:15

2

May be, you have different extensions installed where the usage of semicolons (;) is defined. Try to go to VSCode settings and search for "semicolon". All settings regarding the usage of semicolon will be shown and you can configure it as you like.

answered Nov 07 '18 at 07:15

Michael

416
3
10

score 1 · Answer 8 · answered Feb 17 '21 at 14:33

1

This is what worked for me:

"typescript.format.semicolons": "remove"

answered Feb 17 '21 at 14:33

Joel Wenzel

9
1
2

score 0 · Answer 9 · answered Apr 25 '19 at 09:18

0

Add this line to your custom settings in VSCode (helps with js files):

"autoimport.useSemiColon": false

answered Apr 25 '19 at 09:18

Amine Hammou

21
4

score 0 · Answer 10 · answered Jul 19 '19 at 19:15

0

setting organizedimports to false worked for me

"editor.codeActionsOnSave": {
"source.organizeImports": false
},

answered Jul 19 '19 at 19:15

PhillipMwaniki

1,166
9
14

score 0 · Answer 11 · answered Apr 06 '23 at 12:43

Seems many formatters can make this stupid work. Maybe the ideas in other question works, maybe they don't work. This depends additionaly on the fact, which formatter is in use.

So, make rightclick in the code and choose "Format document with.." and then choose "Configure default formatter..". In my case (bu I am not sure about my Code state because I already made some attempts mentioned on this Stackoverflow page): Prettier made the problem, while Vetur and Volar worked well (no semicolon change).

score -3 · Answer 12 · edited Jun 09 '21 at 06:41

-3

Easiest fix is go to "Settings" in vs code, Search for ";"

In the search result that follows, remove ";" as demonstrated in the below screenshots.

Before the change:

After the change:

edited Jun 09 '21 at 06:41

Majid Hajibaba

3,105
6
23
55

answered Feb 08 '19 at 01:14

Gurudutt Shenoy

297
4
7

the links are dead – yerlilbilgin Oct 09 '19 at 13:52

Stop Visual Studio Code From Automatically Adding Semicolons In .vue Files

12 Answers12

Linked