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.Bracket Pair Colorizer彩虹括号
    • 2.8.Material Icon Theme 项目图标插件
    • 2.9.语法检查格式化插件ESLint+Prettier
  • 总结

1.概述

这篇文章总结下使用VscCode工具开发VUE项目都有哪些插件是必须要安装，这些插件都是开发的好伴侣。

当新建一个vue项目时，经常需要在VsCode工具中安装插件，但是没有符合开发项目的插件清单，寻找这些插件还是很费时间，这里总结的是一份项目开发必备的插件清单。

2.VsCode插件清单

2.1.Vetur插件让vue文件代码高亮

vue项目中vue结尾的文件代码通默认都是没有高亮显示，安装Vetur插件可以让vue文件代码高亮。

2.2.Vue VSCode Snippets自动生成vue模板内容插件

在VScode工具中使用vue开发项目，创建每个组件都要写相同的内容是一件繁琐的事情，我们可以交给插件帮我们完成

1.安装插件

2.使用插件生成vue模板代码

在插件详情中有完整的命令介绍

新建一个vue组件，输入vb回车后就出来模板内容

模板内容展示

2.3.LiveServer实时刷新网页

  • 当我们使用VSCode工具开发前端HTML页面时，修改内容后都要重新刷新网页才能展示更新代码的内容。那么有没有一种方式能够实时的显示代码更新的内容那？
  • 下面就通过LiveServer插件实现网页内容实时刷新

1.安装LiveServer

在VSCode的Extends扩展中输入live，在LiveServer上点击Install安装即可

2.使用LiveServer打开网页

  • 在html页面右键选择Open with Live Server方式打开网页
  • 输入代码并保存，网页自动显示修改的代码

3.开启自动保存

上面修改代码后，需要手动保存才能在网页上展示新的内容。那么我们设置VSCode自动保存代码就可以实时的在网页显示新的内容。

2.4.开发工具设置2个空格缩进

  • File-Preferences-Settings
  • 搜索tabsize，设置空格为2

2.5.browser插件浏览器插件查看html文件

1.安装创建

在扩展栏的搜索栏中输入open in browser，找到open in browser这款插件，点击右下角“安装”字样即可安装。

2.浏览html文件

vscode打开一个html文件方式：

1.按下Alt+B即可打开默认的浏览器。

2.如果需要在非默认浏览器上打开 快捷键 Shift+Alt+B

3.还可以通过在html文件上右键来选择打开方式。

2.6.设置目录分级显示

在当前目录下如果只有一个分支，这个分支总是横向显示，我们更习惯是分级显示。

1.设置目录分级显示

  • File–Preferences–Settings
  • Features–Explorer–去掉Compact Folders勾选

查看目录分级显示

2.7.Bracket Pair Colorizer彩虹括号

编写代码的过程中，免不了会有函数嵌套或是其他一些逻辑判断等层层嵌套，随着代码量的增加，你会不会感觉括号嵌套太多层而导致代码难以阅读。

VSCode中安装 Bracket Pair Colorizer插件，安装此插件后，再阅读自己的代码，各个成对儿的括号都会以不同的颜色进行区别

2.8.Material Icon Theme 项目图标插件

这款主题叫做 Material Icon Theme，它采用了 Google Material Design 风格，文件图标以及文件夹图标覆盖非常的全面。

2.9.语法检查格式化插件ESLint+Prettier

在创建项目时使用语法检查器能够规范代码格式，不符合规则的代码会给出错误提示，将影响项目运行。
使用了语法检查器本来是让代码开发变得规范，如果影响了项目运行就不太合适，这个时候可以使用ESLint插件和Prettier - code formatter插件自动格式化代码，修正不符合规范的代码。

插件安装和配置参考文章：https://www.jb51.net/article/261887.htm

总结

