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样式内联CSS的内置支持。尝试安装此扩展程序：https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components

它为js和ts中的样式化组件添加了语法突出显示和IntelliSense：

Answer 3

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

尝试：

1. Cntrl+P

2. 粘贴以下内容：ext install vscode-styled-components

3. 选择 vscode样式的组件进行安装（如下所示）：