Vue开发工具

vscode

VSCode是微软出的一款轻量级代码编辑器,免费而且功能强大,对JavaScript和NodeJS的支持非常好,自带很多功能,例如代码格式化,代码智能提示补全、Emmet插件等。VSCode推荐一个项目以文件夹的方式打开。

vscode安装

image

  • 双击下载的安装包,进入安装向导界面;点击下一步

     

    image

  • 进入许可协议,点击“我接受协议”选项;点击下一步

     

    image

  • 选择目标位置,就是你想把软件安装在哪个目录;选择合适的目录后继续点击下一步

     

    image

  • 进入选择其他任务界面,默认已经勾选了必要的任务,这里尽量不要修改默认的,同时你也可以选择将打开方式添加到鼠标右键菜单上(勾选“其他”中的第一选项),继续点击下一步

     

    image

  • 直接点击安装;几秒后,即可安装完成

     

    image

vscode插件

安装

vue相关插件

  • vetur 语法高亮、智能感知
  • VueHelper vue代码碎片
  • Vue 2 Snippets vue2代码碎片

导入工程

以vue项目为例

  • 在vscode ide中选择"文件"-->"打开文件夹"

  • 将构建好的vue工程导入

     

    image

开发组件

安装vue相关插件之后,vscode会有代码提示功能

 

image

快捷键

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

在当前行中间换行到下一行: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+]”可以右移

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员阿军

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值