VSCode autocomplete and IntelliSense are not working within backticks

Question

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

What language is this? This looks like JS/TS, in which case backticks are basically strings, IntelliSense does not execute inside strings afaik. — Enfyve, Aug 31 '19 at 08:44

score 46 · Accepted Answer · edited Dec 20 '21 at 21:56

46

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:

edited Dec 20 '21 at 21:56

comphonia

521
3
10

answered Sep 01 '19 at 04:24

Matt Bierner

58,117
21
175
206

6

It seems like it is deleted from the marketplace. – Delice Dec 12 '21 at 00:27
1

And the alternatives don't seem to do the trick. – Kikkomann Dec 28 '21 at 17:00

score 11 · Answer 2 · answered Oct 29 '20 at 03:54

11

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):

answered Oct 29 '20 at 03:54

Goku

3,329
1
8
9

score 5 · Answer 3 · answered Aug 31 '19 at 12:49

5

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.

answered Aug 31 '19 at 12:49

Mark

143,421
24
428
436

That worked and now IntelliSense shows up. But IntelliSense doesn't show CSS related suggestios in JS file. Is it possible somehow? – Imlastrebor Aug 31 '19 at 14:14
2

I see this extension: https://marketplace.visualstudio.com/items?itemName=paulmolluzzo.convert-css-in-js – Mark Aug 31 '19 at 18:10
This extension is a life saver! – Sohail Saha Jul 23 '21 at 13:31
This is the right answer and should be accepted, it answers the question about back-ticks and uses VSCode directly – Toni Leigh Feb 11 '22 at 14:08

score 1 · Answer 4 · edited Mar 02 '22 at 12:48

1

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

edited Mar 02 '22 at 12:48

benson23

16,369
9
19
38

answered Feb 24 '22 at 19:04

Lalith Yagnavalkya

49
3

score 1 · Answer 5 · answered Nov 26 '22 at 21:53

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 !

Rajveer Hayer · Answer 6 · 2022-12-12T10:29:13.917

1

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.

edited Dec 12 '22 at 10:29

answered Dec 12 '22 at 10:28

Rajveer Hayer

11
2

VSCode autocomplete and IntelliSense are not working within backticks

6 Answers6

Linked