Quick Markup (https://github.com/redmunds/brackets-quick-markup) is an extension available for Brackets IDE for HTML development. The extension can be activated with a shortcut Ctrl+Alt+M. When it is active, we can use custom shortcuts to insert custom HTML tags instead of typing them. For example, to make insert <b></b> tags around a word, we just need to select the word and hit Ctrl+B. The shortcuts and their corresponding tags can be customized.
I'm looking for a similar extension or feature like this in Visual Studio Code. I tried searching but couldn't find anything so far.
keybindings.json
{
"key": "ctrl+b",
"command": "editor.emmet.action.wrapWithAbbreviation",
"when": "editorHasSelection",
"args": {
"abbreviation": "b"
}
},
{
"key": "ctrl+shift+b",
"command": "editor.emmet.action.wrapWithAbbreviation",
"when": "editorHasSelection",
"args": {
"abbreviation": "pre>code"
}
},
You can also call it without args and just type the tags every time.
Or just typing anything:
{
"key": "ctrl+b",
"command": "editor.action.insertSnippet",
"args": {
"snippet": "<br />"
}
}
Related
I am trying to map a custom shortcut to VS code that will paste the following string (which clears the console), using the multi_command tool:
"command": "multiCommand.clearConsole",
"sequence": [
{
"command": "type",
"args": {
"text": "print("\\033\[2J)
}
}
]
I have used a double backslash to escape the first backslash, but I need a way of escaping the '[' open bracket.
Does anyone know if it's possible? or an easier way to do it? I just want to clear the console which is hosted on an external device (interacting via PyCOM Console) and interacts via python command line.
Cheers!
You need to escape the double-quote and the backslash before [, the bracket is a valid JSON character:
{
"command": "multiCommand.clearConsole",
"sequence": [{
"command": "type",
"args": {
"text": "print(\"\\033\\[2J)"
}
}]
}
This keybinding - chose whatever keybinding you want - will clear the console:
{
"key": "ctrl+shift+z",
"command": "workbench.action.terminal.sendSequence",
"args": { "text": "clear\u000d" }
}
or you could use that "text" in your macro.
Focus in editor.
I know how to modify and create code snippets and I know how to modify shortcut keys, but how does one bring those 2 together?
Note that the line below will open a list of snippets defined for the language you are currently using (and you don't want that)
"args": { "snippet": "'$TM_SELECTED_TEXT'" }
Whereas with the below line the snippet given as argument will be executed right away
"args": { "name": "your_snippets_name" }
Here's how I defined a snippet for HTML where I wanted to select a text and when pressing CTRL+B the text to become enclosed in <strong></strong> tags:
"make_strong": {
"prefix": "strong",
"body": [
"<strong>$TM_SELECTED_TEXT${1:}</strong>"
],
"description": "Encloses selected text in <strong></strong> tags"
}
Note the ${1:} above - what this does is that it places the cursor there. This enables you to press CTRL+B at cursor and then have the cursor placed inside the <strong></strong> tags. When selecting a string and pressing CTRL+B, the string will enclosed in <strong> tags and the cursor will be placed before the closing </strong> tag. Pressing TAB at this point, will put your cursor after the closing </strong> tag.
And added in my keybindings.json the following:
{
"key": "ctrl+b",
"command": "editor.action.insertSnippet",
"args": { "name": "make_strong" }
}
UPDATE JUNE 2nd, 2021
Since this is getting lots of views, I am posting some of the snippets I use, maybe it will be useful to someone
{
"key": "ctrl+alt+u",
"command": "editor.action.transformToUppercase"
},
{
"key": "ctrl+alt+l",
"command": "editor.action.transformToLowercase"
},
{
"key": "ctrl+b",
"command": "editor.action.insertSnippet",
"args": { "name": "insert_strong" }
},
{
"key": "ctrl+i",
"command": "editor.action.insertSnippet",
"args": { "name": "insert_italic" }
},
{
"key": "ctrl+u",
"command": "editor.action.insertSnippet",
"args": { "name": "insert_underline" }
},
{
"key": "ctrl+alt+p",
"command": "editor.action.insertSnippet",
"args": { "name": "insert_paragraph" }
},
{
"key": "ctrl+shift+space",
"command": "editor.action.insertSnippet",
"args": { "name": "insert_nbsp" }
},
{
"key": "ctrl+enter",
"command": "editor.action.insertSnippet",
"args": { "name": "insert_br" }
},
It would seem that, as of version 1.9, Visual Studio Code can do what you are looking for, no other extensions necessary.
From https://code.visualstudio.com/updates/v1_9#_insert-snippets
"You can now bind your favorite snippets to key bindings. A sample that encloses a selection with single quotes looks like this:"
Add the snippet below to keybindings.json (open Keyboard Shortcuts editor and click on the For advanced customizations open and edit keybindings.json link)
{
"key": "cmd+k",
"command": "editor.action.insertSnippet",
"args": { "snippet": "'$TM_SELECTED_TEXT'" }
}
Here are 3 steps to create a code snippet along with a shortcut.
1. Code -> Preferences -> Keyboard Shortcuts
2. Click on icon for keybindings.json file
3. Add JavaScript objects for Code Snippet/Shortcuts
For example i have created snippets for logging purposes as I mostly work with JavaScript Frameworks.
1.console.log('') with shortcut Control (or Ctrl) ⌃ + l
2.console.warn('') with Control (or Ctrl) ⌃ + w
3.console.error('') with Control (or Ctrl) ⌃ + e
Code:
{
"key": "ctrl+l",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
"snippet": "console.log('${TM_SELECTED_TEXT}$1')$2"
}
},
{
"key": "ctrl+w",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
"snippet": "console.warn('${TM_SELECTED_TEXT}$1')$2"
}
},
{
"key": "ctrl+e",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
"snippet": "console.error('${TM_SELECTED_TEXT}$1')$2"
}
}
Call Command Palette in View menu
Hit "shortcuts json" and OK
Then append under code blocks
{
"key": "shift+alt+l",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus && editorLangId == 'js'",
"args": {
"snippet": "console.log($1);$0",
}
},
{
"key": "shift+alt+l",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus && editorLangId == 'dart'",
"args": {
"snippet": "print($1);$0",
}
},
If you press Shift+Alt+L in JavaScript then
put "console.log();" to your editor,
And press Shift+Alt+L in Dart then
put "print();" to your editor,
with the same shortcut.
In Sublime Text 3,when we press Ctrl+Shift+B, we are given the option to either do "Build and Run" or "only Build", whereas Ctrl+B executes the previously chosen operation among the two. But I want it to be like, it should directly build and run when I press Ctrl+Shift+B and only build when I press Ctrl+B like it was in Sublime Text 2. Can someone help me out?
Addings this to your sublime-keymap should result in the expected behavior:
{ "keys": ["ctrl+b"], "command": "build", "args": { "variant": "" } },
{ "keys": ["ctrl+shift+b"], "command": "build", "args": { "variant": "Run" } },
However you might want to remap keep the list of options to alt+b:
{ "keys": ["alt+b"], "command": "build", "args": { "select": true } },
Not answering the question but good to know, F7 functions the same as Ctrl+b.
(CTRL + SHIFT + F) it's really a nice shortcut to keep code well organized in eclipse. Is there any thing equivalent for sublime text editor?
Unfortunately there isn't a default key binding equivalent to CTRL + SHIFT + F in eclise. However, there is the reindent command that can be used to make your own key binding.
Open the "Key Bindings - User" from your preferences and add this JSON:
[
{
"keys": ["CTRL+\\"],
"command": "reindent",
"args": {
"single_line": false
},
"context": [{
"key": "selector",
"operator": "not_equal",
"operand": "source.js,source.json,text.html"
}]
}, {
"keys": ["CTRL+\\"],
"command": "htmlprettify",
"context": [{
"key": "selector",
"operator": "equal",
"operand": "text.html"
}]
}, {
"keys": ["CTRL+\\"],
"command": "js_format",
"context": [{
"key": "selector",
"operator": "equal",
"operand": "source.js,source.json"
}]
}
]
This will bind -\ to the reindent command (CTRL + SHIFT + F is already taken by "Find in Files"). single_line is false to force it to reindent the whole page, just like in eclipse.
There are two additional variants of the key bindings for working with HTML and JavaScript. These require that you have the htmlprettify and js_format plugins installed. I found the default formatting inferior for HTML and Javascript, so if you are editing these files I do recommend the plugins. If you don't care about these formats, then you can delete the last two key binding entries.
Go to "preferences/Key Bindings" and add on the right panel this line
{"keys": ["ctrl+shift+f"], "command": "reindent", "args": {"single_line": false}}
that line is meant for indenting all your code in one shot so you would ctrl+a then ctrl+shift+f
Sublime has an build-in feature that does indent lines for you. You can find this when opening the command palette, then look for Indentation: Reindent Lines.
Specific actions to organize your code is harder, because of the different syntaxes of languages.
Luckily enough, Will Bond has been so nice to create a Package Manager for Sublime Text. Using this, features can be added into the editor. These packages do can add code formatting features. You can see a list of formatting packages here.
As one of the tags in your question contains HTML, I'll assume you're looking for a formatting tool for HTML. I've found a package for that, although I've got no personal experience with it. You may install it from here.
A plugin for Sublime Text , that formats (indents) HTML source code. It makes code easier for humans to read.
I would recommend reading through the docs for more information about the package.
you can set shortcut key for one line by press [ctrl+shift+f] easy!!!
goto menu Preferences -> Key Bindings – User
{ "keys": ["ctrl+shift+f"], "command": "reindent"}
see detail at http://how-to-sublime-text.blogspot.com/2014/11/reformat-code.html
Is there a smarter way of removing the tag (let's say using HTML) around a selection in Sublime text 2?
For example if I have a span tag around some text and want to remove both the start and end of this tag (and leave the text inside untouched)...
Or alternative - remove current tag and it's corresponding end tag?
The Emmet plugin (once called Zen Coding) can do what you want. Install it and press Ctrl+Shift+; within a tag's contents to unwrap the tag.
A bit easier way to do this is to use a macro:
unwrap.sublime-macro
[
{
"args":
{
"to": "tag"
},
"command": "expand_selection"
},
{
"args": null,
"command": "copy"
},
{
"args":
{
"to": "tag"
},
"command": "expand_selection"
},
{
"args": null,
"command": "paste_and_indent"
}
]
...with a ctrl+u for example:
{
"keys": ["ctrl+u"],
"command": "run_macro_file",
"args": {"file": "res://Packages/User/unwrap.sublime-macro"}
}
Pros: no plugins required, only default ST functionality. Cons: modifies clipboard data.