VSCode: How do you autoformat on save? - formatting

In Visual Studio Code, how do you automatically format your source code when the file is saved?

Enable "Format On Save" by setting
"editor.formatOnSave": true
And since version 1.49.0 editor.formatOnSaveMode has the option modifications that will just format the code you modified. Great when you change someone else code.
You can also set it just for one specific language:
"[python]": {
"editor.tabSize": 4,
"editor.insertSpaces": true,
"editor.formatOnSave": true #
},
Since version 1.6.1, Vscode supports "Format On Save". It will automatically use a relevant installed formatter extension to format the whole document.
If you are modifying other users code and your team don't standardize a formatter, a nice option also is "editor.formatOnSaveMode": "modifications",. Unfortunately, the excellent black formatter does not support this feature.

Below are the steps to change the VS Code auto format on save settings:
Use [Ctrl]+[Shift]+[p]
Type "Preferences"
Select "Preferences: Open User Settings"
Search for "format"
Change "Editor: Format On Save" or "Editor: Format On Paste".
There are also Keyboard Shortcuts for formatting in VS Code. For instance, the default to format selected code should be [Ctrl]+K [Ctrl]+F (type both hotkeys in succession).
Below are the steps to change the auto format hotkey settings:
Use [Ctrl]+[Shift]+[p]
Type "Keyboard"
Select "Preferences: Open Keyboard Shortcuts"
Search for "format"
Change "Format Selection" or "Format Document".

Go to /.vscode/settings.json file and paste below code
{
"editor.formatOnSave": true,
}
It will format your code on save.

settings.json:
"editor.formatOnSave": true,
"editor.formatOnSaveMode": "modifications",
"editor.formatOnType": true,
"editor.formatOnPaste": true,
"formatOnSaveMode" is important to only format modified code, as I don't want to touch legacy code.
If I want to format the whole document, I'll call "Format Document" obviously.
"formatOnType" works after I enter a full stmt (e.g. for CPP, after ';')

Related

What's the keyboard shortcut in visual studio code to complete statement like in IntelliJ?

Is exist keyboard shortcut to complete statement in current line in visual studio code, like in IntelliJ?
The complete statement is that Complete Statement, I can enter Shift + Ctrl + Enter to complete current line smartly.
The visual studio code support this function?
Complete Statement will help to some extent.
However, this extension lacks one feature - going inside the block. For example - for a if block if you use the shortcut to autocomplete the statement the cursor will still stay on the same line unlike Jetbrains IDE where it intelligently moves to the correct line.
Those who want to get the same feel as Jetbrains IDE's complete statement feature they can customize the keyboard shortcut like this:
Shortcut 1: Ctrl+ Shift+ Enter (to complete current statement)
Shortcut 2: Ctrl+ Shift (to go to next line)
It's just some extra keystrokes but still you can at least get it done!
You probably looking for IntelliSense feature of VSCode.
If you select the language that you coding with it (at right of bottom bar) and press ctrl + space, auto-complete & suggestion menu (according to your selected language) was shown.
Update: this extension for VSCode is probably what you want.
using macros,and create:
"macros":
{
"end_semicolon": // add ;\n
[
"cursorEnd",
{
"command": "type",
"args": {"text": ";\n"}
},
],
"end_colon": // add :\n\t
[
"cursorEnd",
{
"command": "type",
"args": {"text": ":\n\t"}
},
],
}

How to change indentation rules in SublimeText3?

