I need advice on how to write emmet HTML shortcut key in VS code on Linux mint for below. Thanks in advance.
<div><span>span=1</span></div>
<br>
<div><span>span=2</span></div>
<br>
<div><span>span=3</span></div>
<br>
<div><span>span=4</span></div>
<br>
<div><span>span=5</span></div>
<br>
I am not sure how to create an 'emmet' command, but you could create an html snippet to accomplish the same thing. Click on Preferences->User Snippets->html and it should open a file called html.json in the editor.
You can add the following to that html.json file:
"emmet spans": {
"prefix": "e-span",
"body": [
"<div><span>span=1</span></div>",
"<br>",
"<div><span>span=2</span></div>",
"<br>",
"<div><span>span=3</span></div>",
"<br>",
"<div><span>span=4</span></div>",
"<br>",
"<div><span>span=5</span></div>",
"<br>"
],
"description": "5 spans with line breaks"
}
A working sample snippet file would look like:
{
// Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
// "Print to console": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"emmet spans": {
"prefix": "e-span",
"body": [
"<div><span>span=1</span></div>",
"<br>",
"<div><span>span=2</span></div>",
"<br>",
"<div><span>span=3</span></div>",
"<br>",
"<div><span>span=4</span></div>",
"<br>",
"<div><span>span=5</span></div>",
"<br>"
],
"description": "5 spans with line breaks"
}
}
Once that file is saved you should be able to edit .html files and when you type e-span that html snippet will be added to your .html file.
Emmet shotcut below will give the result you expected. You can find more on emmet cheat sheet
((div>span{span=$})^br)*5
<div><span>span=1</span></div>
<br>
<div><span>span=2</span></div>
<br>
<div><span>span=3</span></div>
<br>
<div><span>span=4</span></div>
<br>
<div><span>span=5</span></div>
<br>
Related
I found that when you type.print at the end of the line in pycharm, it will automatically convert this line to print(line). So I want to know whether vscode can achieve such a function with snippet.
I have written a snippet after googling.
"print": {
"prefix": "print",
"body": "\nprint(${TM_CURRENT_LINE-})"
}
However, there is a problem in this snippet: the prefix will be added during conversion. Besides, it only adds an additional line instead of changing the current line.
demonstration of snippet now
you can do it like this：
".print": {
"prefix": ".print",
"body": ["\nprint(${TM_CURRENT_LINE/(^.+)(\\..+)/$1/g})"],
}
How can I change the color of the HTML open/close tags in VScode to match the image below? I have tried using the Highlight Matching Tag extension and the following settings, but this only works on selecting (onFocus) of the tags. I want the actual font color for open tags to be different than all the closing tags. Thank you!
"highlight-matching-tag.styles": {
"opening": {
"name": {
"custom": {
"color": "#007fff",
}
}
},
"closing": {
"name": {
"custom": {
"color": "#F02931"
}
}
}
},
You can do this by customizing the VS Code theme that you are currently using (see the end result on the last image).
CUTOMIZING THE THEME
In the VSCode open the Command Palette by pressing Ctrl + Shift + P, and type/select Preferences: Open Settings (JSON).
This will open the editor Settings .json file.
Set/add new rules for the editor token color customization.
Adding the below snippet to the settings.json will change the color of the closing tags (name) in JSX, for the theme Dark (Visual Studio).
TL;DR
Paste the below snippet to your editor settings JSON, to enable the color > rules for a particular theme.
settings.json
"editor.tokenColorCustomizations": {
"[Visual Studio Dark]": { // Name of the theme that we want to customize, same as the value from "workbench.colorTheme"
"textMateRules": [ // TextMate grammars tokenization settings
{
"name": "Opening JSX tags",
"scope": [
"entity.name.tag.open.jsx", // HTML opening tags (in JSX)
"support.class.component.open.jsx", // JSX Component opening tags
],
"settings": {
"foreground": "#007fff",
}
},
{
"name": "Closing JSX tags",
"scope": [
"entity.name.tag.close.jsx", // HTML closing tags (in JSX)
"support.class.component.close.jsx", // JSX Component closing tags
],
"settings": {
"foreground": "#F02931",
}
},
]
}
}
SETTING ADDITIONAL SCOPES:
Additionally you can inspect the particular token (e.g. tag) in order to see the name of the scope that you want to style.
In the the Command Palette Ctrl + Shift + P open the Developer: Inspect Editor Tokens and Scopes to see the TextMate scope names of the parts (opening tag, closing tag, etc.) that you want to modify.
For a more advanced matching and going beyond jsx you may want to reference the TextMate grammars
I am trying to use the Sublime Text Plugin RegReplace package so I can highlight a line of text and replace spaces with dashes.
Goal
Hello My Name is Jesse, Highlight, CTRL + . replaces with:
Hello-My-Name-is-Jesse -- for the purpose for saving time creating markdown links.
Currently Working, But Runs Entire File
I would really like this to only replace the text I have highlighted wit a hotkey, is this possible?
I have this in reg_replace_rules.sublime-settings
{
"replacements": {
"replace_spaces_with_dash": {
"find" : "(\\s)",
"replace": "-",
"greedy": true,
"case": false
}
}
}
Here is my User Hotkeys
{
"keys": ["ctrl+."],
"command": "reg_replace",
"args": {"replacements": ["replace_spaces_with_dash"]}
},
However, this replaces the entire file with spaces. I am missing something I hope, I am not sure the scope. Any help would be appreciated.
Is there a way to paste a multi-cursor (Ctrl+d, Ctrl+d, ... Ctrl+C) select, stripped of its newlines?
If [...] represents the highlight, and ⦙ the cursor:
The ⦙[red].
The ⦙[blue].
The ⦙[green].
And if I pasted I'd get:
red
blue
green⦙
but instead I want
redbluegreen⦙
Is this possible?
Save the following script #:
/Packages/Paste Without NewLines/paste_without_newlines.py
import sublime, sublime_plugin
class paste_without_newlines( sublime_plugin.TextCommand ):
def run( self, edit ):
clipboard = sublime.get_clipboard()
clipboard = clipboard.replace( "\n", "" )
sublime.set_clipboard( clipboard )
self.view.run_command( "paste" )
To execute via Command Palette > Paste Without NewLines, add the following code #:
/Packages/Paste Without NewLines/Default.sublime-commands
[
{
"caption": "Paste Without NewLines",
"command": "paste_without_newlines",
},
]
To execute via Ctrl + Shift + Alt + V, add the following code #:
/Packages/Paste Without NewLines/Default.sublime-keymap
[
{
"keys": ["ctrl+shift+alt+v"],
"command": "paste_without_newlines",
},
]
For anyone else stumbling across this, there's a sublime text package that solves this exact problem, it's called Paste PDF Text Block.
You can then Ctrl+Alt+v the text you want to copy from a pdf file into a new file in Sublime Text.
Worked a treat, and is a good solution if you don't know enough about making your own packages in sublime text, like me :(
One of the neat things about Chrome is that, if you type a word on the address bar, it suggests what relevant URLs might be. For example if I type "New York", it suggests nytimes.com
Can an extension be developed that provides customized suggestions? For instance, if I have an internal company website, say foo which hosts documents with numeric IDs - say http://domain.com/123 or http://domain.com/234. When someone types "123" on the browser address bar, I want http://domain.com/123 to show as a suggestion (even if it has never been accessed before).
Is something like this possible? If so, I would love some pointers (I've never developed a Chrome extension, but if possible, I can look things up and get this implemented).
Thanks!
Raj
Yes, it is possible through Omnibox, https://developer.chrome.com/extensions/omnibox.html
I have written a sample implementation here :
Manifest File:
{
"name": "Omnibox Demo",
"description" : "This is used for demonstrating Omnibox",
"version": "1",
"background": {
"scripts": ["background.js"]
},
"omnibox": {
"keyword" : "demo"
},
"manifest_version": 2
}
JS File:
chrome.omnibox.setDefaultSuggestion({"description":"Search %s in Dev Source Code"});
chrome.omnibox.onInputStarted.addListener(function() {
console.log("Input Started");
});
chrome.omnibox.onInputCancelled.addListener(function() {
console.log("Input Cancelled");
});
chrome.omnibox.onInputEntered.addListener(function (text) {
console.log("Input Entered is " + text);
});
chrome.omnibox.onInputChanged.addListener(
function(text, suggest) {
console.log('inputChanged: ' + text);
suggest([
{content: text + " one", description: "the first one"},
{content: text + " number two", description: "the second entry"}
]);
});