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

转载:https://www.cnblogs.com/seven077/p/9771474.html

 

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:图片点击可放大,方便移动端浏览)
成功后的效果:

原文地址:https://www.cnblogs.com/Jeely/p/11269800.html