阿牛博客

webstorm快捷键、支持vue文件等部分使用技巧

一个工具在手,不仅要会用,更得会巧用,总结了一些webstorm的使用技巧,供需要的童鞋参考参考~

1.常用快捷键

shift+↑ 向上选取代码块
shift+↓ 向下选取代码块
ctrl+/ 注释/取消注释的行注释
ctrl+alt+L 格式化代码
tab,shift+tab 调整缩进
ctrl+shift+V 从剪贴板里选择粘贴
ctrl+D 复制代码副本
shift+delete 删除当前行
ctrl+shift+U 大小写转换
alt+←,alt+→ 左右切换选项卡
ctrl+B 跳转到变量声明处
ctrl+F12 文件结构弹出式菜单(查看代码结构)
如图:
(tip:图片点击可放大,方便移动端浏览)
alt+/ 代码补全
ctrl+F 搜索
ctrl+shift+F 按路径搜索
如图:
(tip:图片点击可放大,方便移动端浏览)
ctrl+R 替换
ctrl+shift+R 按路径替换
如图:
(tip:图片点击可放大,方便移动端浏览)
shift+F6 重命名
ctrl+W 选中单词
shift+tab/tab 减少/扩大缩进
ctrl+Y 删除一行
esc 进入代码编辑区域
alt+F1 查找代码在项目的具体某个位置 在浏览器打开 等等
如图:
(tip:图片点击可放大,方便移动端浏览)
ctrl+G 到指定行的代码
ctrl+F4 关闭当前代码选项卡

2.支持类:各种类型文件vue、php、es6语法等

支持vue文件类型、语法高亮及提示

2-1.支持vue语法提示:

安装vue插件:
(tip:图片点击可放大,方便移动端浏览)
成功后的效果:
(tip:图片点击可放大,方便移动端浏览)

2-2.vue文件被编辑器识别(应用主题):

(tip:图片点击可放大,方便移动端浏览)
php文件识别也是同样的方法设置,这里不再赘述。
2-3.支持es6语法
(tip:图片点击可放大,方便移动端浏览)

2-4.编辑器中vue文件里面支持sass:

(tip:图片点击可放大,方便移动端浏览)
如图:直接src引入或加上type=”text/scss”

3.编辑器里面添加多个项目

(tip:图片点击可放大,方便移动端浏览)

4.webstorm忽略node_module文件

4-1.针对文件夹单独设置:

(tip:图片点击可放大,方便移动端浏览)

4-2.全局设置:

(tip:图片点击可放大,方便移动端浏览)

5.建立vue模板文件

(tip:图片点击可放大,方便移动端浏览)
成功后的效果:
(tip:图片点击可放大,方便移动端浏览)
不过有了nodejs,可以很容易写入读取文件,建立项目文件会更容易,写点一个命令就ok了,这个后面我会出个小教程出来。

给个赞() 踩一下()

温馨提示:本站文章除注明转载外,均为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知 识的误导,同时有更好的阅读体验。

本文链接: http://aniublog.com/archives/527

上一篇: vue双向数据绑定之sync和v-model » 下一篇: 移动端上传用户头像-图片裁剪及七牛云上传 »