vscode安装vetur且配置files.associations之后js文件无高亮

本文分享了在VSCode中使用vetur插件后,JS文件无法高亮显示的问题解决过程。通过彻底清除缓存,最终实现了代码高亮。

        虽然上班在公司用vscode已经一年多了,但前段时间,我才开始在我自己的笔记本上改用vscode,可是vscode安装vetur之后,发现打开js文件一直没有高亮,这个问题,之前算是解决一半,今天终于彻底解决了。

解决思路如下:

1、前几个月在网上找了一圈,基本上都是说安装vetur之后需要配置一下files.associations, 可是根据网上那些文章,配置一遍之后发现打开HTML文件终于有了高亮,但是最近的学习内容,文件夹打开来之后只有js文件,没有高亮,打开之后就是一片白的文件,看着真是让人抓狂:

             
2、配置改了无果之后,感觉没辙,问了下其他同行,安装vetur高亮没有问题,于是想到卸载编器然后重新安装。可是卸载两遍再重新安装之后文件打开来还是和以前一样, 继续抓狂~~

3、然后我在打开配置的过程当中发现这个最新安装的编辑器居然还是有卸载之前的文件打开记录。这样的话,既然打开的历史记录还在,那么vetur这样的扩展插件应该是有缓存在本地,所以想到了是不是彻底删除本地缓存。

4、于是我找到下面两个文件夹的地址然后将对应的文件进行了删除,这下在打开我的文件夹,高亮终于出现了:

这个是装vscode拓展插件的文件夹, 删除

 

这个是装有历史记录的文件夹,删除

 

两个文件都删除之后,终于出现了我需要的高亮:

问题解决✿✿ヽ(°▽°)ノ✿

 

