❝

⌈工欲善其事必先利其器⌋，能够合理有效的利用工具，可以很大程度地提升工作效率。 笔者在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为同一个键

❞

3. Tab键使用小妙招

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

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>
复制代码

6. 输入 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>
复制代码

7. 输入img[src='images/$.jpg']*3，加tab键

<img src="images/1.jpg" alt="">     
<img src="images/2.jpg" alt="">     
<img src="images/3.jpg" alt="">
复制代码

8. 输入 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>
复制代码

9. 输入div#tab1+div#tab2，加tab键 「+ : 表示并列的标签」

<div id="tab1"></div>
<div id="tab2"></div>
复制代码

10. 引入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键操作一定要在输入的内容的末尾处！

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

本文使用 mdnice 排版