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

最新推荐文章于 2025-09-10 15:03:13 发布

原创最新推荐文章于 2025-09-10 15:03:13 发布 · 1.2w 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#vue

文章介绍了如何在新安装的VisualStudioCode中修复代码颜色问题，包括更改语言模式、文件关联设置和vetur插件配置，以实现HTML和Vue文件的高亮显示。

新安装的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"
}
}