vscode自动规范代码{ // 安全设置 "security.workspace.trust.untrustedFiles": "open", // 允许打开不受信任的文件 "explorer.confirmDelete": false, // 删除文件时不弹出确认对话框 // 编辑器基本设置 "editor.fontLigatures": false, // 禁用字体连字 "editor.formatOnType": true, // 启用输入时自动格式化 "editor.fontVariations": false, // 禁用字体变体 "editor.unicodeHighlight.ambiguousCharacters": false, // 不高亮显示模糊字符 // 代码格式化设置 "editor.tabSize": 2, // Tab 大小设置为 4 "editor.wordWrap": "on", // 开启自动换行 "editor.fontSize": 14, // 字体大小设置为 14 "editor.defaultFormatter": "esbenp.prettier-vscode", // 默认格式化工具 "editor.insertSpaces": true, // 使用 空格 而不是Tab "editor.detectIndentation": false, // 不自动检测缩进设置 // 工作台设置 "workbench.editor.enablePreview": false, // 禁用预览模式(打开文件不覆盖) // 搜索设置 "search.followSymlinks": false, // 不跟踪符号链接 // 文件自动保存设置 "files.autoSave": "off", // 关闭自动保存 "files.associations": { "*.cjson": "jsonc", "*.wxss": "css", "*.wxs": "javascript" }, // 文件关联设置 // 编辑器功能设置 "editor.lineNumbers": "on", // 显示行号 "editor.quickSuggestions": { "other": true, "comments": true, "strings": true }, // 启用快速建议 // 代码操作设置 "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" }, // 保存时执行 ESLint 修复 // Prettier 格式化设置 "prettier.singleQuote": true, // 使用单引号 "prettier.semi": false, // 不使用分号 "prettier.trailingComma": "none", // 禁止尾随逗号 "prettier.printWidth": 100, // 每行最大字符数 "prettier.proseWrap": "never", // 文本不换行 "prettier.bracketSpacing": true, // 对象括号内添加空格 "prettier.requireConfig": true, // 格式化时优先使用配置文件(而非VSCode默认) // ESLint 设置 "eslint.enable": true, // 启用 ESLint "eslint.run": "onType", // 输入时运行 ESLint "eslint.options": { "extensions": [".js", ".vue", ".jsx", ".tsx"] }, // ESLint 支持的文件扩展名 "eslint.validate": ["vue", "javascript", "typescript", "typescriptreact", "html"], // 验证的文件类型 // Emmet 设置 "emmet.preferences": {}, // Emmet 首选项 "emmet.includeLanguages": { "wxml": "html" }, // Emmet 语言映射 // Git 设置 "git.autorefresh": false, // 禁用 Git 自动刷新 "git.autofetch": true, // 启用 Git 自动获取 // TypeScript 设置 "typescript.preferences.quoteStyle": "single", // TypeScript 使用单引号 "typescript.locale": "zh-CN", // TypeScript 使用中文语言环境 // 保存时格式化 "editor.formatOnSave": true, // 保存时自动格式化 // 语言特定设置 "[vue]": { "editor.defaultFormatter": "octref.vetur", "editor.formatOnSave": true }, // Vue 文件使用 Vetur 格式化 "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, // JavaScript 文件使用 Prettier 格式化 "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, // TypeScript 文件使用 Prettier 格式化 "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, // JSON 文件使用 Prettier 格式化 "[jsonc]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, // JSONC 文件使用 Prettier 格式化 "[scss]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, // SCSS 文件使用 Prettier 格式化 "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, // HTML 文件使用 Prettier 格式化 "[python]": { "editor.formatOnType": true }, // Python 文件启用输入时格式化 // Vetur 设置 "vetur.completion.scaffoldSnippetSources": { "prettier": { "semi": false, "singleQuote": true, "trailingComma": "none" }, "workspace": "💼", "user": "🗒", "vetur": "✌" }, // Vetur 代码片段设置 "vetur.format.defaultFormatter.js": "vscode-typescript", // Vue 中 JS 使用 VSCode TypeScript 格式化 "vetur.format.defaultFormatter.html": "prettyhtml", // Vue 中 HTML 使用 js-beautify-html 格式化 "vetur.format.defaultFormatterOptions": { "prettier": { "singleQuote": false, "semi": true, "trailingComma": "none" }, "js-beautify-html": { "wrap_attributes": "force-aligned", "wrap_line_length": 120, "end_with_newline": true } }, // Vetur 格式化选项 // 新增常规设置 "editor.minimap.enabled": true, // 启用小地图 "editor.renderWhitespace": "boundary", // 渲染空白字符 "editor.renderControlCharacters": false, // 不渲染控制字符 "editor.cursorBlinking": "smooth", // 光标平滑闪烁 "editor.cursorSmoothCaretAnimation": "on", // 启用光标平滑插入动画 "editor.smoothScrolling": true, // 启用平滑滚动 "editor.folding": true, // 启用代码折叠 "editor.foldingStrategy": "auto", // 自动代码折叠策略 "editor.showFoldingControls": "always", // 始终显示折叠控件 // 优化 Vue 文件代码层级分隔 "vetur.format.enable": true, // 启用 Vetur 格式化 "vetur.format.options.tabSize": 2, // Vue 文件使用 2 个空格缩进 "vetur.format.options.useTabs": false, // Vue 文件使用空格而非 tab // 其他设置 "explorer.compactFolders": false, // 不折叠资源管理器中的文件夹 "javascript.format.insertSpaceBeforeFunctionParenthesis": true // 函数名和括号之间插入空格 } 优化
08-12
{ "git.path":"D:/Git/bin/git.exe", // 換行 "editor.wordWrap": "on", // 是否允许自定义的snippet片段提示 "editor.snippetSuggestions": "top", // vscode默认启用了根据文件类型自动设置tabsize的选项 不检查缩进,保存后统一按设置项來设置 "editor.detectIndentation": false, // 重新设定tabsize 代码缩进修改成 2 个空格 "editor.tabSize": 2, // #每次保存的时候自动格式化 "editor.formatOnSave": false, // #每次保存的时候将代码按eslint格式进行修复 使用eslint 風格使用standard 進行代碼規則限制 "editor.fontWeight": "200", "editor.formatOnType": false, "workbench.iconTheme": "vscode-icons-mac", "git.confirmSync": false, "team.showWelcomeMessage": false, "window.zoomLevel": 0, "editor.renderWhitespace": "boundary", "editor.cursorBlinking": "smooth", "editor.minimap.enabled": true, "editor.minimap.renderCharacters": false, "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}", "editor.codeLens": true, // eslint 代码自动检查相关配置 "eslint.enable": true, "eslint.run": "onType", "eslint.options": { "configFile": "D:/.eslintrc.js", "plugins": ["html"], "extensions": [".js", ".vue"] }, // 添加 vue 支持 "eslint.validate": ["javascript", "javascriptreact", "html", "vue"], // #让prettier使用eslint的代码格式进行校验 "prettier.eslintIntegration": true, // #去掉代码结尾的分号 "prettier.semi": true, // #使用单引号替代双引号 "prettier.singleQuote": true, "prettier.tabWidth": 4, // #让函数(名)和后面的括号之间加个空格 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // #这个按用户自身习惯选择 html格式化 "vetur.format.defaultFormatter.html": "js-beautify-html", // #让vue中的js按"prettier"格式进行格式化 "vetur.format.defaultFormatter.js": "prettier", // #让vue中的js按编辑器自带的ts格式进行格式化 // "vetur.format.defaultFormatter.js": "vscode-typescript", "explorer.confirmDelete": false, "vetur.format.defaultFormatterOptions": { "js-beautify-html": { // #vue组件中html代码格式化样式 "wrap_attributes": "force-aligned", // 也可以设置为"auto", 效果会不一样 "wrap_line_length": 200, "end_with_newline": false, "semi": false, "singleQuote": true }, "prettier": { "semi": false, "singleQuote": true } }, "[jsonc]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, // 格式化stylus, 需安装Manta's Stylus Supremacy插件 "stylusSupremacy.insertColons": false, // 是否插入冒号 "stylusSupremacy.insertSemicolons": false, // 是否插入分号 "stylusSupremacy.insertBraces": false, // 是否插入大括号 "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行 "stylusSupremacy.insertNewLineAroundBlocks": false, // 两个选择器中是否换行 "prettier.useTabs": true, "explorer.confirmDelete": false, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "diffEditor.ignoreTrimWhitespace": false, // "terminal.integrated.shell.osx": "zsh", "files.associations": { "*.cjson": "jsonc", "*.wxss": "css", "*.wxs": "javascript" }, "emmet.includeLanguages": { "wxml": "html" }, "minapp-vscode.disableAutoConfig": true, "window.menuBarVisibility": "visible", "git.enableSmartCommit": true, "git.autofetch": true, "liveServer.settings.donotShowInfoMsg": true, "[html]": { "editor.defaultFormatter": "vscode.html-language-features" }, "javascript.updateImportsOnFileMove.enabled": "always", "workbench.colorTheme": "SynthWave '84", // 字體大小 "editor.fontSize": 15, // 設置行高 "editor.lineHeight": 20, "search.followSymlinks": false, "workbench.sideBar.location": "left", "vscode_custom_css.policy": true, "vscode_custom_css.imports": [ "file:///C:/vscode-transparent/synthwave84.css", "file:///C:/vscode-transparent/toolbar.css", "file:///C:/vscode-transparent/vscode-vibrancy-style.css", "file:///C:/vscode-transparent/enable-electron-vibrancy.js" ], // 高亮的颜色,emm暂时只支持这样写 "wxmlConfig.activeColor": { "color": "#e5c07b" }, // 是否禁用高亮组件 "wxmlConfig.activeDisable": false, // 是否开启保存自动格式化 "wxmlConfig.onSaveFormat": false, "wxmlConfig.format": { "brace_style": "collapse", "end_with_newline": false, "indent_char": "", "indent_handlebars": false, "indent_inner_html": false, "indent_scripts": "keep", "indent_size": 2, "indent_with_tabs": false, "max_preserve_newlines": 1, "preserve_newlines": false, "wrap_attributes": "force-expand-multiline" }, // 高亮所忽略的组件数组 "wxmlConfig.tagNoActiveArr": [ "view", "button", "text", "icon", "image", "navigator", "block", "input", "template", "form", "camera", "textarea" ], "zenMode.restore": true, "breadcrumbs.enabled": true, "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe", "[wxml]": { "editor.defaultFormatter": "qiu8310.minapp-vscode" }, "gitlens.advanced.messages": { "suppressLineUncommittedWarning": true }, "javascript.format.placeOpenBraceOnNewLineForControlBlocks": true, "editor.formatOnPaste": false, "vsicons.presets.hideFolders": true, "editor.cursorStyle": "line-thin", "editor.suggestSelection": "first", "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue", // #每次保存的时候将代码按照 eslint 格式进行修复 "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" }, "terminal.integrated.rendererType": "dom", "vscode_vibrancy.opacity": 1, "npm.fetchOnlinePackageInfo": false, "Codegeex.License": "", "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } }帮我找出vue3 会冲突的地方
最新发布
11-21
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值