I'd like to be able to edit default behaviour of "!" instead of creating my own version of "!" from scratch.
Is it possible to edit (tweak) default behaviours of Emmet abbreviations in VSC?
Yes! From the docs:
Custom Emmet snippets need to be defined in a json file named snippets.json. The emmet.extensionsPath setting should have the path to the directory containing this file.
{
"html": {
"snippets": {
"ull": "ul>li[id=${1} class=${2}]*2{ Will work with html, pug, haml and slim }",
"oll": "<ol><li id=${1} class=${2}> Will only work in html </ol>",
"ran": "{ Wrap plain text in curly braces }"
}
},
"css": {
"snippets": {
"cb": "color: black",
"bsd": "border: 1px solid ${1:red}",
"ls": "list-style: ${1}"
}
}
}
More info here.
You can also modify existing blocks using filters.
Related
I want to write a vscode setting in which tags ( inside .vue file ) that start with the prefix x- will be colored green.
tags like <x-component></x-component> and <x-lorem></x-lorem>
is it possible? and how
i tried this
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "entity.name.tag.x-*",
"settings": {
"foreground": "#00ff00"
}
}
]
},
and it not works
Unfortunately, it seems that this is not possible without installing the plugin
I used the Highlight plugin mentioned by #rioV8
it works
this is my config :
"highlight.regexes": {
"(<[^>]*x-[^>]*>)": { // A regex will be created from this string, don't forget to double escape it
"decorations": [ // Decoration options to apply to the capturing groups
{ "color": "#7ac379" }, // Decoration options to apply to the first capturing group, in this case "//<-x:"
]
}
}
I'm working with Gatsby project. When I type code inside backticks(`), template literals, VSCode doesn't show IntelliSense or autocomplete. I installed a bunch of snippet extensions. But that didn't seem to solve the problem. I'm using Prettier extension, can that cause this?
import React from "react"
import MainMenu from "./MainMenu"
import styled, { createGlobalStyle } from "styled-components"
const GlobalStyles = createGlobalStyle`
#import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap');
// Autocomplete and IntelliSense are not working in this part and it's pretty slow to type styles without those.
//
body{
font-family: 'Roboto Mono', monospace;
}
`
const LayoutWrapper = styled.div`
//Here same thing
//
max-width: 960px;
margin: 0 auto;
`
const Layout = ({ children }) => (
<div>
<GlobalStyles />
<MainMenu />
<LayoutWrapper>{children}</LayoutWrapper>
</div>
)
export default Layout
VS Code does not ship with built-in support for styled-components style inline css. Try installing this extension: https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components
It adds syntax highlighting and IntelliSense for styled-components in js and ts:
Matt Bierner is correct, VSCode seems to not support it.
Try:
Cntrl+P
Paste this: ext install vscode-styled-components
Choose vscode-styled-components to install (See below):
Try:
"editor.quickSuggestions": {
"other": true,
"comments": false,
"strings": true
},
You want the "strings": true (default is false I believe) for intellisense within backticks, i.e., template literals.
Instead of import styledcomponents from 'styled-components'
I did import styled from 'styled-components'
It's silly, but it worked for me.
const wrapper = styled.div
Not
const wrapper = styledcomponents.div
Make sure to add :
In package.json
{
"resolutions": {
"styled-components": "^5"
}
}
Then:
include in your tsconfig.json:
"plugins": [
{
"name": "typescript-styled-plugin",
"tags": [
"styled",
"css", /*and others that you like it!*/
]
}
],
And the magic comes !
You can get the auto-complete feature in styled-components using this extension of VS-Code:
NAME: vscode-styled-components
LINK: https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components
This helped me in the same scenario otherwise earlier everthing insde the backtick(`) was red coloured.
Inspecting the mustache content in the below code with Developer: Inspect TM scopes
<p>name: {{ name }}</p>
I get text.html.basic, meaning there is no separate scope for changing the color of name inside the mustache tags. Is there any other way of changing the color of template props in Visual Studio Code?
If you don't find a better way with scopes, you could try the highlight extension.
And this setting seems to work:
"highlight.regexes": {
"({{[/!^>#]*\\s*)([^}]+)(\\s*}})": [
{}, // first match group "{{" gets no color, must be here
{
// "overviewRulerColor": "#ffcc00",
"color": "#f00",
// "fontWeight": "bold"
},
{} // third match group "}}" gets no color, does not need to be here
],
}
There is inbuilt emmet suggestion of #media like in the image below and I wanted to add my custom snippets for max-width and min-width. Which I successfully did with below codes.
{
"css": {
"snippets": {
"#mediaMaxWidth": "#media(max-width: ${1:768}px) {\n\t${2}\n}",
"#mediaMinWidth": "#media(min-width: ${1:768}px) {\n\t${2}\n}"
}
}
}
Problem: : Like in inbuilt emmet there is space between #media screen , I want to create same for my custom one to looks like it so it become #media max-width and #media min-width which I can't seems to achieve.
What I tried and what I expected it to work:
{
"css": {
"snippets": {
"#media max-width": "#media(max-width: ${1:768}px) {\n\t${2}\n}",
"#media min-width": "#media(min-width: ${1:768}px) {\n\t${2}\n}"
}
}
}
There’s no way to add space in abbreviation shortcut. What you see in screenshot is a preview of expanded result, not actual snippet
As #Mark had mentioned in the comment, we can put snippets in snippets/css.json (less.json) if you use less. BUT snippet structure looks different.
To add snippets open File > Preferences > User Snippets then choose the language you want to add snippets to, in this case i choose css.
Add codes based on the documentation in the file it self. Based on my requirement codes look like this.
"media min width 768px": {
"prefix": "#media min-width",
"body": [
"#media(min-width: ${1:768}px) {\n\t${2}\n}",
"$3"
],
"description": "Media min width"
},
"media max width 768px": {
"prefix": "#media max-width",
"body": [
"#media(max-width: ${1:768}px) {\n\t${2}\n}",
"$3"
],
"description": "Media max width"
}
Result:
How can I override TinyMCE's default formatting for basic stuff like bold, underline, and strikethrough? Currently the generated HTML uses styled spans, which is normally fine. Unfortunately, in this situation I need to do some simple parsing and need the elements to be the old-style <b>, <u>, and <strike>.
The following code is what I currently have that doesn't work. Applying these styles to content continues to wrap the content in styled spans.
$('<textarea></textarea>').tinymce(
{
theme_advanced_buttons1: "bold,italic,underline,strikethrough",
theme_advanced_buttons2: "",
theme_advanced_buttons3: "",
formats:
{
bold: { inline : 'b' },
underline : { inline : 'u' },
strikethrough : { inline : 'strike' }
},
// ...
});
I found the answer on the TinyMCE forum:
$('<textarea></textarea>').tinymce(
{
plugins : 'legacyoutput', // this overrides the formats automatically
// ...
} );