到此这篇关于VsCode工具开发vue项目必装插件的文章就介绍到这了,更多相关VsCode开发vue必装插件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 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 -- 自动

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

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

  • 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 上特别好用的 Vue 插件之vetur

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

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

  • 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 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

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

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

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

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

  • 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项目

    详解VSCode配置启动Vue项目

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

  • vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance＜{ readyOnly...Vetur（2339）

    问题描述: 今天早上一开机,打开项目,发现项目一片醒目的红色,查看报错原因提示: Property 'xxxx' does not exist on type 'CombinedVueInstance<{ readyOnly: unknown; businessPrice: unknown; travelStaffInfo: any; } & Record<never, any> & Vue, object, object, object, Record<never

  • Vue项目打包优化实践指南(推荐!)

    Vue项目打包优化实践指南(推荐!)

    目录 业务背景 项目打包时间分析方法 优化配置的基本思路 前置操作,先通过 webpack-bundle-analyzer 查看资源树 1.vue.config.js 文件中修改:productionSourceMap 为 false 2.针对首屏请求数进行优化—关闭 Prefetch,关闭 preload 一.采用路由懒加载 二.element-ui 组件按需加载 1.在 vue-cli3 项目中,如果没有 babel.config.js,则需要安装 Babel: 2.按照官网文档安装 3.b

  • 三分钟让你快速学会axios在vue项目中的基本用法(推荐!)

    三分钟让你快速学会axios在vue项目中的基本用法(推荐!)

    目录 Axios简介 一.axios是干啥的 二.安装使用 三.Axios请求方式 1.axios可以请求的方法: 2.get请求 3.post请求 4.put和patch请求 5.delete请求 6.并发请求 四.Axios实例 1.创建axios实例 2.axios全局配置 3.axios实例配置 4.axios请求配置 五.拦截器 1.请求拦截器 2.响应拦截器 3.取消拦截 六.错误处理 七.取消请求 结语 提示:本篇详解axios在vue项目中的实例.在使用Vue.js框架开发前端项

  • vue项目中常见问题及解决方案(推荐)

    webpack项目中自动引入全局scss变量文件 假设我们有一个公共的scss变量文件variables.scss /*存放所有全局变量*/ $card-title:#C7D200; //首页 卡片标题颜色 $bc-color:#182037; $hoverColor: #7abef9; //链接hover颜色 $fontColor: #E6EFFF; //字体颜色-白色 webpack要识别scss,需要先安装sass的loader npm install --save-dev sass-lo

  • vscode 开发Vue项目的方法步骤

    下载地址: vscode https://marketplace.visualstudio.com/VSCode或者本地地址:https://www.jb51.net/softs/606746.html 开始安装插件 Vetur : vue的文件代码高亮 Atom One Dark Theme : 好看的代码颜色主题 Simple icon theme :清爽文件夹主题 Prettier - code : 代码格式化 ESLint :代码规范检查 Debugger for Chrome :断点调

  • 用vscode开发vue应用的方法步骤

    现在用VSCode开发Vue.js应用几乎已经是前端的标配了,但很多时候我们看到的代码混乱不堪,作为一个前端工程师,单引号双引号乱用,一段有分号一段没有分号,有的地方有逗号有的地方没有逗号,空格回车都对不齐,还说自己做事认真,这不是开玩笑的事情. 我们今天从头开始,完整地讲述一下一个重度代码洁癖患者该如何用vscode开发vue,以及如何把一个已经可以宣判死刑的全身各种格式错误几万条的项目整容成标准美女. 从安装开始 为了准确起见,我们把vscode里所有插件全部禁用,把用户设置清空,以让它尽可

  • Vs-code/WebStorm中构建Vue项目的实现步骤

    Vs-code/WebStorm中构建Vue项目的实现步骤

    目录 一.使用Vue脚手架(vue-cli)构建Vue项目 二.使用Vite构建工具构建Vue项目 三.WebStorm中创建Vue项目(使用Vite构建工具) 一.使用Vue脚手架(vue-cli)构建Vue项目 1.打开cmd安装或升级Vue脚手架 npm install -g @vue/cli 2.进入工作目录创建Vue项目 vue create 项目名称 3.进入项目目录,启动项目 npm run serve 4.项目目录用处: 4.1.public目录:静态资源文件夹.index.ht

  • jenkins自动构建发布vue项目的方法步骤

    jenkins自动构建发布vue项目的方法步骤

    简介 Jenkins是一个开源的.提供友好操作界面的持续集成(CI)工具,起源于Hudson(Hudson是商用的),主要用于持续.自动的构建/测试软件项目.监控外部任务的运行(这个比较抽象,暂且写上,不做解释).Jenkins用Java语言编写,可在Tomcat等流行的servlet容器中运行,也可独立运行.通常与版本管理工具(SCM).构建工具结合使用.常用的版本控制工具有SVN.GIT,构建工具有Maven.Ant.Gradle. jenkins安装 1.安装JDK yum install

随机推荐