I'm editing someone else's code and I only want to change 1 line of a 9000 line file. But every time I save, VS Code formats the entire file and removes any trailing white space. This is a no-no because when I push this up, the reviewer will have no idea which line to look at.
I've tried disabling prettier, adding all files to .prettierignore, going into VS Code settings and disabling any suggestions of a formatter or white space trimming, turning off formatOnSave.
Here is my .vscode/settings.json
{
"prettier.disableLanguages": [
"js",
"json",
"javascript"
],
"javascript.format.enable": false,
"typescript.format.enable": false,
"json.format.enable": false,
"html.format.enable": false,
"emmet.showAbbreviationSuggestions": false,
"css.validate": false,
"editor.defaultFormatter": null,
"editor.formatOnSave": false,
"[javascript]": {
"editor.formatOnSave": false,
"editor.defaultFormatter": null
},
"editor.trimAutoWhitespace": false,
"diffEditor.ignoreTrimWhitespace": false,
"files.trimTrailingWhitespace": false,
"files.trimFinalNewlines": false,
"eslint.format.enable": false,
"files.autoSave": "off",
}
The only thing that seems to work is if I do CTRL + SHIFT + P, then SAVE WITHOUT FORMATTING. But what setting can I have so I can just do that with normal saving?
Did you try adding
"editor.formatOnSave": false
in your user settings rather than in your project settings?
Had the same problem, just bind 'cmd + s' to saving without formatting.
press cmd+shift+p then search for save without formatting and click on the configure icon, then bind it with 'cmd + s', problem gone :)
In the case it is ESLint, and not Prettier, the solution is:
Open Preferences: Open Settings (JSON) and configure:
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll": false,
"source.fixAll.eslint": false
}
I don't have Prettier but the solution may be similar.
In my case, I uninstalled prettier and was using html-css-js code formatter. I had already unchecked format on save, and had tried many other methods. I finally changed a setting in formatter.json (settings of html-css-js formatter) and then it worked.
Steps:
ctrl + shift + P
Formatter Config
If "onSave": true, change true to false
Save the formatter.json and reload window.
This worked for me. I can use auto-save after this as well.
I came across this problem a while back. I disabled the formatOnSave option in settings.
Goto File > Preferences > Settings or Ctrl + ,.
In User tab choose Text editor and navigate
to Formatting, disable the formatOnSave option.
YW!
Perhaps this plugin called Formatting Toggle by tombonnike can help you.
It disables the autosave with a toggle.
From its description:
A VS Code extension that allows you to toggle the formatter (Prettier, Beautify, …) ON and OFF with a simple click.
In my case I had two default code formatters that had conflicting settings, "prettier" was set not to format on save but JS-CSS-HTML Formatter was still set as my default formatter for some file types. I suggest using only one formatter and removing any unused / conflicting ones from your extensions list.
The way I used was to:
Open a file type ( one that's giving you formatting on save issues. )
Click on the file type and select "Configure 'yourFiletype' language based settings.. from the dropdown.
Delete the line that sets your default formatter: ex) "editor.defaultFormatter": "lonefy.vscode-JS-CSS-HTML-formatter"
Then go back to your file and try formatting normally, ( my hotkey is: alt + shift+ f ), it should prompt you to select your default formatter.
This should help minimize conflicting formatters issues.
I've just stumbled across this question while experiencing the exact same problem. The way I solved it, was just to switch the language of the document to plain text (you can do so by clicking on the language in the bottom navigation bar). If you then hit "save", no reformatting happens.
Disadvantage: You get no syntax highlighting. But if you just want to fix a typo or something and don't want to mess with the settings or install an extension, it's probably an ok workaround.
Save without Formatting
The ideal solution to this would just be to use the "Save without Formatting" command.
This can be executed by either:
Selecting it in the command palette: CTRL + SHIFT + P
Doing the keyboard shortcut: CTRL + K, S
This lets you save files, bypassing any formatters that may run automatically.
Format on Save
You might want to disable auto-formatting entirely. You might just not like it, or because it can be annoying when paired with files.autoSave which saves automatically, and therefore formats automatically too.
First check your global settings and see if you have editor.formatOnSave enabled. If so, then disable it.
You can navigate to your settings by either:
Navigating the menu bar: File → Preferences → Settings
Doing the keyboard shortcut: CTRL + ,
Then search for editor.formatOnSave and disable it.
If it's still auto-formatting, then it might be enabled in workspace settings. Check if the root of the workspace has a file at .vscode/settings.json, and if so, if it has editor.formatOnSave. If it does, then either disable it there or just delete the file to stop it from overriding your global settings.
Other Extensions
Check if any other extensions are performing code actions on save. Other answers here cover this topic a bit, but in general, you can just navigate through your setting and search terms like "save" or "format".
All UI navigation and keyboard shortcuts are taken from the Linux installation, they may vary on other platforms.
Go to C:\Users[user]\AppData\Roaming\Code\User
and change the editor.formatOnSave option to false.
I just got the same problem and while trying these solutions, I realized that when you click ctrl + shift + P, and type "Save without formatting", the option will have a settings icon on the right corner, click there to configure keybinding, you can put any keybinding you want there, for example ctrl + k, which I put. It worked instantly and it was very easy, so you can have the best of both worlds.
Thanks to Guillermo's answer.
In VScode Goto File -> Preferences -> Settings -> (User tab) Text Editor -> Formatting -> Here uncheck the Format On Save
Related
In the VS code editor, the default setting is to replace tabs by spaces, which is what I want. However, this is disastrous in a make file. I have written a make file (named Makefile) but VS code insists on changing tabs to spaces so I get a "Missing Separator" error when I run make.
If I go to File > Preferences > Settings and type #id:editor.insertSpaces in the menu, I see this:
When I click on Modified elsewhere I see this:
The second screenshot seems to says that the editor won't insert spaces in a Makefile, but it certainly is. What am I doing wrong, or what have I failed to do?
Try modifing settings.json
VScode Settings
There are 3 levels (by higher priority)
Worspace Settings JSON
User Settings JSON
Default Settings JSON
This should fix most inconveniences:
"[markdown]": {
"files.trimTrailingWhitespace": false,
"editor.insertSpaces": false
},
What worked for me was adding the following to settings.json:
"[makefile]": {
"editor.insertSpaces": false
},
I am trying to set a default formatter for a specific workspace to Prettier and make format on save work nicely with each other. I tried this as follows:
(format on save is also enabled in the User settings)
For some reason, this is not working for me. If I manually run the format command via VS Code's command pallet, it formats using Prettier just fine.
Is there something I got wrong or another setting that needs configuring?
Check if in your settings.json file, { "editor.formatOnSave": false } is set to False, if yes, set it to true, I don't know why, but this value could still be set to false, even if both your above settings are turned on.
check:
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"prettier.configPath": "./personal.yml"
}
if not, update the editor.defaultForamatter here to the shown value
Also, in your Editor:Default Formatter to None. Note that this is an alternative method (if above doesn't work)
Scroll down to check if formatter if enabled(checked) for all your languages
If this too doesn't work, one can always try rolling to a different version.
Or as a last resort, you can try uninstalling and installing vscode
Follow these steps:
CTRL + SHIFT + P
Format Document (in pop-up bar)
Select Format Document
Select Configure Default Formatter...
Select Prettier - Code formatter
Done!
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.
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"
}
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
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
command. :)
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"
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,
HERE IS IT (ADD THE BELOW IN YOUR VS CODE SETTINGS.JSON)
"files.associations": {
".env": "plaintext"
},
"[plaintext]": {
"editor.formatOnSave": false
},
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
}
}
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.
As a workaround, this extension allow to easily toggle formatting by clicking a button on the status bar.
I would like to automatically format TypeScript code using the build-in formatter when I save a file in Visual Studio Code.
I'm aware of the following options, but none of them is good enough:
Format manually Shift + Alt + F
Format on type "editor.formatOnType": true
It formats the line when you press enter. Unfortunatelly, it leaves it unformatted when you mouse-click another line or press up/down arrow.
Use existing extension
I tried this one, but it does not seem to work too well.
Use beautify "beautify.onSave": true
It does not work with TypeScript
Write custom extension
It's tricky if you want to handle autosaves and builds correctly.
As of September 2016 (VSCode 1.6), this is now officially supported.
Add the following to your settings.json file:
"editor.formatOnSave": true
No need to add commands anymore. For those who are new to Visual Studio Code and searching for an easy way to format code on saving, kindly follow the below steps.
Open Settings by pressing [Cmd+,] in Mac (or [Ctrl+,] in Windows/Linux) or using the below screenshot.
Type 'format' in the search box and enable the option 'Format On Save'.
You are done. Thank you.
If you would like to auto format on save just with Javascript source, add this one into Users Setting (press CmdShiftP or CtrlShiftP then type Open Settings (JSON) to open settings.json file)
"[javascript]": { "editor.formatOnSave": true }
For eslint:
"editor.codeActionsOnSave": { "source.fixAll.eslint": true }
For neet formatting for any language you can use Prettier - code formatter.
After applying this you can format code Alt + Shift + f
The best to avoid conflicts is defining individual formatters for each language, for instance if I am working with Rust and Typescript I would like to format code using the extensions Rust-Analyzer and Prettier respectively, therefore on my .vscode/settings.json:
{
"editor.defaultFormatter": null,
"[rust]": {
"editor.defaultFormatter": "rust-lang.rust-analyzer",
"editor.formatOnSave": true
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}
}
Remember that both Prettier and rust-analyzer extensions must be installed first.
For MAC user,
add this line into your Default Settings
File path is: /Users/USER_NAME/Library/Application Support/Code/User/settings.json
"tslint.autoFixOnSave": true
Sample of the file would be:
{
"window.zoomLevel": 0,
"workbench.iconTheme": "vscode-icons",
"typescript.check.tscVersion": false,
"vsicons.projectDetection.disableDetect": true,
"typescript.updateImportsOnFileMove.enabled": "always",
"eslint.autoFixOnSave": true,
"tslint.autoFixOnSave": true
}
After hours of struggle... below steps worked.
Full details below.
Install this extension
https://marketplace.visualstudio.com/items?itemName=pucelle.run-on-save
Add below json, to below file:
File:
<your-project-directory>\.vscode\settings.json
OR
%UserProfile%\AppData\Roaming\Code\User\settings.json
JSON:
NOTE: Make sure commas before and after below block.
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 1000,
"runOnSave.statusMessageTimeout": 3000,
"runOnSave.commands": [
{
"match": ".*\\.*",
"command": "editor.action.formatDocument",
"runIn": "vscode"
}
],
Now, when the code is changed, after 1 second, it gets formatted & saved automatically.
For me formatOnSave wasn't working because I had prettier installed and hadn't yet chosen between the built-in and prettier as my default formatter.
To trigger the selection dialog I had to press Alt + Shift + f on my json file.
First, you need to choose the formatter which you have just added as an extension.
Press ctrl + alt + f and choose the formatter that you want from the dropdown.
Post that with every save it will get automatically formatted.
If you use Prettier and this line
"editor.formatOnSave": true
Doesn't work to format on save, you might need to add another command to settings.json
"editor.defaultFormatter": "esbenp.prettier-vscode",
In addition to enabling setting Format On Save, for python developers, you may need to install autopep8 package which is used by vscode as default to format the python code when the code is saved.
pip install autopep8
and then, press ctrl + s to see changes.
Goto settings and search format
check Editor: Format On Save
or follow these steps
I have both TypeScript and HTML files in my project, in both files tabs are converted to spaces.
I want to turn the auto-conversion off and make sure that my project has only tabs.
Edit:
With this setting it seems to work in HTML files but not in TypeScript files.
{
"editor.insertSpaces": false
}
There are 3 options in .vscode/settings.json:
// The number of spaces a tab is equal to.
"editor.tabSize": 4,
// Insert spaces when pressing Tab.
"editor.insertSpaces": true,
// When opening a file, `editor.tabSize` and `editor.insertSpaces` will be detected based on the file contents.
"editor.detectIndentation": true
editor.detectIndentation detects it from your file, you have to disable it.
If it didn't help, check that you have no settings with higher priority.
For example when you save it to User settings it could be overwritten by Workspace settings which are in your project folder.
Update:
To access these settings, you can open File » Preferences » Settings, click the Manage cog icon at the bottom left, or use the keyboard shortcut:
CTRL+, (Windows, Linux)
⌘+, (Mac)
Update:
Now you have an alternative to editing those options manually. Click on selector Spaces:4 at the bottom-right of the editor:
EDIT:
To convert existing indentation from spaces to tabs hit Ctrl+Shift+P and type:
>Convert indentation to Tabs
This will change the indentation for your document based on the defined settings to Tabs.
To change tab settings, click the text area right to the Ln/Col text in the status bar on the bottom right of vscode window.
The name can be Tab Size or Spaces.
A menu will pop up with all available actions and settings.
Ctrl+Shift+P, then "Convert Indentation to Tabs"
If you want to use tabs instead of spaces
Try this:
Go to File ➤ Preferences ➤ Settings or just press Ctrl + ,
In the Search settings bar on top insert editor.insertSpaces
You will see something like this: Editor: Insert Spaces and it will be probably checked. Just uncheck it as show in image below
Reload Visual Studio Code (Press F1 ➤ type reload window ➤ press Enter)
If it doesn't worked try this:
It's probably because of installed plugin JS-CSS-HTML Formatter
(You can check it by going to File ➤ Preferences ➤ Extensions or just pressing Ctrl + Shift + X, in the Enabled list you will find JS-CSS-HTML Formatter)
If so you can modify this plugin:
Press F1 ➤ type Formatter config ➤ press Enter (it will open the file formatter.json)
Modify the file like this:
4| "indent_size": 1,
5| "indent_char": "\t"
——|
24| "indent_size": 1,
25| "indentCharacter": "\t",
26| "indent_char": "\t",
——|
34| "indent_size": 1,
35| "indent_char": "\t",
36| "indent_character": "\t"
Save it (Go to File ➤ Save or just press Ctrl + S)
Reload Visual Studio Code (Press F1 ➤ type reload window ➤ press Enter)
Check this from official vscode setting:
// Controls whether `editor.tabSize#` and `#editor.insertSpaces` will be automatically detected when a file is opened based on the file contents.
"editor.detectIndentation": true,
// The number of spaces a tab is equal to. This setting is overridden based on the file contents when `editor.detectIndentation` is on.
"editor.tabSize": 4,
// Config the editor that making the "space" instead of "tab"
"editor.insertSpaces": true,
// Configure editor settings to be overridden for [html] language.
"[html]": {
"editor.insertSpaces": true,
"editor.tabSize": 2,
"editor.autoIndent": false
}
Below settings are worked well for me,
"editor.insertSpaces": false,
"editor.formatOnSave": true, // only if you want auto fomattting on saving the file
"editor.detectIndentation": false
Above settings will reflect and applied to every files. You don't need to indent/format every file manually.
In my case, the problem was JS-CSS-HTML Formatter extension installed after january update. The default indent_char property is space. I uninstalled it and the weird behavior stops.
Highlight your Code (in file)
Click Tab Size in bottom righthand corner of application window
Select the appropriate Convert Indentation to Tabs
File -> Preferences -> Settings or just press Ctrl + , and search for spaces, then just deactivate this option:
I had to reopen the file so the changes would take effect.
If you want to change tabs to spaces in a lot of files, but don't want to open them individually, I have found that it works equally as well to just use the Find and Replace option from the left-most tools bar.
In the first box (Find), copy and paste a tab from the source code.
In the second box (Replace), enter the number of spaces that you wish to use (i.e. 2 or 4).
If you press the ... button, you can specify directories to include or ignore (i.e. src/Data/Json).
Finally, inspect the result preview and press Replace All. All files in the workspace may be affected.
Set this to false if you are using .sass files and it's giving you the Expected tabs, was spaces error:
"editor.detectIndentation": false
... then select your block of code and indent it by pressing the tab key and indent it back by pressing the shift + tab key.
In my case it was about unchecking
Prettier: Use Tabs
on VSCode settings
{
"editor.insertSpaces": true
}
True works for me.