vscode安装

进入vscode官网(https://code.visualstudio.com/Download)
vscode插件
安装
进入vscode官网插件商店(https://marketplace.visualstudio.com/VSCode)

安装Vetur插件,点击install,会启动vscode
vue相关插件
vetur 语法高亮、智能感知
VueHelper vue代码碎片
Vue 2 Snippets vue2代码碎片

wpy-beautify   vue页面美化

快捷键

所有快捷键设置:文件→首选项→键盘快捷方式

在当前行中间换行到下一行:ctrl+enter 

当光标点击到某一行时,默认选中全行,可以直接复制剪切 

直接删除某一行:shift+delete或者ctrl+shift+k 

多行光标选择:alt+鼠标左键 

自动生成html结构和meta声明:首先输入“!”,然后按tab键 

标签自动补全:tab键 

折叠所有代码:ctrl+k、ctrl+0 

拆分编辑器:ctrl+\ 查找框右边的3个参数分别为:区分大小写,全字匹配,使用正则 

跳转行号:ctrl+G 

添加函数注释:在函数上方输入“/**”,然后点击enter 

格式化:alt+shift+f 

注释:ctrl+/ 

全部保存:ctrl+k, 然后只按s一个键 

向上移动一行:alt+↑ 

向下移动一行:alt+↓ 

向上复制一行:alt+shift+↑ 

向下复制一行:alt+shift+↓ 

查找:ctrl+F 

替换:ctrl+H 

文件夹中查找:ctrl+shift+f

可以在打开的文件夹中搜索所有文件内容

文件中替换:ctrl+shift+h 

转到定义:F12 

转到实现:ctrl+F12 

打开文件夹:ctrl+k, ctrl+o 

关闭文件夹:ctrl+k, 然后单按一个f 

选中一段代码,通过“ctrl+[”可以左移,“ctrl+]”可以右移

安装 vue-devtools 调试工具

vue-devtools是一款基于浏览器的vuejs应用的调试工具,支持Chrome、Firefox、Safari浏览器,用于调试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 —— 自动完成另一侧标签的同步修改

JavaScript(ES6) code snippets —— ES6语法智能提示以及快速输入,除js外还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间

Path Intellisense —— 自动路劲补全

HTML CSS Support —— 让 html 标签上写class 智能提示当前项目所支持的样式

VSCode 支持第三方插件下载
Auto Close Tag
Auto Rename Tag
CSS Peek
npm
npm Intellisense
Vetur
Vue 2 Snippets
vue-beautify
Path Intellisense
HTML Snippets
HTML CSS Support

https://www.jianshu.com/p/5408dccf29d6 VSCode 前端常用插件

链接:https://www.jianshu.com/p/cab79d188e42   Vue开发与调试工具--开发工具篇

https://www.cnblogs.com/zkh101/p/8215600.html  Vuejs之开发环境搭建
https://blog.csdn.net/chuxuan0215/article/details/90664529  解决 VScode 在打开新文件是覆盖上一个窗口的问题(亲测可用)

Vue开发工具VS Code与调试的更多相关文章

  1. Vetur:VSCode下强大的Vue开发工具

    Vue自从发布以来就一直受到前端开发人员的热爱,而除了一些本身优秀的特征之外,还有就是丰富的插件和工具的支持和更新.虽然现在的编辑器需要安装相应的plugins才能进行Vue组件化开发,但是越来越多优 ...

  2. React-Native(二):React Native开发工具vs code配置

    从网上翻阅了一些开发react-native的开发工具时,发现其实可选的工具还是比较多的Sublime Text,WebStrom,Atom+Nuclide,vs code 等.因为我用.net生态环 ...

  3. Vue开发工具

    vue微信小程序:mpvue 极客开发工具:Dcloud,uni-app 一套代码多终端. 简书-推荐的Vue UI库 Vue UI: 功能介绍帖子之一  :帖子二 VSCode: 介绍帖子 Vue- ...

  4. 【vue】在VS Code中调试Jest单元测试

    在VS Code中调试Jest单元测试 添加调试任务 打开 vscode launch.json 文件,在 configurations 内加入下面代码 "configurations&qu ...

  5. 【嵌入式开发】 嵌入式开发工具简介 (裸板调试示例 | 交叉工具链 | Makefile | 链接器脚本 | eclipse JLink 调试环境)

    作者 : 韩曙亮 博客地址 : http://blog.csdn.net/shulianghan/article/details/42239705  参考博客 : [嵌入式开发]嵌入式 开发环境 (远 ...

  6. vue开发工具node.js及构建工具webpack

    1.概念 node.js:可以运行JavaScript的服务平台,可以把它当做一个后端程序,只是它的开发语言是JavaScript (通常情况下,JavaScript的运行环境都是浏览器,因此Java ...

  7. Vue tools开发工具报错Cannot read property '__VUE_DEVTOOLS_UID__' of undefined

    使用 vue tools 开发工具,不显示调试面板中的组件,点击控制台报错: Cannot read property 'VUE_DEVTOOLS_UID' of undefined 在 main.j ...

  8. 搭建Vue开发环境

    1.安装Node.js 安装包下载地址: https://nodejs.org/en/ 安装时可以选择是否自动安装必要的工具,如Chocolatey.Python2,这里我选择了自动安装 Node.j ...

  9. ARM 开发工具 Keil和DS-5的比较。

    http://www.eeboard.com/bbs/thread-25219-1-1.html 如今ARM体系架构的处理器在嵌入式市场上呼风唤雨,从低端的MCU应用到高端的多媒体消费电子,移动设备领 ...

随机推荐

  1. fcrackzip破解zip密码

    kail系统里有fcrackzip工具,可以对设置密码的压缩包zip直接进行破解,不用字典,直接进行暴力破解. fcrackzip 所用到的参数介绍如下:-b 表示暴力破解-c 表示暴力破解中使用的字 ...

  2. redis集群安装2

      概要:本文主要介绍如何在Centos7中单机搭建redis集群三主三从,按照本文绝对可以实现该需求,至于先搭建单机版主要为了方便理解redis集群,为下一步开发或生产上redis集群做铺垫.同时本 ...

  3. js 小细节(持续更新)

    1.在对数据进行操作时,一定要考虑数据里面每一个value值是否存在 $.each(data, function(i, item){ if(item == null || item.firstFram ...

  4. HCIP DAY2

    OSPF协议的基本特点: 支持无类域间路由(CIDR) vlsm NA 无路由自环 收敛速度快 使用IP组播放收发协议数据 支持多条等值路由 静态路由 动态路由 等价路由 浮动路由 支持协议报文的认证 ...

  5. [Selenium3+python3.6]自动化测试1-安装

    参考文档: http://www.cnblogs.com/yoyoketang/p/6123890.html 安装环境: win7+Py3.6 +FF45 (ESR version) +seleniu ...

  6. C# Winfrom DataGridView DataSource绑定数据源后--解决排序问题

    帮助类: public class SortBindingHelper<T> : BindingList<T> { private bool isSortedCore = tr ...

  7. Window脚本学习笔记之定时关闭进程

     定时关闭进程, 从字面上即可看出操作分为两个步骤,即: 1,结合“任务计划程序”,定时. “计算机->管理->计划任务程序”,作用是让系统定时启动脚本文件(bat脚本). 2,结合“nt ...

  8. Paper Reading:TridentNet

    论文:Scale-Aware Trident Networks for Object Detection 发表时间:2019 发表作者:(University of Chinese Academy o ...

  9. oracle 给表字段把VARCHAR2 换成 CLOB

    select * from TableName -- 添加一个字段 alter table TableName add 字段2 clob; --复制数据到此字段update TableName set ...

  10. 前端知识体系:JavaScript基础-原型和原型链-理解 es6 中class构造以及继承的底层实现原理

    理解 es6 中class构造以及继承的底层实现原理 原文链接:https://blog.csdn.net/qq_34149805/article/details/86105123 1.ES6 cla ...