CODEWITHSUNDEEP
visual-studio-code
gabrielAnzaldo
gabrielAnzaldo

Reputation: 3294

How to exclude file extensions and languages from "format on save" in VSCode?

Currently in VSCode settings you can configure format on save as following: 

"editor.formatOnSave": true

I want to exclude some file extensions, for example only format JavaScript but not HTML files.

Upvotes: 288

Views: 109348

Answers (9)

Jinu Kurian
Jinu Kurian

Reputation: 9406

Using language specific setting can fix the issue but you will lose the code highlighting

"editor.formatOnSave": true
"[javascript]": {
    "editor.formatOnSave": false
}

My solution was to create the file called ".prettierignore" in the root and

type the file name you want to skip the auto formating. Learn more about in https://prettier.io/docs/en/ignore.html

This way, the auto-formatting will be disabled for the specific file and also you won't lose the code-highlighting.

Upvotes: 5

krish111
krish111

Reputation: 151

If anyone could have faced auto-format or format on saving for .env or other setting or environment file and it has a long string that caused an error and you are looking for a solution.

Add the below in your VSCode settings.json:

{
  // other part of your config
  // ...
  "files.associations": {
    ".env": "plaintext"
  },
  "[plaintext]": {
    "editor.formatOnSave": false
  },
}

Upvotes: 13

Zikoat
Zikoat

Reputation: 655

Another way to exclude a file extension is to set the default formatter for the language to Prettier, and then ignore that file extension using .prettierignore. This has the added advantage that you can run the prettier --write . cli command to format your whole project (or just the files in a commit with lint-staged) and ignore the same file as in vscode.

// settings.json

{
  "editor.formatOnSave": true,
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // OR if you want to format ALL types of documents with prettier by default

  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

// .prettierignore

*.html

Upvotes: 3

Welgriv
Welgriv

Reputation: 823

As a workaround, this extension allow to easily toggle formatting by clicking a button on the status bar.

Upvotes: 0

Joost van der Laan
Joost van der Laan

Reputation: 2582

On Mac, use ⌘ + K, S

On Linux, use Ctrl + K S

On Windows, use Ctrl + K Ctrl + Shift + S

To check the VS Code keyboard shortcuts: Ctrl + K, Ctrl + S (yes, almost the same as the above) and search for "save without formatting"

Upvotes: 15

Александр Фишер
Александр Фишер

Reputation: 1507

If you came across this question as I did because you were redirected because of this question VSCode : disable formatting of a specific file (or extension) which says, this is a duplicate (I don't feel so, because I wanted it for a specific file) and you're looking for a "one-time" solution:

VS Code has a shortcut "now" (I don't know since when) for saving a file without formatting listed under the command workbench.action.files.saveWithoutFormatting - Default keybinding should be

CTRL + K CTRL + SHIFT + S

(simply keep CTRL pressed and then type K + SHIFT + S).

On OS X the default keybinding is

CMD + k then press s

Upvotes: 103

Iftakhar Husan
Iftakhar Husan

Reputation: 51

You can use the below settings in Vscode and use "python.formatting.autopep8Args" to specify files or some pattern to ignore files you want. Of course, assuming that you are using autopep8 to format you python files other code formatters might have other ways to configure this.

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "python.formatting.autopep8Args": ["--exclude settings.py"],
  "[python]": {
    "editor.defaultFormatter": "ms-python.python",
    "editor.formatOnSave": true
  }
}

Upvotes: 4

Ravi Anand
Ravi Anand

Reputation: 5524

I messed up my keyboard keys with VSCode. One alternative could be utilizing the VSCode commands to save without formating by doing CTRL+SHIFT+P and executing the enter image description here command. :)

Upvotes: 25

Gama11
Gama11

Reputation: 34128

You can use language specific settings to enable it for a specific language only, e.g. JavaScript:

"[javascript]": {
    "editor.formatOnSave": true
}

To disable it for a specific language, you could switch the global default to true and combine it with a language-specific false:

"editor.formatOnSave": true
"[javascript]": {
    "editor.formatOnSave": false
}

Note that language specific settings are based on language identifiers rather than directly on file extensions. There's an open feature request to allow for file extension specific settings as well.

In cases where the language ID isn't specific enough, "files.associations" could be used to remap files with a specific extension and/or in a specific directory to another ID, but this will affect syntax highlighting, code completion, etc. as well. For instance, this would work to disable formatting for JavaScript files in out directories, but they will be treated as plaintext:

"[javascript]": {
    "editor.formatOnSave": true
},
"files.associations": {
    "**/out/**/*.js": "plaintext"
}

Upvotes: 445

Related Questions