解决vscode Better Comments插件在vue文件中不显示相对应的颜色的问题

最近使用了Better Comments这款插件，发现在ts文件中可以显示对应的颜色，但在vue文件中并不显示对应颜色

解决方法如下：

1.打开插件的配置文件夹，即 c盘 -> 用户 -> 用户名 -> .vscode文件夹

2.extensions目录 -> bttter-comments配置文件夹

3.打开配置文件
aaron-bond.better-comments-3.0.2 -> out -> parser.js

4.修改配置文件，添加如下代码

case "vue":
  this.setCommentFormat("//", "/*", "*/")
break;

5. 保存代码，重启vscode即可

vscode提高效率有效使用插件：

vscode-Document This-----jsdoc注释生成。

vscode-eCSStractor-----抽取页面的class，生成一个css文档。

vscode-CSS Peek------class名字定义跳转。（终于拥有dw cc的这个css定义跳转功能）

vscode-Live Server-----http服务器（相当于使用nodejs的http-server ）。

VueHelper  Vue2代码段（包括Vue2 api、vue-router2、vuex2）

Quokka.js  可以即时显示js和ts的运行结果，想试验一些短代码的运行结果，但是又不想之后删除文件的时候可以用到

codeRunner 可以运行C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script,等开发语言并支持局部执行

IntelliSense for CSS class names  智能提示 css 的 class 名

Node.js Modules Intellisense  可以在导入语句中自动完成JavaScript / TypeScript模块。

vscode-faker   生成假数据，地址，电话，图片等等

Regex Previewer   测试正则的插件

