如何在VSCode的JSX文件中启用CSS IntelliSense（Styled JSX场景）

架构老林

2026-7-20

解决Next.js中styled-jsx的JSX文件IntelliSense失效问题

重新安装项目依赖
删除项目根目录的node_modules文件夹和package-lock.json（或yarn.lock）文件，然后执行命令重装依赖：
```
npm install
# 或使用yarn
yarn install
```
确保styled-jsx与next版本兼容，建议使用最新稳定版。

配置VS Code文件关联与语法支持
打开VS Code的settings.json（可通过快捷键Ctrl+,打开设置后点击右上角图标进入编辑），添加以下配置：

"files.associations": {
  "*.jsx": "javascriptreact",
  "*.tsx": "typescriptreact"
},
"emmet.includeLanguages": {
  "javascriptreact": "html",
  "typescriptreact": "html"
}

配置ESLint支持styled-jsx
确保VS Code已安装ESLint插件，在项目根目录的.eslintrc（或.eslintrc.json）中添加styled-jsx插件：
```
{
  "extends": ["next", "next/core-web-vitals"],
  "plugins": ["styled-jsx"]
}
```

检查项目配置文件
若为JavaScript项目，确保根目录存在jsconfig.json；TypeScript项目则检查tsconfig.json，添加或调整以下配置：

{
  "compilerOptions": {
    "jsx": "preserve",
    "module": "esnext",
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "baseUrl": "."
  },
  "include": ["next-env.d.ts", "**/*.js", "**/*.jsx"],
  "exclude": ["node_modules"]
}