VS code 打开项目代码没有颜色区分

文章介绍了如何在新安装的VisualStudioCode中修复代码颜色问题,包括更改语言模式、文件关联设置和vetur插件配置,以实现HTML和Vue文件的高亮显示。
摘要由CSDN通过智能技术生成

新安装的VsCode ,打开发现代码都是白色,没有颜色区分,可以选择右下方的纯文本修改,但是只对那一个页面有用,其它页面还是没有用,
可以进行如下修改即可。
1、右键 -->Command Palette

2、输入Change Language Mode

3、选择Configure File Association for ‘.vue’

4、选择html

5、安装vetur之后不生效以及解决方法

打开文件——首选项——设置——最下面的vetur,进入到 settings.json文件编辑之中,将以下代码复制进去:

{
 // 强制单引号
 "prettier.singleQuote": true,
 // 尽可能控制尾随逗号的打印
 "prettier.trailingComma": "all",
 // 开启 eslint 支持
 "prettier.eslintIntegration": true,
 // 保存时自动fix
 "eslint.autoFixOnSave": true,
 // 添加 vue 支持
 "eslint.validate": [
  "javascript",
  "javascriptreact",
  {
   "language": "vue",
   "autoFix": true
  }
 ],
 // 使用插件格式化 html
 "vetur.format.defaultFormatter.html": "js-beautify-html",
 // 格式化插件的配置
 "vetur.format.defaultFormatterOptions": {
  "js-beautify-html": {
   // 属性强制折行对齐
   "wrap_attributes": "force-aligned"
  }
 },
 "vetur.format.defaultFormatter": {
     "html": "prettier",
     "css": "prettier",
     "postcss": "prettier",
     "scss": "prettier",
     "less": "prettier",
     "js": "prettier",
     "ts": "prettier",
     "stylus": "stylus-supremacy"
 },
 // html颜色高亮
 "files.associations": {
     ".eslintrc": "json",
     "*.vue": "html"
 },
 "emmet.syntaxProfiles": {
     "javascript": "jsx",
     "vue": "html",
     "vue-html": "html"
 }
}

然后就实现了代码高亮等需要的功能了。

VSCode中,如果Vue代码全是白色,无法补全和显示标识符,可以按照以下方法解决。 首先,点击VSCode编辑器中的"方框样式图标",安装vetur插件。这个插件可以完美解决这个问题。 另外,安装颜色插件也是一个不错的选择,可以让代码从视觉上更加美观。 如果以上方法都不起作用,你可以尝试修改语言模式来解决。具体步骤如下: 1. 在右下角选择语言模式(可能不是Diff,可以选择自己熟悉的语言模式)。 2. 在语言模式下拉菜单中选择自动检测下的".vue"的配置文件关联(或者在英文版中选择"Configure File Association for '.vue'...")。 3. 选择HTML作为语言模式。 4. 这样应该可以解决问题,Vue代码中应该能够显示颜色了。 通过以上方法,你应该能够解决VSCodeVue代码全是白色的问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vscode中.vue文件代码白色解决方法](https://blog.csdn.net/qq_46201146/article/details/125774253)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [详解vscodevue代码颜色插件](https://download.csdn.net/download/weixin_38633897/12951079)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [解决vscode里的vue文件代码白色](https://blog.csdn.net/qq_39669919/article/details/125769596)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值