到此这篇关于解决vscode Better Comments插件在vue文件中不显示相对应的颜色的问题的文章就介绍到这了,更多相关vscode vue颜色内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解vscode中vue代码颜色插件

    vue提示插件[Vscode] 编者寄语:vscode的确是前端开发中很好的工具,安装颜色插件,从视觉上是美的享受.曾经的我遇到了vscode代码全是灰色,黑色的困惑,后来整理找到方法,整理这篇,以下高亮插件,建议大家都安装了. 在VSCode Marketplace 搜素Vue 出现关于语法高亮的插件有 vue,vue-beautify,vue-color,VueHelper,vertur等等.比较了下载数量可以了解到,vetur 是目前比较好的语法高亮插件,我们来安装一下吧. vscode提

  • Vue3开发必备的六个VSCode插件推荐

    目录 1. Volar 2. Vue VSCode Snippets 3. Auto Close Tag 4. Vue Peek 5. Vue Theme 6. Vite 总结 今天分享 6 个 Vue3 开发必备的 VSCode 插件,可以直接用过 VSCode 的插件中心直接安装使用. 1. Volar 下载数 153 万+ 相信使用 VSCode 开发 Vue2 的同学一定对 Vetur 插件不会陌生,作为 Vue2 配套的 VSCode 插件,它的主要作用是对 Vue 单文件组件提供高亮

  • VsCode工具开发vue项目必装插件清单(推荐!)

    目录 1.概述 2.VsCode插件清单 2.1.Vetur插件让vue文件代码高亮 2.2.Vue VSCode Snippets自动生成vue模板内容插件 1.安装插件 2.使用插件生成vue模板代码 2.3.LiveServer实时刷新网页 1.安装LiveServer 2.使用LiveServer打开网页 3.开启自动保存 2.4.开发工具设置2个空格缩进 2.5.browser插件浏览器插件查看html文件 1.安装创建 2.浏览html文件 2.6.设置目录分级显示 2.7.Brac

  • 推荐VSCode 上特别好用的 Vue 插件之vetur

    推荐VSCode 上特别好用的 Vue 插件之vetur

    Vue自从发布以来就一直受到前端开发人员的热爱,而除了一些本身优秀的特征之外,还有就是丰富的插件和工具的支持和更新.虽然现在的编辑器需要安装相应的plugins才能进行Vue组件化开发,但是越来越多优秀的plugins都提供了强大的支持.比如VSCode下面的Vetur就是这样一款必备的Vue开发工具.下面就开始介绍一下它的一些功能吧 Github仓库:Vetur 官方文档:Vetur文档 语法高亮 Vetur支持.vue文件的语法高亮显示,除了支持template模板以外,还支持大多数主流的前

  • vscode 插件开发 + vue的操作方法

    如果我们需要在vscode中嵌入自己开发的vue页面就需要以下的操作 1.把开发好的vue项目打包,如果打包出来的vue执行是空白页,就需要看看之前我写的文章,vue 3 clie打包配置 -这里要注意的是,要确保vue项目里面的public有一个index用作插件打开时的模板,等一下需要做base的特换,不然插件是不知道网页的根目录在哪里 index.html -vue.config.js的配置 <!DOCTYPE html> <html lang="en">

  • VSCode提高 Node 和 Vue 开发效率的插件推荐

    在众多代码编辑工具中,我最喜欢的就是微软的vscode.首先它十分轻便,不吃硬件,运行非常顺畅:其次是其各种各样的插件使得编程效率蹭蹭地往上提,爸爸妈妈再也不用担心我要加班了(才怪!!!不加班是不可能的) 插件列表 Auto Close Tag 自动闭合HTML标签 Auto Rename Tag 修改HTML标签时,自动修改匹配的标签 Bookmarks 添加行书签 Can I Use HTML5.CSS3.SVG的浏览器兼容性检查 Code Runner 运行选中代码段(支持大量语言,包括N

  • VSCode Vue开发推荐插件和VSCode快捷键(小结)

    首先这几个是VSCode推荐Vue开发必备的插件 Vetur -- 语法高亮.智能感知.Emmet等 包含格式化功能, Alt+Shift+F (格式化全文),Ctrl+K Ctrl+F(格式化选中代码,两个Ctrl需要同时按着) EsLint -- 语法纠错 Debugger for Chrome -- 映射vscode上的断点到chrome上,方便调试(配置有点麻烦,其实我没用这个) Auto Close Tag -- 自动闭合HTML/XML标签 Auto Rename Tag -- 自动

  • Vue项目vscode 安装eslint插件的方法(代码自动修复)

    ESlint:是用来统一JavaScript代码风格的工具,不包含css.html等. 方法和步骤: 通常情况下vue项目都会添加eslint组件,我们可以查看webpack的配置文件package.json查看,也可以查看工程下是否有.eslintrc.js和.eslintignore查看到eslint是否开启. 当我们编写不符合eslint规范的代码时,启动项目会报错,比如 这个时候可以安装vscode eslint插件,就可以自动检测不符合规范的代码.打开vscode左侧扩展面板,搜索es

  • 解决vscode Better Comments插件在vue文件中不显示相对应的颜色的问题

    最近使用了Better Comments这款插件,发现在ts文件中可以显示对应的颜色,但在vue文件中并不显示对应颜色 解决方法如下: 1.打开插件的配置文件夹,即 c盘 -> 用户 -> 用户名 -> .vscode文件夹 2.extensions目录 -> bttter-comments配置文件夹 3.打开配置文件aaron-bond.better-comments-3.0.2 -> out -> parser.js 4.修改配置文件,添加如下代码 case &qu

  • 教你一招完美解决vscode安装go插件失败问题

    教你一招完美解决vscode安装go插件失败问题

    目录 前置 用vscode新建一个go文件 使用go mod 代理来安装 总结 前置 从https://studygolang.com/dl下载go1.14.6.windows-amd64.msi安装即可,安装路径选择默认,安装完成后会自动帮你配置环境变量不用自己配置了 打开cmd,查看是否安装完成 这样就代表已经成功安装了 用vscode新建一个go文件 vscode会提示你安装go插件 点击install all 这时候会安装失败 Installing github.com/mdempsky

  • 详解.vue文件中style标签的几个标识符

    .vue文件中style标签的几个标识符 在人生就要绝望的时候, 被编辑器所提示的一个scopedSlots所拯救. 卧槽, 写到最后才发现这个属性的具体卵用. 详情见最后解决办法. 问题背景 问题由来 项目中使用了elementUI框架, 与.vue文件. 现状: <template>中使用$style:[类名], <style module>进行了样式的绑定. 个人认为使用$style这种方式的绑定, 写起来很麻烦. 不仅仅是麻烦更重要的是, 没有办法直接影响和修改elemen

  • 浅谈关于.vue文件中style的scoped属性

    浅谈关于.vue文件中style的scoped属性

    本文介绍了.vue文件中style的scoped属性以及踩到的坑,具体如下: scoped可以实现style只作用于当前的.vue文件 <template> <div class="user"></div> </template> <script> </script> <style lang='less' scoped> .user { color:#333; } </style> 上面的文

  • 详解.vue文件中监听input输入事件（oninput）

    详解.vue文件中监听input输入事件（oninput）

    .vue文件其实是一个组件,关于它的说明我之前也写过一篇文章,地址:.vue文件,今天这篇文章要讲的是.vue文件中监听input的输入值变化事件.需求是这页面中,改变input的值,就调用一个事件,第一想到的是oninput. oninput 事件在用户输入时触发,菜鸟教程中的用法是: 但是在.vue中这样写是没有作用的: <input type="text" id="cardsNum2" value="1" @oninput =&quo

  • 详解vue文件中使用echarts.js的两种方式

    最近工作中需要用到echarts,由于项目是用的vue-cli开发的.在网上搜到vue中合成了vue-echarts,但是不想使用vue中规定好的数据格式,于是就自己做了一个vue项目引用原生echarts的简单demo,实现过程如下:用了两种实现方式 准备工作 1.安装echarts依赖 控制台输入:npm install echarts --save 2.全局引入 main.js中引入 import echarts from 'echarts' Vue.prototype.$echarts

  • vue在App.vue文件中监听路由变化刷新页面操作

    在路由跳转时,会出现页面需要重新刷新一遍才能获取数据加载页面,这时添加一个监听器,如果跳转到页面刷新一次. export default { name: 'App', provide(){ return{ reload:this.reload } }, data(){ return { isRouterAlive:true, } }, //监听器 watch: { // 方法1 '$route' (to, from) { //监听路由是否变化 // console.log(999) if(to.

  • 分离vue文件中css、js代码的简单技巧

    目录 场景 方法 index.vue 基础代码 index.scss 基础代码 index.js 基础代码 拓展 代码 总结 场景 1.因为早期是iOS开发,形成的MVC习惯,个人喜欢css.js代码独立放一个文件里面,也就是分离样式模块和业务处理模块 2.写复杂界面.复杂业务的时候,界面.样式.业务代码都放.vue文件里面,代码量很大,几千上万行的,难受,割了吧(简单页面可忽略) 3.基于vue2 cli3项目 方法 挺简单的,就是利用下ES6的import和export 例如mockData

  • 关于vue文件中index.vue的使用方法

    目录 vue文件中index.vue使用 vue的index.html总结 为啥要有index.html 单页面应用 index.html实战代码汇总 vue文件中index.vue使用 <template> <div> <keep-alive> //组件缓存 <home-page v-if="pageName === 'homePage'"></home-page> </keep-alive> <add-p

  • vue项目中使用bpmn为节点添加颜色的方法

    内容概述 bpmn是比较方便的绘制流程图的插件,官方demo https://github.com/bpmn-io/bpmn-js-examples 本文主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下. 前情提要 上文我们已经实现了在外部更改节点名.此时又有新玩法:在流程图中,根据节点状态为其标记不同颜色.例如:已完成:黄色,正在进行:绿色,本次我们通过两种方式来实现该需求.效果: 方式1:modeling.setColo

随机推荐