Is there a way how to force Visual Studio Web Essentials to insert single quotes instead of double quotes?
For instance so that div.col-xs-1 TAB produces <div class='col-xs-1'></div> instead of default <div class="col-xs-1"></div>?
I am using Visual Studio 2013 Update 4 with Web Essentials 2013 v. 2.5.3.
Not to be a johnny come lately, but I was having trouble getting this to work in VS code, and so I thought I would post a solution for anyone still having this problem. My solution was to go into settings (ctrl-,) > user settings > extensions > emmet and under preferences click "Edit in settings.json". There, I added this to the user settings:
"emmet.syntaxProfiles": {
"xml": {
"attr_quotes": "single"
},
"html": {
"attr_quotes": "single"
},
"js": {
"attr_quotes": "single",
"self_closing_tag": true
},
"jsx": {
"attr_quotes": "single",
"self_closing_tag": true
}
}
Where each language you can define settings for. This worked for me.
To get single quotes working with JSX you will need to update or create the syntaxProfiles.json in ~/emmet with the syntax profile. If ~/emmet does not exist create it.
The key is the file extension and the value is the name of the profile that extension will use.
So in ~/emmet/syntaxProfiles.json
/* 'js' will map files with .js extension to use the js profile*/
/* 'jsx' will map files with .jsx extension to also use the js profile*/
{
"js": "js",
"jsx": "js"
}
And in ~/emmet/profiles.json
/* create or add the 'js' profile */
{
"html": {
"attr_quotes": "double"
},
"js": {
"attr_quotes": "single",
"self_closing_tag": true
}
}
This should work for most editors but I have only tried in atom.
https://github.com/emmetio/emmet-atom/issues/68
Related
I've recently moved from Atom to VSCode, while I managed to customise most of the editor according to my likings, I am still missing a few features that Atom had that I enjoyed.
One of those things is that the "id" attribute in Atom used to be a specific colour, something similar to #99FFFF. I've looked through themes but I couldn't manage to find one that makes the id attribute colour different then the rest of them.
Another feature that I enjoyed was the fact that when a new HTML element was created, eg. a div, it came with the most used, basic attributes by default. I got the hang of using the emmet snippets but it still doesn't work the same, probably because I don't know exactly how to use it properly yet. If there is a cheat sheet for this it would be greatly appreciated, or at least a few examples. Let's say I want to create an input element with a type, name, id and placeholder attribute, how would I go about to do that with emmet snippets?
Here is my settings.json
"editor.fontFamily": "'JetBrains Mono', Consolas, monospace",
"editor.fontLigatures": true,
"editor.letterSpacing": 0.4,
"editor.smoothScrolling": true,
"workbench.iconTheme": "material-icon-theme",
"workbench.colorCustomizations": {
"editor.background": "#232323",
"sideBar.background": "#272727",
"sideBar.foreground": "#C9C9C9",
"editor.foreground": "#C9C9C9",
"statusBar.background": "#272727",
"activityBar.background": "#232323",
"titleBar.activeBackground": "#232323",
},
"window.zoomLevel": 1,
"emmet.triggerExpansionOnTab": true,
"emmet.showSuggestionsAsSnippets": true,
"editor.snippetSuggestions": "top"
You can change the color of the word id or its attribute value using the tokenColorCustomizations object in your settings.com:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": [
"meta.attribute.id.html entity.other.attribute-name" // the word id
],
"settings": {
"foreground": "#ff0000",
// "fontStyle": "bold"
}
},
{
"scope": [
"meta.attribute.id.html string.quoted.double.html" // the id's vaue
],
"settings": {
"foreground": "#ff0000",
// "fontStyle": "bold"
}
}
]
}
See Editor Syntax Highlighting.
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'm trying to create my first Chrome extension.
It's basically an adblocker for specific elements, in this case - the Facebook comments section.
It works with the all_urls but not with that specific domain.
Manifest file:
{
"name": "My extension",
"version": "1.0",
"manifest_version": 2,
"content_scripts": [
{
"matches": ["http://visir.is/*"], //where your script should be injected
"css": ["style.css"] //the name of the file to be injected
}
]
}
style.css file:
.fbcomment {
display: none;
}
Any ideas how to correct "matches"?
I have tried *://visir.is/* as specified in https://developer.chrome.com/extensions/match_patterns but it only works with all_urls
Viktor,
You are on the wrong way. Your extension should work on Facebook site, and so the matches statement in the manifest must be exactly as the following:
"matches": ["https://www.facebook.com/*"]
Than you need to find all the comments in the timeline (most probably by css class), detect the presence of the target site address (//visir.is/) and then hide these comments.
Because the timeline dynamically load more posts you will also need to observe the new nodes and apply your function on them too (see the example from my Chrome extension below):
var obs = new MutationObserver(function (mutations, observer) {
for (var i = 0; i < mutations[0].addedNodes.length; i++) {
if (mutations[0].addedNodes[i].nodeType == 1) {
$(mutations[0].addedNodes[i]).find(".userContentWrapper").each(function () {
injectFBMButton($(this));
});
}
}
injectMainButton();
});
obs.observe(document.body, { childList: true, subtree: true, attributes: false, characterData: false });
I am having problems trying to create a simple personalized shortcut on the chrome's new tab page. Having no experience in the coding world, i followed the steps in this cool site.
http://www.howtogeek.com/169220/how-to-create-custom-chrome-web-app-shortcuts-for-your-favorite-websites/
The problem is that when loading the uncompressed extension, it mentions that it cannot find the manifest file or is unreadable.
{
“manifest_version”: 2,
“name”: “cnn“,
“description”: “cnn site“,
“version”: “1.0″,
“icons”: {
“128″: “128.png”
},
“app”: {
“urls”: [
"http://cnn.com/"
],
“launch”: {
“web_url”: “http://cnn.com/”
}
},
“permissions”: [
"unlimitedStorage",
"notifications"
]
}
Is it correct? Does it have anything to do with my chrome language set to portuguese? I have already created an 128.png image, and the notepad title is exacly "manifest.json"
Hope you can help, Cheers SRD
Your quotation marks don't look correct.
Instead of using “ and ”, use ".
I'm trying to build a Chrome Extension that appears as an icon in the address bar which, when clicked, sets contenteditable=true on all elements on the page, and then when clicked again sets them back to contenteditable=false.
However, I'm falling at the first hurdle... The icon isn't even showing up in the address bar.
Here's my manifest file:
{
"name": "Caret",
"version": "1.0",
"description": "Allows you to edit the content on any webpage",
"page_action": {
"default_icon": "icon.png"
},
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["jquery.js", "caret.js"]
}
],
"permissions" : [
"tabs"
]
}
and here's the caret.js script:
chrome.browserAction.onClicked.addListener(function(Tab) {
$("*").attr("contenteditable",true);
});
This is my first attempt at an extension, so it's quite probably a newbie mistake, but I'd really appreciate any help or advice!
Ok, turns out I needed to use chrome.pageAction.show(tab.id);, which meant I needed to get the ID of the current tab, which is achieved with:
chrome.tabs.getSelected(null, function(tab) {
chrome.pageAction.show(tab.id);
});
BUT it turns out you can't use chrome.tabs within a content script, so I had to switch to using a background page instead.
This is no longer possible as of last release.
Chrome extension page action appearing outside of address bar
https://groups.google.com/a/chromium.org/forum/#!searchin/chromium-extensions/upcoming/chromium-extensions/7As9MKhav5E/dNiZDoSCCQAJ
My answer to this other question gives the solution. FYI, the second code issue noted in that answer is also relevant to your code: You want the icon to appear for all pages, so you should use browser_action, not page_action. Either will work, but using a page action on every page goes against convention and makes for a less consistent end-user experience.
I had a similar problem, here are the steps I followed to solve it:
I altered my manifest.json to include the following:
{
"background": {
"scripts": ["background.js"],
"persistent":false
},
"page_action": {
"default_icon": "logo.png",
"default_title": "onhover title",
"default_popup": "popup.html"
}
}
Then I inserted the following code into my background script:
// When the extension is installed or upgraded ...
chrome.runtime.onInstalled.addListener(function() {
// Replace all rules ...
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
// With a new rule ...
chrome.declarativeContent.onPageChanged.addRules([
{
// That fires when on website and has class
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { hostContains: 'myurl', schemes: ['https', 'http'] },
css: [".cssClass"]
})
],
// And shows the extension's page action.
actions: [ new chrome.declarativeContent.ShowPageAction() ]
}
]);
});
});
The documentation for this can be found here... https://developer.chrome.com/extensions/declarativeContent
I did this:
chrome.tabs.onUpdated.addListener(function(id, info, tab){
if (tab.url.toLowerCase().indexOf("contratado.me") > -1){
chrome.pageAction.show(tab.id);
}
});