Linux教程

?磨刀不误砍柴工? WebStorm常用的配置和快捷键大全

本文主要是介绍?磨刀不误砍柴工? WebStorm常用的配置和快捷键大全,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

⌈工欲善其事必先利其器⌋,能够合理有效的利用工具,可以很大程度地提升工作效率。 笔者在WebStorm和VsCode来回切换敲代码,但还是觉得WebStorm更强大🌹,本文介绍一些日常使用WebStorm的设置和快捷键。欢迎补充,互惠你我。🌹

WebStorm
版本: WebStorm 2017.2
操作系统:Mac OS

1.常用设置

1.1 设置Terminal字体

Preferences > Editsor > Colors & Fonts > Console Font

1.2 禁止实时自动保存

  • Preferences > Apearance & Behavior > System Settings
  • 取消勾选 "Save files on frame deactivation"和"Save files automa tically if application is idle for"

1.3 文件未保存时显示星星(*)标记

  • Preferences > Editor > General > Editor Tabs
  • 勾选 “Mark modified tabs with asterisk”

1.4 设置鼠标双击选中驼峰式命名的变量

  • Preferences > Editor > General

  • 取消勾选 Honor "CameHumps" words settings when selecting on double click

  • Preferences > Editor > General > Smart Keys

  • 勾选 Use "CameHumps" words

1.5 启用Eslint校验JS代码

首先确保安装了Nodejs, 并且工程中配置了Eslint相关文件:.eslintrc、.eslinignore

  1. Preferences > Languages & Frameworks > Javascript > Code Quality Tools > Eslint
  2. 勾选Eable
  3. 输入Node和Eslint路径
  4. 选中Automatic search 并Apply
  5. Editor > Inspections
  6. 取消勾选Javascript下的所有子选项
  7. 勾选Javascript > Code quality tools > 第一个Eslint
  8. Apply

1.6 Code Style

Preferences > Code Style:分别设置各个类型文件的代码风格。

1.6.1 支持JSX语法
  • Preferences > Languages & Frameworks > Javascript
  • 选择React JSX

2.快捷键

Mac系统下,ctrl替换为command,alt和option为同一个键

