如何在VS Code中无需切换语言类型实现Razor文件CSS类自动补全

核心结论 #

VS Code原生默认未对Razor（.razor/.cshtml）文件提供CSS类/ID自动补全的原生支持，但可以通过扩展或配置调整实现需求，且保留Razor原有的语法高亮、代码补全功能。

可行解决方案 #

1. 使用专用扩展实现一键支持 #

安装Razor CSS Class Completion扩展，该扩展专门针对Razor文件设计，无需修改语言模式：

• 自动扫描项目中的CSS、SCSS、LESS文件
• 在Razor的class/id属性输入时实时给出补全建议
• 完全保留Razor原生的语法高亮、代码片段和.NET相关补全功能

2. 通过VS Code配置增强Razor的CSS补全能力 #

手动修改settings.json，让Razor语言服务继承HTML的CSS补全逻辑，同时不破坏原有Razor功能：

1. 打开VS Code设置（快捷键Ctrl+,），点击右上角的打开设置(JSON)按钮
2. 添加以下配置：

// 确保razor文件关联正确的语言模式
"files.associations": {
    "*.razor": "aspnetcorerazor"
},
// 为aspnetcorerazor语言模式启用CSS相关补全
"[aspnetcorerazor]": {
    "editor.suggest.showClasses": true,
    "css.validate": true,
    "less.validate": true,
    "scss.validate": true
},
// 指定需要关联的样式文件路径（根据项目实际路径调整）
"css.styleSheets": [
    "./wwwroot/css/site.css",
    "./wwwroot/css/components.scss"
]

3. 保存配置后重启VS Code，即可在Razor文件中获得CSS类/ID的补全建议

3. 确保官方ASP.NET工具扩展为最新版本 #

如果你使用的是Blazor或ASP.NET Core Razor项目，确保已安装并更新ASP.NET Core Tooling扩展：

• 该扩展的最新版本已集成基础的CSS类补全功能
• 更新后无需额外配置，即可在Razor文件中直接使用相关补全

注意事项 #

• 确保项目中的样式文件未被VS Code工作区排除（检查.vscode/settings.json中的files.exclude配置）
• 若使用CSS预处理器（如SCSS），需安装对应语言扩展（如SCSS IntelliSense）以支持预处理器语法的补全
• 配置完成后建议重启VS Code，确保所有设置生效

内容的提问来源于stack exchange，提问作者ScryptKeeper