vue开发工具vscode插件安装及调试

1.vue的开发工具Visual Studio Code下载链接:进入vscode官网(https://code.visualstudio.com/Download
2.选择下一步安装,我接受协议,选择安装位置,将打开方式添加到鼠标右键菜单上(勾选“其他”中的第一选项),继续点击下一步,完成安装。
3.vscode开发前需要安装几个插件。可直接在工具中打开安装。也可进入vscode官网插件商店(https://marketplace.visualstudio.com/VSCode) 进行下载安装。
![](https://s1.51cto.com/images/blog/201903/02/17f75cc60fa480fcfc5031f8dd720c9c.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk

4.vue常用插件介绍
// 插件1:vetur
// 插件2:vscode-icons
// 插件3:stylelint
// 插件4:Output Colorizer
// 插件5:HTML Snippets
// 插件6:HTML Boilerplate
// 插件7:GitLens — Git supercharged
// 插件8:Git History
// 插件9:CSS Peek
// 插件10:Beautify css/sass/scss/less
// 插件11:Beautify
// 插件12:Auto Rename Tag
// 插件13:Atom One Dark Theme
5.所有快捷键设置:文件→首选项→键盘快捷方式

6.下面额外介绍一下怎么把vscode编辑器装换成中文版,方便英文不好的朋友
第一步:使用快捷键【Ctrl+Shift+P】打开搜索框,在弹出的搜索框中输入【configure language】,然后选择搜索出来的【Configure Display Language】就会打开了locale.json文件,可以看到locale的属性值为en

第二步:注释掉原来的en,换成中文简体:"locale":"zh-CN",重启vs
第三步:安装的VSCode中的中文语言包,install一下。安装好之后会提示重启VSCode,点击【Yes】重启VSCode软件。接下来就是中文环境了,可以友好的开发了。

7.将创建好的项目,打开就可以使用了

原文地址:https://blog.51cto.com/13565960/2357237

时间: 2024-10-27 18:13:50

vue开发工具vscode插件安装及调试的相关文章

JQuery开发工具和插件

最近在学习jquery,今天就为大家介绍几款开发工具,可以帮助你提高开发的效率. 1.Dreamweaver Dreamweaver是建立在WEB站点和应用程序的专业工具.将可视化工具.应用程序开发功能和代码编辑支持组合在一起,使得各个层次的开发人员和设计人员都能够快速创建基于标准的网站和应用程序. 要使Dreamweaver支持jquery自动提示代码功能,方法很简单,只需要下载一个插件即可.下载地址如下: 在Dreamweaver中依次选择命令-扩展管理-安装管理-JQurery_API_m

vs微软开发工具(插件配置文件/VS2010)

C:\Users\Administrator\Documents\Visual Studio 2010\addins <?xml version="1.0" encoding="UTF-16" standalone="no"?><Extensibility xmlns="http://schemas.microsoft.com/AutomationExtensibility"> <HostAppl

微信小程序开发工具下载以及安装教程

当我们已经申请微信小程序账号,接下来我们就需要安装一个微信小程序开发工具,下面微信小程序观察网请添加链接描述就和大家介绍一下微信小程序开发工具下载以及安装教程,希望对大家的工作与学习有所帮助! 第一步:微信公众平台上登录你的微信小程序账号 第二步:登录进入小程序开发-工具-下载,再根据你的系统选择相对应的版本地址进行下载. 第三步:以管理员身份运行下载,点击下一步,如图所示: 第四步:下一步,就会出现许可证协议,选择我接受.如图所示: 第五步:选定安装位置,浏览,选择桌面,点击安装,如图所示:

java 开发工具IntelliJ IDEA 安装步骤

1.下载地址 http://pan.baidu.com/s/1mhn5k60 2安装流程 intellij idea 15虽然不是最新版本,但却是目前工作中使用最多的java集成开发环境,也被认为是当前Java开发效率最快的IDE工具.它整合了开发过程中实用的众多功能,包括智能代码助手.代码自动提示.重构.J2EE支持.Ant.JUnit.CVS整合.代码审查. 创新的GUI设计等,几乎可以不用鼠标可以方便的完成你要做的任何事情,最大程度的加快开发的速度.intellij idea 15主要对b

vue开发搭建(npm安装 + vue脚手架安装)

一.概念 1.npm:  Nodejs下的包管理器. 2.webpack: 它主要的用途是通过CommonJS的语法,把所有浏览器端需要发布的静态资源,做相应的准备,比如资源的合并和打包. 3.vue-cli:   用户生成Vue工程模板.(帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装) 原文:https://www.cnblogs.com/goldlong/p/8027997.html (部分步骤有些修改) 参考文:htt

前端开发工具--vscode

一个好用的开发工具对于开发来说很重要.经历过HBuilder,sublime,webstorm之后,最终稳定使用 VSCode. 至于历史,和与其他编辑器对比,在此不做解释.仅从自己使用角度做个总结记录.(总结是个好习惯) VSCode之插件:详细信息可搜索并打开相应插件查看 1.Auto Close Tag 自动闭合标签 2.auto-rename-tag v0.1.1 自动重命名匹配的尾标签 3.auto import v1.5.3 使用安装包的组件方法时,自动发现并引入包 Automati

代码缺陷静态分析工具FindBugs插件安装使用图解

1.     FindBugs介绍 FindBugs 是一个静态分析工具,它检查类或者 JAR 文件,将字节码与一组缺陷模式进行对比以发现可能的问题.有了静态分析工具,就可以在不实际运行程序的情况对软件进行分析,去发现许多代码中间潜在的bug,比较典型的,如引用了空指针(nullpointer dereference), 特定的资源(db connection)未关闭,等等.如果用人工检查的方式,这些bug可能很难才会被发现,或许永远也无法发现,直到运行时发作- 这就是FindBugs存在的价值

Vue开发工具

vue微信小程序:mpvue 极客开发工具:Dcloud,uni-app 一套代码多终端. 简书-推荐的Vue UI库 Vue UI: 功能介绍帖子之一 VSCode: 介绍帖子 原文地址:https://www.cnblogs.com/jearay/p/11370428.html

Python 开发工具和框架安装

引言: 其实之前对于 Python,只是知道有这门语言而已.大部分还是使用 .net 开发的,之前也学了 MVC+EF 开发,但是由于工作上完全用不到,也就没有在博客记录学习的东西了. 最近又接触到了爬虫这项技术,然后了解到 Python 开发爬虫好像很厉害的样子.于是就来了兴趣,兴趣是一个重要的东西,于是就开始慢慢接触 Python 了. 然后就从最基本的配置开发环境什么的.突然发现做 .net 真的是很方便啊,开发环境根本就不用担心,windows 系统上只需要装上 Visual Studi