If I have the search field open and press enter in my code it automatically tries to search instead of giving me a line break. I've heard that there is a way to turn off this behavior and only search when the search field has focus. Anyone know how? Currently I have to hit ESC to close the search before I can add a line break and I forget to do it 95% of the time and my editor jumps to a different section of the code. Thanks!
Changing findWidgetVisible to findWidgetFocus in my keyboard shortcuts settings fixed it!
/**
* amVim Finder Fix
**/
{
"key": "enter",
"command": "editor.action.nextMatchFindAction",
"when": "findWidgetFocus"
},
{
"key": "shift+enter",
"command": "editor.action.previousMatchFindAction",
"when": "findWidgetFocus"
},
I'm currently using VSCode for Q# programming. This sometimes entails including simple qubit expressions in the comments for clarity. It is of course possible to just settle with using regular angle brackets (such as |00> or <00|), but it looks nicer using the appropriate Unicode characters (such as |00⟩ or ⟨00|). Copying and pasting these characters whenever needed is a bit cumbersome, so it would be nice to have key bindings in VSCode just for this purpose. Actually, I'd like to be able to configure VSCode for quick access to any selection of characters I might be interested at the moment.
VSCode customization supports a type command which does exactly that - types in its argument. In order to create an entry for a keybinding, open the command prompt (Ctrl+Shift+P or ⌘+Shift+P on Mac) and type Preferences: Open Keyboard Shortcuts (JSON) and insert entries of the form:
{
"key": "<key-binding>",
"command": "type",
"args": {
"text": "<character>"
}
}
where <key-binding> is the usual description of the keybinding and <character> is the desired character literal. So, for the bra-ket case above, my customization looks like this:
[
{
"key": "ctrl+shift+.",
"command": "type",
"args": {
"text": "⟩"
}
},
{
"key": "ctrl+shift+,",
"command": "type",
"args": {
"text": "⟨"
}
}
]
I am a huge Sublime Text user, and learned ways to improve my productivity using customizations in Sublime text. But as VScode is becoming popular day by day, wanted to check if there is any way which I can bind the shortcut keys to the custom actions.
For example, I select a word ABC in any file in VSCode and hit CTRL+B, and it places my own defined values around it like it should become
<b>ABC</b>
I had created the following snippet in Sublime Text, which when I wrote in Visual Studio Code - keybindings.json nothing worked.
{
"keys": [
"ctrl+b"
],
"command": "insert_snippet",
"args": {
"contents": "<b>${0:$SELECTION}</b>"
}
}
This will work in your keybindings.json:
{
"key": "ctrl+b",
"command": "editor.action.insertSnippet",
"when": "resourceExtname == .html", // this is optional
"args": {
"snippet": "<b>${TM_SELECTED_TEXT}</b>"
}
},
The optional when clause is if you want to limit the snippet's operation to .html files.
More general though is to use the emmet command which is built-in: Emmet: Wrap with Abbreviation in the command palette. Select your text, open the command palette, find that command and trigger it - type b or whatever your element is and it will wrap the selected text with the opening and closing elements.
[Note that there is a command workbench.action.toggleSidebarVisibility already bound to Ctrl-B, but the snippet above version seems to take precedence - meaning you lose the toggleSidebarVisibility keybinding functionality - that may be acceptable to you?]
I am trying to create a keybinding to change the current text document language to JSON. Here is what I am trying:
{
"key": "ctrl+alt+j",
"command": "vscode.languages.setTextDocumentLanguage",
"args": {"document":"active_doc", "languageId": "json"}
}
VSCode says
command 'vscode.languages.setTextDocumentLanguage' not found
I understand that this is a function and not a command, so the syntax must be different. Is there a way to tweak my syntax to make this work, or is there an extension that might make this work?
Thanks in advance
Here is an example of the function being called in JavaScript from another extension
Similar question posted prior to the creation of the function I am trying to access
There is an extension to change language of active editor from a keybinding:
{
"key": "ctrl+shift+8",
"command": "changeLanguageMode.change",
"args": "typescript"
}
https://marketplace.visualstudio.com/items?itemName=usernamehw.change-language-mode
I would like to be able to use autocomplete for html tags in my react/jsx code. The same way it works for html files. Can i configure sublime text 3 to enable tags autocomplete for jsx files?
Worth noting that you can enable Sublime's built-in tag closer in JSX by copying and slightly modifying the keybinding for / that comes with Default.sublime-package. Add the following to your custom keymap:
{ "keys": ["/"], "command": "close_tag", "args": { "insert_slash": true }, "context":
[
{ "key": "selector", "operator": "equal", "operand": "(text.html, text.xml, meta.jsx.js) - string - comment", "match_all": true },
{ "key": "preceding_text", "operator": "regex_match", "operand": ".*<$", "match_all": true },
{ "key": "setting.auto_close_tags" }
]
}
Assuming you're using the Babel package, the selector meta.jsx.js will match JSX syntax and enable the tag-closing behavior. The scope name may be different for other packages, in which case you can use ScopeHunter to inspect the scopes that are applied by your preferred JSX syntax.
Install:
babel & Emmet
Then add this into your Key Bindings - User
"Key Bindings - User" is on "Preferences > Key Bindings"
{
"keys": ["tab"], "command": "expand_abbreviation_by_tab", "context": [
{
"operand": "source.js",
"operator": "equal",
"match_all": true,
"key": "selector"
},
{
"key": "selection_empty",
"operator": "equal",
"operand": true,
"match_all": true
}
]
},
{ "keys": ["tab"], "command": "next_field", "context":
[
{ "key": "has_next_field", "operator": "equal", "operand": true }
]
}
It will not autoclose the brackets for you as you type, but you can just use Sublime's built-in tag closer with commandoption. for mac, or alt. for windows.
I heavily suggest the combination of babel-sublime and emmet. If you specify "JavaScript (Babel)" as your syntax, both packages will work together, with emmet properly generating "className" and "htmlFor" if needed.
The only downside is that the expand will not work with TAB but with CTRL+E. This is due to TAB having a bunch of other usage in JavaScript.
Based on Daniel's answer, I made a plugin just for this.
Source: https://github.com/FMCorz/AutoCloseTags
To install:
Add the above repository with Package Control: Add repository
Execute the command Package Control: Install package
Select AutoCloseTags
As others suggested: install Babel and Emmet !
Emmet Abbreviation's list
( see the demo here ) ( and cheat sheet here )
You don't even need to type in the angled brackets -> Emmet -> Settings will do that, the closing tag, and more!
update: Emmet (v2+) now works with the tab key for JSX and HTML elements when you start them with < .
For example <div then tab will auto complete to <div></div>
While <MyComponent then tab will expand to <MyComponent></MyComponent>
This new feature, is enabled by default. To turn it off, open the Emmet settings and change the jsx_prefix setting to false: "jsx_prefix": false
To do that open Preferences -> Package Settings -> Emmet.
Previous version of Emmet:
Use CtrlE to expand the abbreviation.
Emmet docs: great at explaining the abbreviations.. But Failed to state how to "Expand Abbreviation" - at least, I was unable to locate it.
From Sublime, I
opened up: Preferences -> Package Settings -> Emmet -> Key Bindings - Default
searched for expand_abbreviation
found ctrl+e
Happiness - Works like a Charm :-)
update: I no longer recommend AutoCloseTags.
At least in my installation of Sublime Text 4, it no longer seems to work.
Use Babel plus Emmet instead.
I also recommend installing AutoCloseTags, as provided by FMcorz and Daniel Shannon.
This combination gives
auto-closing of (interpreted tag due to nesting rules), by simply typing </, great on the fly, whereas, Emmet will
expand an "abbreviation" to full opening and closing tags (and more) by pressing Crtl-E. This is great for creating a skeleton.
If you have babel installed for sublime, try open your .js and .jsx files and go to view > syntax > open all with current .. > babel > javascript (babel) to view correct syntax highlighting and use CTRL + E to auto-complete html tag inside ur .jsx