详解vscode中vue代码颜色插件

vue提示插件【Vscode】

编者寄语：vscode的确是前端开发中很好的工具，安装颜色插件，从视觉上是美的享受。曾经的我遇到了vscode代码全是灰色，黑色的困惑，后来整理找到方法，整理这篇，以下高亮插件，建议大家都安装了。

在VSCode Marketplace 搜素Vue 出现关于语法高亮的插件有 vue，vue-beautify，vue-color，VueHelper，vertur等等。比较了下载数量可以了解到，vetur 是目前比较好的语法高亮插件，我们来安装一下吧。

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中vue代码颜色插件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 详解VSCode配置启动Vue项目

    详解VSCode配置启动Vue项目

    下载安装并配置VSCode 随便百度上搜个最新的VSCode安装好后,点击Ctrl + Shit + X打开插件扩展窗口进行插件扩展,这里要安装两个插件. 1.vetur插件的安装 该插件是vue文件基本语法的高亮插件,在插件窗口中输入vetur点击安装插件就行,装好后点击文件->首选项->设置 打开设置界面,在设置界面右侧添加配置 "emmet.syntaxProfiles": { "vue-html": "html", "

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

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

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

  • VsCode新建VueJs项目的详细步骤

    VsCode新建VueJs项目的详细步骤

    本文介绍了VsCode新建VueJs,分享给大家,具体如下: 使用vue-cli快速构建项目 ( vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. 安装vue-cli之前,需要先安装了vue和webpack ) · node -v //(版本低引起:bash: npm: command not found) · npm -v //以上帮助检查是否安装 node npm · 输入vue,//测试vue是否安装成功 · 输入vue list //看vue中有哪些子类 np

  • 在vscode中统一vue编码风格的方法

    vetur 很多人知道,但在 vscode 下没办法格式化 .vue 里的 html, js 很是头疼,代码风格无法统一. 所以不少人直接拆分开,然后在 .vue 中引入,虽然方法很好,但这有违 .vue 单文件组件的初衷. 本文详细介绍 vscode 下使用 vetur + prettier + eslint 来统一 vue 编码风格. vetur 插件 vetur 经过多个版本迭代,算是目前 vscode 下最好用的 vue 插件了,甚至支持 ts, webpack alias 等特性. 但

  • Vue-cli Eslint在vscode里代码自动格式化的方法

    编辑器另外一个很重要的功能就是代码格式化了,VS Code默认提供常见文件的格式化,如.js,.html等. 添加对.vue文件的格式化支持 这里我们添加对 .vue 文件的格式化支持. 1. 安装 Vetur 插件 2. 在 VS Code 的设置中添加如下规则: { "vetur.format.defaultFormatter": { "html": "prettier", "css": "prettier&qu

  • vscode下的vue文件格式化问题

    我相信基本上每一个在vscode上面码Vue代码的都会下载Vetur插件用来格式化等操作,今天Vetur更新了 0.14.2 版本,最近在使用的时候,感觉格式化总是出问题,去Vetur上面看了下,发现Vetur的配置做了下面的改动,看到几个社区都没有人说明,我就先说下,默认的格式化配置是: { "vetur.format.defaultFormatter.html": "prettyhtml", "vetur.format.defaultFormatter

  • 使用vscode快速建立vue模板过程详解

    使用vscode快速建立vue模板过程详解

    当我们希望每次新建.vue文件后,vscode能够根据配置,自动生成我们想要的内容. 打开vscode编辑器,依次选择"文件 -> 首选项 -> 用户代码片段",此时,会弹出一个搜索框,我们输入vue,将代码ctrl+c 到vue-html.json { "Print to console": { "prefix": "vue", "body": [ "<!-- $0 -->

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

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

  • 详解VScode编辑器vue环境搭建所遇问题解决方案

    前言 为什么选择VScode? 在之前我用过sublime.webstorm.atom.Brackets.eclipse.HBuilder.notepad++等等.应该还有一些用过几次的编辑器,记不起来的,这些编辑器的作用不外乎一点--为了开发迅速.基本都会自带代码提示插件.随着项目越来越大,出了一系列问题,而这些问题会大量浪费我们的时间(我们只想简单的编程),故而编辑器插件的数量和支持程度成为了我们选择编辑器的重要条件,这就是为什么选择VScode,它拥有大量的插件,可以帮助我们完成我们没必要

  • 详解Vscode中使用Eslint终极配置大全

    详解Vscode中使用Eslint终极配置大全

    在 vue项目中使用vscode编辑时,使用了如下这套配置,保存时就会根据既定vue项目中.eslintrc.js文件设置的既定规则自动校验并依据规则修复代码. 需安装插件 主要是这两个插件: ESLint Prettier - Code formatter 个人现用vscode插件截图.png vscode中setting.json中配置 { // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, /

  • 详解vscode中console.log的两种快速写法

    (一)方法一:直接在script标签中提前定义,仅适用于该html文件! let add = function(a,b){ return a + b; }; console.log(add(20,300)); const { ['log']:C } = console; C(add(20,300)); (二)方法二:按tab键快速生成console.log,且光标在()内部,再次按tab键光标自动跳转到下一行! 1.打开vscode编辑器,选择文件->首选项->用户片段,输入javascrip

  • 详解Ruby中的代码块及其参数传递

    一,块的声明    块的声明在函数调用之后,用{..}括起来,或do..end封装.{}一般用在单行语句上,do..end用在多行语句上. (1..4).each{|v| print "#{v} "} #输出1 2 3 4 块可以带参数,与函数参数不同,块参数用||封装,当然,可以带多个参数.这些参数怎么定义,实际上是在函数内部定义好的,后面会讲到. 二,块内变量的访问    块内可以访问块外的变量,也就是块外的变量在块内是可见的,如 sum = 0 (1..5).each do |v

  • 详解Ruby中的代码块对象Proc

    Proc对象 Proc是由块转换来的对象.创建一个Proc共有四种方法,分别是: 示例代码 # 法一 inc = Proc.new { | x | x + 1} inc.call(2) #=> 3 # 法二 inc = lambda {| x | x + 1 } inc.call(2) #=> 3 # 法三 inc = ->(x) { x + 1} inc.call(2) #=> 3 # 法四 inc = proc {|x| x + 1 } inc.call(2) #=> 3

  • 详解在VScode中添加代码块(含C++指令生成代码)

    详解在VScode中添加代码块(含C++指令生成代码)

    有神马用? 能够填充预设的代码 也就是当你输入一些语句时,能够自动补全一堆代码 如图: 这就可以补全一些你的模板之类的了例如当我输入MST,我希望得到一大块最小生成树的模板.简直是竞赛党必备啊hhh 步骤如何? 首先你要有VScode 在哪创建 看图 C++是世界上最好的语言,所以我选择C++ 其他语言一个道理 接着不出意外你会看到这个页面 怎么创建 具体原理就是在行头行尾加上一些符号,中间的逃逸字符和引号转义 下面给出代码,自行创建 注意*.in文件应该和下面的代码放在同一目录之下 根据需求改

  • 利用types增强vscode中js代码提示功能详解

    利用types增强vscode中js代码提示功能详解

    使用 types 增强vscode中javascript代码提示功能 微软的vscode编辑器是开发typescript项目的不二首选,其本身也是采用typescript开发的. 使用过ts的同学都知道 *.d.ts 类型声明文件,其管理工具,从最初的 tsd,到后来的 typings,一直到现在的@types,类型声明文件为ts的智能提示,类型检查提供了有力支持. 我们也可以使用类型声明文件,增强vscode编辑javascript时的智能提示. 关于vscode这方面更深的说明,请访问以下链

  • 详解Flutter中视频播放器插件的使用教程

    详解Flutter中视频播放器插件的使用教程

    目录 创建一个新的视频播放器 添加播放和暂停按钮 创建一个快进 添加一个视频进度指示器 应用视频的字幕 结论 您已经看到很多包含视频内容的应用程序,比如带有视频教程的食谱应用程序.电影应用程序和体育相关的应用程序.您是否想知道如何将视频内容添加到您的下一个Flutter应用程序中? 从头开始实现视频功能将是一项繁重的任务.但有几个插件可以让开发者的生活变得轻松.视频播放器插件是可用于 Flutter 的最佳插件之一,可满足这一要求. 在这篇文章中,您将学习如何应用视频播放器插件以及控制视频播放器

  • 详解VScode自动补全CSS3前缀插件以及配置无效的解决办法

    1.在vscode中搜索Autoprofixer 2.在安装完成之后要配置 在需要添加前缀的css文件上,右键点击命令面板,输入Autoprefixer CSS就好啦 ps: 如果想要兼容性最好的话,需要在设置配置文件setting.json里加上 (打开设置->搜索autoprefixer->点击在setting.json里编辑) //这是比较完整的兼容配置,可以根据自己的情况有选择的复制![在这里插入图片描述](https://img-blog.csdnimg.cn/20200322110

随机推荐