I use an include rule in Markdown.tmLanguage to get some LaTeX syntax highlighting for LaTeX environments in Markdown files.
"tex_environments": {
"name": "markup.raw.inline.markdown",
"comment": "TeX Environments",
"begin": "\\\\begin\\{[^\\}]*\\}",
"end": "\\\\end\\{[^\\}]*\\}",
"patterns": [
{ "include": "text.tex.latex" }
]
}
Inside these environments I still get HTML autocompletion. The Scope Hunter plugin shows the following scopes:
text.html.markdown
meta.paragraph.markdown
markup.raw.inline.markdown
I assume that the first scope determines the language for autocompletion? Can I convince Sublime that I want LaTeX autocompletion?
Related
I am currently creating a language extension. When adding comments (starts with $$), I ran into a hurdle.
"comments":{
"patterns": [{
"name": "comment.line.sahutorepol",
"match": "\\$\\$.*$\\n?"
}]
},
Despite the regex matching and being escaped properly, there is no highlighting and the inspect tool confirms that its not properly detected.
I have tried placing the match key outside the patterns array, to no change.
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": "⟨"
}
}
]
The Sublime Text documentation is clear on the syntax for HTML, but not clear on where to place the file for mac using version 3. I want to generate my own auto-completes for Plain Text. Ideally allowing me to down/up arrow through a list of likely auto-completes.
{
"scope": "text.html - source - meta.tag, punctuation.definition.tag.begin",
"completions":
[
{ "trigger": "a", "contents": "$0" },
{ "trigger": "abbr\t<abbr>", "contents": "<abbr>$0</abbr>" },
{ "trigger": "acronym", "contents": "<acronym>$0</acronym>" }
]
}
All package resource files need to be stored in a Package for Sublime to be able to find and load it. For your own customizations, the appropriate place to place the file is in your User package, which you can find via Preferences > Browse Packages from the menu.On MacOS, that would be Sublime Text > Preferences > Browse Packages.
In order to have completions for plain text, you need to change the scope from the HTML specific scope to one for plain text.
In order to determine the scope that you want to apply (which also counts for things like Key Bindings, Snippets, Build Systems, and so on) you can select Tools > Developer > Show Scope Name from the menu (see the menu for the key binding assigned to this) to see what the full scope is for the current cursor location.
As evidenced from the scope you mentioned in your question, scopes can be quite complex to allow you to dial in as much specificity as you want.
For the case of simple plain text, as evidenced by the command I mentioned above, the following is the example completions set to work in plain text:
{
"scope": "text.plain",
"completions":
[
{ "trigger": "a", "contents": "$0" },
{ "trigger": "abbr\t<abbr>", "contents": "<abbr>$0</abbr>" },
{ "trigger": "acronym", "contents": "<acronym>$0</acronym>" }
]
}
Note that along with the location of the file, the extension is also important, otherwise Sublime won't know what it's supposed to contain.
How can I create custom emmet snippet with the highest possible priority to display in vscode?
When I updated html.json to add my own snippet for comment (with autor), I still see default emmet "c" snippet as first in list:
"Comment": {
"prefix": "c",
"body":[
"<!-- atiris: $1 -->$2"
],
"description": "Insert comment into html code"
}
That means I always have to choose the second option first.
Is there any property / settings to prioritize my own snippets?
You can use BetterSnippets vscode extension. It provides way more customization then builtin snippets. For your case you can use smth like this:
"betterSnippets.customSnippets": [
{
"name": "c",
"body": "<!-- atiris: $1 -->$2",
"when": {
"languages": [
"html"
],
},
"sortText": "!1"
},
]
SortText property is what you're looking for. I use !1 to make snippets order more customizable e.g. if I would assing sortText: "!2" to other snippet it will appear under the snippet with !1
You are editing the intellisense snippets with the above code rather than the Emmet snippets.
Regarding your question, the following link may help you prioritize which snippets are shown first: https://github.com/Microsoft/vscode/issues/32346
Regarding adding snippets to Emmet, the following should help:
In the settings.json file you can add the line
"emmet.extensionsPath": "/Users/username/Documents/code snippets"
(changing the path to a folder of your choosing)
Then add in that folder a file named snippets.json
You can use the format outlined in the link below to add snippets.
https://code.visualstudio.com/docs/editor/emmet
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