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

Posted 2023-02-19

【中文标题】VSCode 自动完成和 IntelliSense 在反引号中不起作用

【英文标题】：VSCode autocomplete and IntelliSense are not working within backticks

【发布时间】：2020-01-04 06:42:25

【问题描述】：

我正在处理 Gatsby 项目。当我在反引号 (`)、模板文字中键入代码时，VSCode 不显示 IntelliSense 或自动完成。我安装了一堆 sn-p 扩展。但这似乎并没有解决问题。我正在使用 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

【问题讨论】：

这是什么语言？这看起来像 JS/TS，在这种情况下，反引号基本上是字符串，IntelliSense 不会在字符串中执行 afaik。

是的，它是 javascript。

【参考方案1】：

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

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

【讨论】：

好像从市场上删除了。

【参考方案2】：

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

试试：

Cntrl+P

粘贴：ext install vscode-styled-components

选择 vscode-styled-components 进行安装（见下文）：

【讨论】：

谢谢。对我有用

【参考方案3】：

试试：

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

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

【讨论】：

这有效，现在 IntelliSense 出现了。但是 IntelliSense 不会在 JS 文件中显示与 CSS 相关的建议。有没有可能？

我看到了这个扩展：marketplace.visualstudio.com/…

这个扩展是救命稻草！