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

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

作者: 八步里 | 来源:发表于2018-07-29 14:55 被阅读0次
    1. 开发工具的选择

    • 轻量级——Sublime Text(编辑器)
    • 重量级——WebStorm(IDE)
      webstrom是jetbrains公司旗下一款JavaScript 开发工具,对JavaScript有较好的支持,被称为Web前端开发神器。除此两款软件外还有Adobe Dreamweaver(IDE)也是不错的选择
    1. WebStorm下载安装(具体操作百度搜索关键词

    选择自己电脑相应的版本
    该软件需要JDK(Java的开发环境和运行环境)的支持,注意添加JDK的系统环境
    JDK
    WebStorm
    1. 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>
    

    1. 其他快捷键*(经过筛选)*

    • 代码格式进行自动对齐
      选中需要对其的的代码,然后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

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/iiewmftx.html