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

Answer 1

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:

Answer 2

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

Answer 3

Matt Bierner is correct, VSCode seems to not support it.

Try:

1. Cntrl+P

2. Paste this: ext install vscode-styled-components

3. Choose vscode-styled-components to install (See below):

Answer 4

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.