工欲善其事_必先利其器——WebStorm使用基础之最常用快捷键

1. 开发工具的选择

• 轻量级——Sublime Text（编辑器）
• 重量级——WebStorm（IDE）
  webstrom是jetbrains公司旗下一款JavaScript 开发工具，对JavaScript有较好的支持，被称为Web前端开发神器。除此两款软件外还有Adobe Dreamweaver（IDE）也是不错的选择

2. WebStorm下载安装（具体操作百度搜索关键词）

选择自己电脑相应的版本
该软件需要JDK（Java的开发环境和运行环境）的支持，注意添加JDK的系统环境
JDK
WebStorm

3. WebStorm标签输入快捷键

• 注释：光标所在行 ctrl+/ 可以自动注释和撤销注释
• 标签补齐：

• 不加修饰的标签（如单独的h1标签）：完整的h1标签，只需要敲h1,按tab键<h1></h1>
• 具有id的标签：div#abc,按Tab键<div id="abc"></div>
• 具有class的标签：div.abc,按Tab键<div class="abc"></div>
• 输入的标签内部还有标签的可以用>号包裹子标签（仅仅以div和p标签举例，下同）,div>p,按 Tab键：
  <div><p></p></div>
• 输入多个相同的标签用p*3,按 Tab键:
  <p></p>
  <p></p>
  <p></p>
• 特定属性标签补齐：a[href=#]，按Tab键：
  <a href="#"></a>（#是代表你所指定具体的属性）
• 写下标签时顺便写入标签的内容：a{p}，按Tab键：：
  <a href="">s</a>
  多个相同的带有顺序序列的标签：
  带序号测试

这些快捷标签输入形式可嵌套使用：

    ul>li*3>div.img>img[src=images/$.jpg]
    <ul>
        <li>
            <div class="img"><img src="images/1.jpg" alt=""></div>
        </li>
        <li>
            <div class="img"><img src="images/2.jpg" alt=""></div>
        </li>
        <li>
            <div class="img"><img src="images/3.jpg" alt=""></div>
        </li>
    </ul>

---

4. 其他快捷键*(经过筛选）*

• 代码格式进行自动对齐
  选中需要对其的的代码，然后CTRL+ALT+L
• 打开工程中的文件:
  ctrl + shift + n
• 剪切(删除)行:
  ctrl+x
• 替换：
  ctrl + r
• 查找：
  ctrl+f
• 块移动：
  ctrl + shift + up
• 行移动：
  shift + alt + up
• 行复制:
  ctrl + d
• 单行注释:
  ctrl + /
• 可填注释：
  ctrl + shift+/
• 展开/折叠代码：
  ctrl+shift+ +/-
• 高亮所选文本：
  Ctrl+Shift+F7 (Esc取消)
• 逐个往下查找相同文本：
  Alt+F3
• 选中所有查找的内容：
  ctrl + shift + alt + j