VSCode 自动完成和 IntelliSense 在反引号中不起作用

Question

我正在处理 Gatsby 项目。当我在反引号 (`) 中键入代码时，模板文字 VSCode 不显示 IntelliSense 或自动完成。我安装了一堆代码片段扩展。但这似乎并没有解决问题。我正在使用 Prettier 扩展，这会导致这种情况吗？

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

尝试：

 "editor.quickSuggestions": {
    "other": true,
    "comments": false,
    "strings": true
  },

你想要 "strings": true（我相信默认是 false）用于反引号内的智能感知，即模板文字。

Answer 2

VS Code 不附带对 styled-components style inline css. Try installing this extension: https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components

的内置支持

它为 js 和 ts 中的样式组件添加了语法高亮和 IntelliSense：

Answer 3

Matt Bierner 是正确的，VSCode 似乎不支持。

尝试：

Cntrl+P
粘贴这个：ext install vscode-styled-components
选择vscode-styled-components进行安装（见下文）：

Answer 4

只需在 vs 代码上安装 vscode-styled-components 扩展

繁荣，你很高兴:)

Answer 5

而不是import styledcomponents from 'styled-components' 我做了 import styled from 'styled-components'

这很傻，但对我有用。

const wrapper = styled.div

没有

const wrapper = styledcomponents.div

VSCode 自动完成和 IntelliSense 在反引号中不起作用

VSCode autocomplete and IntelliSense are not working within backticks

visual-studio-code

vscode-settings