In my company, we are all working on Sublime and my boss want us to have a specific indentation for js and php files. He wants us to indent the closing curly braces at the same indentation as the code above. (If found that it's named Ratliff style) Here is an example.
function resetScraperSubmit() {
var button = $('.modal#scrapperConfiguration').find('button[type=submit]');
button.text(button.data('default-text'))
.addClass('btn-primary')
.removeClass('btn-danger')
.prop('disabled', false);
}
To do this, I have to indent myself all of them all the time.
Is there any feature/configuration file in Sublime or in one of his plugin to automatically do this ?
Hi You can customise you sublime indentation settings from the settings tab
Preferences -> Settings
Copy the rules that you want to customise from the default settings window wich most if the time appears at the left side and paste it to the right hand side and change the value
"detect_indentation": true,
"auto_indent": true,
"auto_indent": true,
"indent_to_bracket": false,
And so on
Here is the Sublime Indentation Manual Read it and follow the rules

Key binding to wrap a selection with an html tag in VSCode

Is there a default key binding in VSCode to wrap a selection in an HTML tag like the keyboard shortcut Shift+alt+W in Visual studio 2015? I could not find anything similar in documentation or in the default keyboard shortcuts that indicates its availability out of the box.
To automate this go to.
File > Preferences > Keyboard Shortcuts
and add this into your keybindings.json (right hand side window)
{
"key": "ctrl+shift+enter",
"command": "editor.emmet.action.wrapWithAbbreviation",
"when": "editorTextFocus && !editorReadonly"
}
You can replace ctrl+shift+enter with your own key combination.
you can use this extension:
https://github.com/Microsoft/vscode-htmltagwrap
or you can:
open the Command Palette: Command/Control+Shift+P (⇧⌘P)
type "wrap", then select "Wrap with abbreviation"
type the tag you want and press enter
Or simply search for the HTMLtagwrap extension in VScode, Make selection. Then use Alt + W. Then enter the new tag.

Sublime Text 3 always use tabs instead of spaces for indentation

I'd like to always use spaces instead of tabs for indentation in ST3.
I put these in my settings:
"translate_tabs_to_spaces": true,
"convert_tabspaces_on_save": true, // for a plugin
"detect_indentation": false,
"tab_size": 4
The setting convert_tabspaces_on_save is for forcing the conversion tabs-> spaces at least on file save with the plugin ExpandTabsOnSave
But no matter what, ST3 keeps indenting new opened files using tabs instead of spaces.
Could it be a bug or am I using a wrong setting?
HINT: anytime I modify the file Preferences.sublime-settings indirectly, for example by using the command Package Control: Disable Package it is saved with tabs instead of spaces
According to the documentation, these settings should do the trick (they do work for me):
{
// Integer. The number of spaces a tab is considered equal to
"tab_size": 4,
// Boolean, if true, spaces will be inserted up to the next tab stop when tab is pressed, rather than inserting a tab character
"translate_tabs_to_spaces": true,
// Boolean, if true (the default), tab_size and translate_tabs_to_spaces will be calculated automatically when loading a file
"detect_indentation": true,
// Boolean, If translate_tabs_to_spaces is true, use_tab_stops will make tab and backspace insert/delete up to the next tab stop
"use_tab_stops": true
}
If this does not work, try disabling all plugins, restart and look if the problem persists. If not, it's one of the plugins (or several conflicting ones). You can find out by enabling them one at a time and looking for the issue to reappear.
Try this: View -> Indentation -> Indent Using Spaces
have some trouble, but otherwise - i'd wish use the tabs, but sl3 insert the spaces. Its behaviour for only css/scss files! My user.config:
{
"font_size": 11,
"ignored_packages":
[
"Vintage"
],
"tab_size": 2,
"translate_tabs_to_spaces": false,
"convert_tabspaces_on_save": false,
"word_wrap": "false"
}
I ran into this issue when working on an existing file that had tab stops.
I needed to set "detect_indentation" to false.

Is it possible to chain key binding commands in sublime text 2?

There are times in Sublime Text when I want to reveal the current file in the side bar and then navigate around the folder structure.
This can be achieved using the commands reveal_in_side_bar and focus_side_bar however they have to be bound to two separate key combinations so I have to do 2 keyboard combinations to achieve my goal when ideally I'd like just one (I'm lazy).
Is there any way to bind multiple commands to a single key combination? e.g. something like this:
{
"keys": ["alt+shift+l"],
"commands": ["reveal_in_side_bar", "focus_side_bar"]
},
Solution
Based on #artem-ivanyk's and #d_rail's answers
1) Tools → New Plugin
import sublime, sublime_plugin
class RevealInSideBarAndFocusCommand(sublime_plugin.WindowCommand):
def run(self):
self.window.run_command("reveal_in_side_bar")
self.window.run_command("focus_side_bar")
Save as RevealInSideBarAndFocus.py
2) Sublime Text 2 → Preferences → Key Bindings — User
Bind it to shortcut:
{ "keys": ["alt+shift+l"], "command": "reveal_in_side_bar_and_focus" }
Although the question is a year old, this might help people that are still looking for an answer.
Recently, a new package was developed by jisaacks, called Chain of command. It has the primary task to do exactly what you request, to chain several commands at once.
The package can be found here:
https://github.com/jisaacks/ChainOfCommand
An example of the working can be found below.
Let's say you wanted a key binding to duplicate the current file. You could set this key binding:
{
"keys": ["super+shift+option+d"],
"command": "chain",
"args": {
"commands": [
["select_all"],
["copy"],
["new_file"],
["paste"],
["save"]
]
}
}
This would select all the text, copy it, create a new file, paste the text, then open the save file dialog.
Source: https://sublime.wbond.net/packages/Chain%20of%20Command.
Updating #Artem Ivanyk's answer. I do not know what changed in Sublime, but that solution did not work for me, but I got this to work:
import sublime, sublime_plugin
class RevealInSideBarAndFocusCommand(sublime_plugin.WindowCommand):
def run(self):
self.window.run_command("reveal_in_side_bar")
self.window.run_command("focus_side_bar")
.
{ "keys": ["ctrl+shift+8"], "command": "reveal_in_side_bar_and_focus" }
Btw, I'm using Build 2220
Stumbled upon similar problem. When trying to record macros, which involved „Save“ command, console threw at me „Unknown macros command save“ message.
Worked my way around with elementary plugin.
1) Tools → New Plugin
import sublime, sublime_plugin
class MyChainedActionsCommand():
def run(self):
self.view.run_command("reveal_in_side_bar")
self.view.run_command("focus_side_bar")
You need to use upper camel case notation for the class name. ST2 exposes this class for the command name with „Command“ suffix removed and the rest converted into the lowercase-underscore notation. I.e. in this example MyChainedActionsCommand could be run in sublime's console typing: view.run_command("my_chained_actions")
2) Sublime Text 2 → Preferences → Key Bindings — User
Bind it to shortcut:
{ "keys": ["alt+shift+l"], "command": "my_chained_actions" }
Heed commas.
Take a look at this gist.
I've been trying to implement this in a long time and found this by accident.
Don't forget to read the "documentation" provided. I kept trying to make this work, until I reallized I was not passing the "context" key.
You can create a macro to do this. For Sublime Text, macros are essentially just chained commands. You then create a keybinding for that macro. You can create a macro by using Tools > Record Macro, then executing your commands (beware that macros record keystrokes as well, so you'll want to use the commands from the menu bar to not cause conflicts), then Stop Recording, then Save Macro. After you save the macro, you can open it back up in Sublime Text to make sure that it recorded only what you want.
Building on Artem Ivanyk reply, here is a version of ChainedActions that works with arguments. It takes two arguments for actions and args. Both are lists and each command in the list gets executed with the corresponding arguments. This admittedly stupid example inserts two snippets: view.run_command("chained_actions", {"actions":["insert_snippet","insert_snippet"],"args":[{"contents": "($0)"},{"contents": "1($0)"}]})`
import sublime
import sublime_plugin
class ChainedActionsCommand(sublime_plugin.TextCommand):
def run(self, edit, actions, args):
for i, action in enumerate(actions):
self.view.run_command(action, args[i])
I've tried to use the same command but I ended up with a bug that when the file's folder was already unfolded sublime moved my focus sidebar's top, where I can see the open files. To improve this behavior I've wrote a new plugin that ensures it'll behave as I want to, here it is https://github.com/miguelgraz/FocusFileOnSidebar
I am using Sublime text3 build - 3083. It solves the problem just by 'Reveal it in side bar', the focus comes automatically.
I have added a custom keyboard shortcut for 'Reveal in sidebar' by adding the following statement under Preferences->Key Bindings-User :
[
{ "keys": ["ctrl+shift+r"], "command": "reveal_in_side_bar"}
]
The option - 'Reveal in sidebar' was missing for image file types, since the context menu doesn't appear with the right click of the mouse. The custom keyboard shortcut comes handy in this situation.
Starting from Sublime Text Build 4103 the feature is supported natively:
"Added the chain command, which accepts a list of commands to run in its "commands" argument. This allows binding a key to run multiple commands without having to use a macro"
See Changelog on https://www.sublimetext.com/dev