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

Iml*_*bor 9 visual-studio-code vscode-settings

我正在与 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
Run Code Online (Sandbox Code Playgroud)

在此处输入图片说明

Mat*_*ner 18

VS Code 不附带对样式组件样式内联 css 的内置支持。尝试安装此扩展程序:https : //marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components

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

内联 css 的智能感知

  • 它似乎已从市场中删除。 (6认同)

Gok*_*oku 11

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

尝试:

  1. Cntrl+P

  2. 粘贴这个:ext install vscode-styled-components

  3. 选择要安装的vscode-styled-components(见下文):

正确的插件


Mar*_*ark 5

尝试:

 "editor.quickSuggestions": {
    "other": true,
    "comments": false,
    "strings": true
  },
Run Code Online (Sandbox Code Playgroud)

你想要"strings": true(默认是false我相信)反引号内的智能感知,即模板文字。

  • 我看到这个扩展:https://marketplace.visualstudio.com/items?itemName=paulmolluzzo.convert-css-in-js (2认同)