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!
Related
I use a custom code formatter (forge fmt) to format my Solidity code, but this formatter is not part of any VSCode extension.
I would like to use it to format on save. What I typically do to enable format on save in VSCode is add the following settings (in this example, I am using the Prettier VSCode extension):
{
"editor.formatOnSave": true,
"[solidity]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
The trouble is that the defaultFormatter setting expects the name of an extension, but there isn't any bespoke VSCode extension for my formatter at the moment.
Would it be possible to instead use a task for formatting on save?
Update: it looks like there is actually an extension that has support for my custom formatter. Still, I wish to keep my question open, because I will probably bump into this problem again in the future.
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 have vim-prettier installed and also have the vscode extension for prettier installed.
They format differently however. I would like to use vim-prettier to format the same way I would for vscode's prettier.
I followed vscode's configuration and it lead me to /home/user/.prettierrc.json but it is empty and only has {} inside of it.
I put let g:prettier#autoformat = ["/home/user/.prettierrc.json"]
inside my .vimrc file but it does not format to the same way vscode-prettier does.
Is there a way to do this?
So first I tried whereis prettier and compared it to the value i get from running :PrettierCliPath
prettier is in /usr/local/bin/prettier
and the one that vim uses is in /home/user/node_modules/.bin/prettier
I tried to set my vimrc to point to the first one via
let g:prettier#exec_cmd_path = "~/path/to/cli/prettier"
But it didn't work. It gave me a syntax error whenever I tried to run prettier in vim.
After a long time I noticed this line in the README for vim-prettier
Note: vim-prettier default settings differ from prettier intentionally. However they can be configured by:
and it gave a bunch of settings like let g:prettier#config#print_width = 'auto'
So I ended up just manually configuring each setting to the desired result.
Now I want to find a way to only allow these settings for a certain filetype(html) so that the formatter for html and css are different instead of the same.
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
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