⌈工欲善其事必先利其器⌋,能够合理有效的利用工具,可以很大程度地提升工作效率。
笔者在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
- Preferences > Languages & Frameworks > Javascript > Code Quality Tools > Eslint
- 勾选Eable
- 输入Node和Eslint路径
- 选中Automatic search 并Apply
- Editor > Inspections
- 取消勾选Javascript下的所有子选项
- 勾选Javascript > Code quality tools > 第一个Eslint
- 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,生成代码。👇就分享一些实用的快速输入标签的方法,首先介绍几个符号的含义
标签 | 含义 |
---|---|
> | 下一个子标签,用于父子标签的连接 |
* | 多少个子标签,后面跟子标签的个数 |
$ | 标签的名称序号,可以理解为for循环中的i |
{} | 标签的内容,标签中的文字等需要在{}表示 |
-
输入
h1
,加tab
键
结果:<h1></h1>
-
输入
div#qxj
,加tab
键
结果:<div id="qxj"></div>
-
输入
div.qxj
,加tab
键
结果:<div class="qxj"></div>
-
输入
a[href=www.baidu.com]
末尾处加tab
键
结果:<a href="www.baidu.com"></a>
-
输入
div>p*5
,加tab
键
<div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
- 输入
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>
- 输入
img[src='images/$.jpg']*3
,加tab
键
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
- 输入
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>
- 输入
div#tab1+div#tab2
,加tab
键
+ : 表示并列的标签
<div id="tab1"></div>
<div id="tab2"></div>
- 引入
link
,script
标签
<!--引入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.快速输入ul
、li
<!--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键操作一定要在输入的内容的末尾处!