I often need to open and make small changes to projects which use different code formatting options than the ones I use. In order not to reformat the whole file, I usually open the user settings, search for settings containing "format", and then disable the options Editor: Format On Paste, Editor: Format On Save, Editor: Format On Type. When I return to my projects, I re-enable those options.
I would like this to be simpler, such as, binding a keyboard shortcut to quickly toggle all three of those options. However, I could not find shortcut actions that could bind to those.
Does anyone know if what I'm trying to achieve is possible?
You can do this with an extension: Toggle, which allows you to toggle many settings at the same time.
In your keybindings.json:
{
"key": "alt+capslock", // whatever keybinding you wish
"command": "toggle",
"when": "editorTextFocus",
"args": {
"id": "toggleFormats",
"value": [
{
"editor.formatOnType": true,
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"window.enableMenuBarMnemonics": false
},
{
"editor.formatOnType": false,
"editor.formatOnPaste": false,
"editor.formatOnSave": false,
"window.enableMenuBarMnemonics": true
}
]
}
},
I haven't tested it but it should work.
The only problem is there is no visual indicator which state you are in - perhaps you can find some other setting to toggle that would do so and be "innocuous." That is why I threw enableMenuBarMnemonics in there, on my keyboard the capslock key lights up when the formats are set to false and you can also check by doing alt+F to see if the main menu File option is opened. You may not need a visual reminder to indicate the state or come up with a better one.
Related
When I write C# code in VS Code and start typing some word and IntelliSense appears and focus on some suggestion I can press dot or space and this word appears in code.
But in python I strictly have to press Enter only if I want to get suggested word. Is it possible to make IntelliSense in Python behave like it behaves in C#?
Try changing the following lines to your settings.json file
"editor.acceptSuggestionOnCommitCharacter": true,
"editor.acceptSuggestionOnEnter": "on",
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": true
}
In addition to #DreamyPlayer's answer, add the following line to settings.json (or rewrite it, if key editor.inlineSuggest.enabled exists):
"editor.inlineSuggest.enabled": true
I had set up a custom snippets in javascript.json:
"Node regular import": {
"prefix": "creq",
"body": ["const ${2:module} = require('$1')"],
"description": "Node regular import"
},
It works when I type creq then press tab:
However, I would like this snippet auto-completion also trigger vscode's Intellisense. For now, I need to press ctrl + space to get what I want:
Is there any way I could configure vscode so I don't need to press Ctrl + Space each time?
Since you are in a string, the following setting works against you:
"editor.quickSuggestions": {
"other": true,
"comments": false,
"strings": false
}
Change "strings" to true and that will help. You still won't get the suggestions automatically opening up without doing anything but the first tab, but at least now typing something, like your first letter will trigger the suggestions instead of having to do Ctrl-Space.
I've just made the switch from Atom to VSCode.
When I used Atom and I'm typing JSX in .js files, I could type anything and press tab and it would turn what I tabbed into a custom component. For example, asdf and then tab would give <asdf></asdf>.
Now I have VSCode along with Emmet but this only works some of the time. I've experimented with Emmet and everything works except for basic custom components
All the HTML tags work as expected. i.e div.blue & tab return <div className="blue"></div>
Nesting works asdf>jkl & tab return
<asdf>
<jkl></jkl>
</asdf>
For some reason adding a colon triggers it. as:df & tab return <as:df></as:df> but asdf & tab does not return <asdf></asdf>. I just get my cursor tabbed forward.
I'm not sure whether Intellisense or Snippets are interfering in some way.
The relevant extensions I have installed are JavaScript and TypeScript Intellisense v0.0.7, Javascript Snippet Pack v0.1.5 and simple React Snippets 1.2.2.
And here are my settings:
{
"editor.formatOnSave": true,
"editor.tabSize": 2,
"editor.wordWrap": "on",
"prettier.singleQuote": true,
"prettier.jsxBracketSameLine": true,
"prettier.semi": false,
"prettier.useTabs": true,
"html.format.indentInnerHtml": true,
"workbench.colorTheme": "Base16 Tomorrow Dark",
"liveServer.settings.donotShowInfoMsg": true,
"window.zoomLevel": 0.5,
"editor.fontSize": 11,
"emmet.includeLanguages": {
"javascript": "javascriptreact"
}
}
I've found the answer. In settings add "emmet.triggerExpansionOnTab": true and it will work the way I want it to. By default it was set to false
How do I disable the auto-quotes feature?
When I hit the ' or " key, I do not EVER want it to automatically insert another one anywhere. No matter how smart they make it, it just comes across to me as "unpredictable" and distracts me from what I'm trying to do.
I type over 100 wpm, I really don't need help hitting the ' or " key.
I have tried the following settings, but none of them have disabled this undesired behavior:
{
"editor.autoClosingBrackets": false,
"editor.wordWrap": "off",
"html.autoClosingTags": false,
"editor.formatOnType": false,
"editor.suggestOnTriggerCharacters": false,
"editor.acceptSuggestionOnEnter": "off",
}
Put this in your user settings:
"editor.autoClosingQuotes": "never"
Edit: from vscode 1.27.0
"editor.autoClosingQuotes": "never",
"editor.autoSurround": "never",// When the word is selected
I guess you can "type" them instead like this (keybindings.json):
{
"key": "'",
"command": "editor.action.insertSnippet",
"args": {
"snippet": "'"
},
"when": "editorTextFocus && !editorReadonly"
},
Here is a GUI-How-To-Change it:
Open the Settings-Dialog:
Press Strg + , or Navigate with mouse to File | Settings
Change the Value of:
editor.autoClosingQuotes to the desired never
Thats it, no step 3 - only upvote my screenshot-answer..
In addition to the accepted answer, I also had to disable "HTML: Auto Create Quotes" in preferences (search for "Quote")
File > Preferences > Settings > type "quote" in search box
Open Settings (File -> Preferences -> Settings) Ctrl+Comma
Search for "editor close"
You should find "Auto Closing Brackets" and "Auto Closing Quotes".
Change them to "never ever"!
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