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.
Related
VSCode highlights nested classes with parent selector as properties in SCSS as seen here:
&__recommendation is highlighted in blue which is a bit confusing. Can i make it so vscode highlights it in yellow like a class selector? I'd like it to be like this(it's a .less file):
The code if someone needs to copypaste it:
.product-card {
padding: 15px 27px;
color: red;
font-family: "DM Sans";
font-size: 16px;
font-weight: 700;
&__recommendation {
display: flex;
}
}
Had to add in settings.json:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": [
"entity.name.tag.reference.scss",
"entity.other.attribute-name.parent-selector-suffix.css"
],
"settings": {
"foreground": "#D7BA7D"
}
}
]
}
I've used Developer: Inspect Editor Tokens and Scopes command to find which scopes i need
More information here:
VS Code change theme color only for CSS
https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide
https://code.visualstudio.com/api/extension-guides/color-theme#syntax-colors
https://code.visualstudio.com/api/language-extensions/semantic-highlight-guide#theming
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.
I have content with placeholder such as [[name]], [[lastname]].
I want everything from [[ until ]] gets highlight, for example in yellow background while the real content that will be save in DB is still plain text.
For easier to understand, please take a look at this link. https://ckeditor.com/docs/ckeditor4/latest/features/placeholder.html
It is placeholder plugin for CKEditor. And here is working sample. https://ckeditor.com/docs/ckeditor4/latest/examples/placeholder.html
Currently I use textpattern plugin for TinyMCE and this code.
tinymce.init({
// options...
'textpattern_patterns': [
{'start': '[[', 'end': ']]', 'cmd': 'KPHW'}
],
'setup': function(editor) {
editor.addCommand('KPHW', function(ui, v) {
let contentText = editor.selection.getContent({ format: 'text' });
editor.execCommand('mceInsertContent', false, '<span style="background-color: yellow;">[[' + contentText + ']]</span>');
});
}
});
But it replace plain text [[placeholder]] with <span style="background: yellow;">[[placeholder]]</span> which is wrong.
Found this variable plugin https://github.com/ziktar/tinymce-variable.
Still have some bugs but is most active.
I would like to have the same option as word to put a border around a selected part of the editor's content.
Is there such option? or any plugin doing it ?
Google search returns nothing for this specific issue.
Well as I couldn't find the feature, I actually made my own plugin, here it is :
tinymce.PluginManager.add('borderinsert', function(editor, url) {
editor.addButton('border_insert', {
text: 'Border',
icon: false,
onclick: function() {
var text_selected = editor.selection.getContent();
var text_modified = "<span style='border: 1px solid black; padding: 1pt 2pt;'>"+text_selected+"</span>";
editor.selection.setContent(text_modified);
}
});
});
Create a new folder in your tinymce plugin directory and call it borderinsert
Create a new file called plugin.min.js, paste the code in it, then just add the plugin name in your tinymce init as follow :
tinymce.init({
...
your options
...
plugins: [... your plugins ... , borderinsert],
toolbar1: "border_insert"
I've been looking for hours to find a plugin that would add somthing like "padding: 5px" to an image. Does everyone do this through plain html? Our customer need a way to add this simply with the use of a button or right click context menu. Any suggestions/solutions or do I have to develop this myself?
Suggestions concerning other products than TinyMCE is not necessary.
The easiest to use is to add a custom stylesheet which only need to be set as a parameter (content_css). Example code snippet for the tinymce configuration:
...
theme: 'advanced',
content_css: "http://my_server/my_css/my_custom_css_file.css",
...
This css should contain something like the following
img {
padding-left: 5px;
}
The code for the tinymce button is a bit more complex (but if wised i can post it as well) and the css gets set using the following
$(ed.get('my_editor_id').getBody()).find('img').css('padding-left','5px');
UPDATE: Button code:
tinyMCE.init({
...
setup : function(ed) {
ed.onInit.add(function(ed, evt) {
ed.addButton ('wrap_div', {
'title' : 'my title',
'image' : 'my_image.png',
'onclick' : function () {
ed.getBody().find('img').css('padding-left','5px');
}
});
});
}
});