ctrl + 1 快速打开或隐藏工程面板,也就是打开隐藏侧边栏
ctrl + a 选择全部
ctrl + c 复制
ctrl + d 如果选择了文本那么就是向此行的末尾复制,如果没有选中文本那就是将此行向下复制
ctrl + e 弹出最近打开文件列表,可以快速选择最近曾经打开的文件。
ctrl + f 在所在的文件内查文本
ctrl + j 输出模板,自动代码 【弹出快捷代码框。】
ctrl + k 调出git的commit界面,提交版本
ctrl + m 缩小本窗口
ctrl + o 选择替换方法
ctrl + q 退出WebStorm的所有窗口
ctrl + r 替换文本
ctrl + v 将粘贴板内容粘贴下来
ctrl + x 剪切(删除)行,不选中,直接剪切整个行,如果选中部分内容则剪切选中的内容
ctrl + z 回退操作
ctrl + / 单行注释
ctrl + '-/+' 可以折叠项目中的任何代码块,它不是选中折叠,而是自动识别折叠。
ctrl + ‘.’ 折叠选中的代码的代码。
ctrl + delete(后退格) 删除光标所在的行
ctrl + left/right 光标移到行首/行尾
ctrl + shift + f 全局查找文本
ctrl + shift + o 打开某个文件。
ctrl + shift + v 选择粘贴剪切板上的内容(具有剪切板记忆功能)
ctrl + shift + r 全局替换指定文本
ctrl + shift + / 块注释(/xxx/)
ctrl + alt + l 格式化代码
ctrl + alt + o 优化导入的类和包
ctrl + alt + left/right 返回至上次浏览的位置
alt + up/down 逐层扩大/缩小选中范围
alt + 回车 导入包,自动修正
alt + shift + c 对比最近修改的代码
alt + shift + f 将当前文件加入收藏夹
shift + enter 重新开始一行(无论光标在哪个位置)
shift + F6 重构-重命名
ctrl + shift + '+/-' 展开/收缩文件中所有的方法
tab 代码标签输入完成后,按Tab,生成代码。
ctrl + b 跳到变量申明处,快速打开光标处的类或方法
ctrl + g 跳转至指定行指定列(列可以不填)
ctrl + h 显示类结构图(如果没有则不会显示)
ctrl + l Go To Line,跳转到某某行某某列
ctrl + n 查找类
ctrl + p 显示参数信息
ctrl + s 保存文档(webStrom会帮你自动保存,此快捷键在此编辑器作用不大)
ctrl + t 调出git更新项目的选项框,其中包括Merge(合并分支),Rebase(变基)和其他选项
ctrl + w 关闭本标签页
ctrl + y 显示该文件的定义
ctrl + [] 匹配 {}[]
ctrl + F12 可以显示当前文件的结构
ctrl + 空格 代码提示
ctrl + backspace 删除文字开始
ctrl + 鼠标左键 跳到变量声名(引入)处
ctrl + up/down 光标跳转到第一行或最后一行下
ctrl + shift + a 查找actions
ctrl + shift + i 显示当前CSS选择器或者JS函数的详细信息
ctrl + shift + k 调出git的push界面,推送版本
ctrl + shift + n 打开工程中的文件,目的是打开当前工程下任意目录的文件。
ctrl + shift + u 光标所在位置翻转大小写(大写转为小写,小写转为大写)
ctrl + shift + F7 高亮显示所有该文本,按Esc高亮消失
ctrl + shift + F12 切换最大化编辑器
ctrl + shift + space 自动补全代码
ctrl + shift + ]/[ 选中块代码
ctrl + shift + up/down 上下移动句子
ctrl + alt + t 围绕包裹代码(包括zencoding的Wrap with Abbreviation)
ctrl + alt + v 此快捷键可以快速声明一个变量,例如在代码中输入一个字符串,并按下这个快捷键即可快速声明一个字符串变量。
ctrl + alt + space 类名或接口名提示
ctrl + alt + b Go to implementation(s)跳转方法实现处
ctrl + alt + t with…(if, else, try, catch, for, etc)用 * 来围绕选中的代码行,( * 包括 if 、 while 、 try catch 等)
ctrl + alt + h 点中某一个方法按下这个快捷键,在左边栏上弹出此方法的调用关系,此快捷键在开发中十分常用。(Mac中不适用)
ctrl + shift + alt + n 查找类中的方法或变量,通过一个字符快速查找位置(必记)
alt + left/right 以单词作为边界跳光标位置
alt + f1 查找代码所在位置
alt + F3 逐个往下查找相同文本,并高亮显示
alt + insert 生成代码(如get,set方法,构造函数等)
shift + esc 当前激活的任意小窗口最小化,也可以是alt+数字键,数字在小窗口有显示。
shift + alt + up 块移动(if(){},while(){}语句块的移动)
shift + F3 查找上一个
F2 或shift + F2 高亮错误或警告快速定位
F3 查找下一个
command + mouseover 显示主要信息

3. Tab键使用小妙招

👆我们讲到了代码标签输入完成后,按Tab,生成代码。👇就分享一些实用的快速输入标签的方法,首先介绍几个符号的含义

标签 含义
> 下一个子标签,用于父子标签的连接
* 多少个子标签,后面跟子标签的个数
$ 标签的名称序号,可以理解为for循环中的i
{} 标签的内容,标签中的文字等需要在{}表示
  1. 输入h1,加tab键 结果:<h1></h1>

  2. 输入div#qxj,加tab键 结果:<div id="qxj"></div>

  3. 输入div.qxj,加tab键 结果:<div class="qxj"></div>

  4. 输入a[href=www.baidu.com] 末尾处tab键 结果:<a href="www.baidu.com"></a>

  5. 输入div>p*5,加tab

<div>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</div>
复制代码
  1. 输入 ul>li*4>a[href=www.baidu.com]{我是第$个},加tab
<ul>
  <li><a href="www.baidu.com">我是第1个</a></li>
  <li><a href="www.baidu.com">我是第2个</a></li>
  <li><a href="www.baidu.com">我是第3个</a></li>
  <li><a href="www.baidu.com">我是第4个</a></li>
</ul>
复制代码
  1. 输入img[src='images/$.jpg']*3,加tab
<img src="images/1.jpg" alt="">     
<img src="images/2.jpg" alt="">     
<img src="images/3.jpg" alt="">
复制代码
  1. 输入 ul>li*3>div.img>img[src='image/$.jpg'],加tab
<ul>
  <li>
    <div class="img"><img src="image/1.jpg" alt=""></div>
  </li>
  <li>
    <div class="img"><img src="image/2.jpg" alt=""></div>
  </li>
  <li>
    <div class="img"><img src="image/3.jpg" alt=""></div>
  </li>
</ul>
复制代码
  1. 输入div#tab1+div#tab2,加tab+ : 表示并列的标签
<div id="tab1"></div>
<div id="tab2"></div>
复制代码
  1. 引入linkscript标签
<!--引入link,输入link,加tab键-->
<link rel="stylesheet" href="">
 
<!--引入css 输入link:css,加tab键 -->
<link rel="stylesheet" href="style.css">
 
<!--引入js 输入script:src,加tab键-->
<script src=""></script> 
 
<!--html中插入js 输入script,加tab键-->
<script></script>
复制代码

12.快速输入ulli

<!--ul及1个li 输入ul+,加tab键     -->
<ul>
  <li></li>
</ul>

<!--ul及3个li 输入ul>li*3,加tab键  -->
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

<!--输入ul>li.item$*6,加tab键-->
<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
  <li class="item4"></li>
  <li class="item5"></li>
  <li class="item6"></li>
</ul>
复制代码

13.快速输入多个标签

<!--输入a:link,加tab键  -->
<a href="http://"></a>

<!--1个P标签:输入p,加tab键-->
<p></p>
 
<!--两个P标签:输入p+p,加tab键-->
<p></p>
<p></p>
 
<!--三个P标签:输入p*3,加tab键-->
<p></p>
<p></p>
<p></p>
复制代码

14.快速输入带类名的标签

<!--输入div.one.two,加tab键-->
<div class="one two"></div>

<!--输入form:get,加tab键-->
<form action="" method="get"></form>

<!--输入form:post,加tab键-->
<form action="" method="post"></form>

<!--输入input:button,加tab键-->
<input type="button" value="">
复制代码

【注意】:上述tab键操作一定要在输入的内容的末尾处! tab位置

如果你觉得这篇文章有用,动动小手给我点个赞吧🍀

本文使用 mdnice 排版

这篇关于?磨刀不误砍柴工? WebStorm常用的配置和快捷键大全的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!