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
},
So, I'm using VS Code with an extension called Prettier. The problem is that after I hit save my code is being "refined" but also separated into 2 lines even despite the fact it's a very short line and I still have plenty of space on the right. Could you please advice what setting is responsible for this conversion? It seems to me that I have checked all available options but unfortunately couldn't find anything which causes it.
"prettier.printWidth": "80"
in your settings.json or search for print width setting in the UI
Increase or decrease this setting. This limits the number of characters prettier limits a line to, it it exceeds this, it will try to break it into smaller ones.
Search for settings.json in visual studio.
You will find a json file in this path AppData\Roaming\Code\User\settings.json if it is a windows machine.
Add the below JSON in the file, If you keep "editor.formatOnSave" as false formatting won't happen when you save the file.
If you want to have this setting just make a specific property as false just the way I did for javascript and HTML in the below section.
"editor.formatOnSave": false,
"[handlebars]": {
"editor.formatOnSave": true
},
"[javascript]": {
"editor.formatOnSave": false
},
"[html]": {
"editor.formatOnSave": false
},
"[less]": {
"editor.formatOnSave": true
},
I am trying to add language based settings for several languages. In order to do so, I modified the file settings.json (see Configure language based settings in VS Code for more information) as follows:
{
"editor.tabSize": 4,
"editor.detectIndentation": false,
"editor.formatOnSave": true,
"vsicons.dontShowNewVersionMessage": false,
"[dart]": {
"editor.tabSize": 2
},
"[typescript]": {
"editor.tabSize": 4
},
"[c]": {
"editor.tabSize": 4
}
}
As you can see, I have the tab size option set to 2 for Dart and to 4 for other languages. The default value for indentation is 4 and "editor.detectIndentation" is disabled. But for some reason the editor doesn't get these settings:
For this reason, IndentRainbow extension does not work properly. On the bar below you can see that VS code still has "4" for tab size.
If I change the global setting for the tab size (editor.tabSize), VS Code just set the new value, e.g., 2 and I have then in all files and for all languages this value for indentation. I also tried to restart VS Code after settings were changed, it didn't help. What can I do to make what I want work properly?
settings.json is saved in C:\Users\MyName\AppData\Roaming\Code\User\
I found out for myself what the problem was. Under the extensions tab, I have the EditorConfig extension. This extension always overrides the user and workspace settings. I simply disabled this extension.
Another possible solution would be to create an .editorconfig file in the folder in which the project is located and to specify there the tab size.
I want to have VSCode indent C files by 2 spaces by default. Is it possible to do this? Thanks.
Adding to #Batman's answer after you amended your question via a comment (since this is too long to put into a comment): look into "configure language-specific settings..." in your command palette. It'll create
"[c]": {}
at the bottom of your settings.json so you can add anything there like:
"[c]": {
"editor.tabSize": 2,
"editor.insertSpaces": true,
"editor.detectIndentation": false
}
and that will only affect C files.
File > Preferences > Settings
Below Setting worked for me
"editor.tabSize": 2,
"editor.insertSpaces": true,
"editor.detectIndentation": false
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