Visual Studio Code Version 1.10 adds the ability to specify languages settings on a per language basis (*1). You put something like this in your settings.json file:
"[javascript]": {
"editor.fontSize": 100,
}
I'd like to do something more specific. I'd like to apply different rules to files that match *.min.js.
How would I do that?
I've actually got something that works, but it's a bit hacky, so I thought I'd ask.
*1) In case you want to know which ones: Use autocomplete after typing in "[]":, or see languageIds array in this file.
I'm aware beautify skips formatting min files by default. But just using "editor.formatOnSave": true, this doesn't seem to happen. Also, other non-formatting stuff like wordwrap is nice.
Here's my current solution:
"files.associations": {
"*.min.js": "javascriptreact"
},
// Hijack javascriptreact to create custom settings for min.js files
"[javascriptreact]": {
"editor.formatOnSave": false,
"editor.wordWrap": "on"
}
I'm using the fact that vscode happens to have a second type of javascript, one that isn't used my my project. Not ideal, but it seems to work.
Related
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've got an error when trying to format my code in Visual Studio. I have the following plugins installed for the languages I use:
shell-format (bash)
Go (golang)
PyFormat (python)
I have also set up a keybinding SHIFT+ALT+F to format a file, with the when condition:
editorHasDocumentFormattingProvider && editorTextFocus && !editorReadonly
But whenever I use this shortcut (or use auto-format on save), nothing is formatted and I see this error in the toolbar at the bottom:
"Extension 'JSON Language Features' cannot format [filepath]"
I don't know what this extension even is, since I don't have any JSON-based extentions installed.
Has anyone else seen something similar?
I just had this with Python, and it turned out the issue was that I had a line in my settings like this:
"editor.defaultFormatter": "vscode.json-language-features",
Since I wanted Python to use black. and it's that that wasn't working and giving me the same error message you're getting, I changed the line above so it was only relevant for json, and double checked formatters for other languages (don't forget to check settings for user, remote and workspace).
In the end, my settings for default formatting looked like this:
"editor.formatOnSave": true,
"[python]": {
"editor.codeActionsOnSave": {
"source.organizeImports.python": true,
}
},
"[django-html]": {
"editor.formatOnSave": false,
},
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features",
},
And presto, my Python format on save was working again.
I suspect your problem is the same, but post your settings.json if making that vscode.json-language-features json specific doesn't work ...
I want to change tabs to whitespaces when I save the file.
I thought there would an option in the settings or at least an extension, but I was not able to see it.
I have seen many other posts for removing trim.trailingWhitespace, but that is not what I am looking for.
I am also using the conversion from tabs to whitespaces when pressing the Tab key. But that is, again, not my issue.
What I am looking for is to save the file and automatically change all the tabs to whitespaces, like Qt Creator does.
It is going to depend on the language. You need to install/setup a language-specific formatter and then enable the "editor.formatOnSave" setting, which will literally apply the formatter rules when saving files.
This answer is for Python and JavaScript because that's what I normally use.
For JavaScript, I use the Prettier extension.
(It has plugins for other languages but I've mainly used it for JS.)
Then add these to your settings.json:
// Set the default setting
"editor.formatOnSave": false,
// Then toggle depending on the language
"[javascript]": {
"editor.formatOnSave": true
},
By default, Prettier already provides some default formatting rules. But you can specify your own configuration file to specify your own (or a project-specific) set of formatting rules.
.
├── ...
├── .prettierrc.js
├── test.js
...
└── <<other files>>
In .prettierrc.js:
// prettier.config.js or .prettierrc.js
module.exports = {
useTabs: false,
tabWidth: 4
};
That Prettier config specifies not to use tabs and use an indentation level of 4 spaces. Now, with that setup, when you save a file, it will automatically change tabs to whitespaces (which is what I understand is what you want). There are also other formatting options.
You'll know the extension is working because it shows "Prettier" in the status bar:
For Python, VS Code currently supports 3 formatting providers):
"autopep8"
"yapf"
"black".
I use "autopep8".
Install autopep8 on your environment. Then in VS Code, make sure to select the environment that has autopep8. Then add this to your settings.json:
// Set the default setting
"editor.formatOnSave": false,
"[python]": {
"editor.formatOnSave": true
},
"python.formatting.provider": "autopep8",
"python.formatting.autopep8Args": [
// "--ignore=W191, E101, E111" // Uncomment to disable fixing indentation
],
Here, autopep8 formats code to follow the PEP8 style guide, which already recommends spaces over tabs. So all that needs to be done is enable it.
You might also be interested in VS Code settings related to spaces (so that tabs will not be put into the file in the first place):
"editor.detectIndentation": false,
"editor.insertSpaces": true,
"editor.tabSize": 4,
Whenever I face an indentation problem, I go online and google "beautify python code" and the 2nd or 3rd link of tutorials-point helps me out( link ).
Just put in your code and it will (in most cases) completely fix it for you or guide you theough the errors in a better way than an interpreter.
I am using windows and VS Code, I have few files that I do not need to wrap them wherever I press Alt+Shift+F, is there a way to disable auto format wrapping for specific files?
Explained here Language-specific editor settings but specifically:
CTRL+SHIFT+P and type "Preferences: Configure Language Specific Settings"
Select the language or add section in the file (start typing [ to see list of suggestions) or edit if already there.
If wrapping, depending on columns available in your editor you might want to update editor.wordWrapColumn. Lines will wrap at the minimum of viewport and editor.wordWrapColumn
Example:
...
"editor.wordWrapColumn": 200,
"[typescript]": {
"editor.tabSize": 2,
"editor.wordWrap": "off",
},
"[plaintext]": {
"editor.wordWrap": "bounded",
},
...
Looks like VSCode allows for this. You can tweak it as you prefer for each file type.
However note that there have been reports of it not working for markdown files.
I guess it is something still being tweaked.
Looks like this person made an extension that might be useful for you.
https://marketplace.visualstudio.com/items?itemName=Ho-Wan.setting-toggle
Looks like you can setup a few quick easy setting toggles. would at least make it quicker as you're bouncing from file to file.
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