webstorm 常用操作

1. 创建项目

01.png

2.基本操作

1.快速查找 ctrl+ r
2.代码补全 tab
3.版本控制
4.本地历史 local history
5.即时模板 setting editor code tpl
6 多个光标 alt + 鼠标左键 竖向选择
7 代码格式化 ctrl + alt +L

• 新建文件，webstorm windows下新建文件不是 ctrl +n 是alt+insert 坑

• 放大缩小也面代码
  1.点击左上角的File，再点击setting；
  2.Editor->General，选择Change font size (Zoom) with Ctrl+Mouse Wheel；
  3.点击OK即可。

• 代码格式化 ctrl + alt +L

• eidtor code tpl 设置模板

• crtl + r 查找替换

• alt + 鼠标左键 多行游标

• Keymap 快捷键的名称找快捷键，也可以用快捷键找快捷键名称，也可以设置快捷键

• 光标移动上去 ctrl + 鼠标左键单击，实现代码提示

• ctrtl + / 注释

• ctrl + shift + v 调出剪切板

• shift + delete 删除光标所在行

• ctrl + alt + enter 当前行光标跳到新的上一行

• shift + enter 当前行光标跳到 新的下一行

• ctrl + 减号 折叠当前行代码

• ctrl + 加号 展开当前行代码
  -ctrl + shift + 减号 折叠所有代码

• ctrl + shift + 加号 展开所有代码

• ctrl + shift + ↑ 或 alt + shift + ↑ 当前代码移动到上一行

• ctrl + shift + ↓ 或 alt + shift +↓当前代码移动到下一行

• ctrl + shift + m 光标在闭合标签尾部跳到头部来回跳动，光标要放在闭合标签之前或之后

• ctrl + e 查看最近使用的文件

• ctrl + shift + backspace 回到上一次编辑的地方

• ctrl + 单击 图片的src 实现预览

• 光标移动到img 的src 上 ，按住 shift 键可实现预览

• css 中选择颜色，如 background ，输入 bg 按 tab， 再去点击background 前的色块可调出调色板，选择颜色

• shift + f6 重命名强大，同时可以点击 preview 实现预览 改变

webstorm 自带错误提示，如 代码下波浪线 或 黄色的下划线块按 alt + enter 可以看到 错误修改提示 ，按 F2 可以 在错误处来回跳动

ctrl + shift + s 调出 设置面板 ，输入 inspection 可以 查看 错误提示的设置和自定义错误设置

3.ememt 快捷操作

• > + ^ * () 嵌套字符
  1.后代嵌套 >

  div> ul > li
   <div>
        <ul>
            <li></li>
        </ul>
    </div>

2.同级 +

 div+ul+li
<div></div>
<ul></ul>
<a href=""></a>

3.上一级 ^

div>div^p
<div>
    <div></div>
</div>
<p></p>

4.多个元素 *

div>ul>li*3
<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

5.保证优先级 ()

ul>(li>a)*5
<ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>

• 属性，类 、id # . []
  1.id #

div#ct.ct
<div id="ct" class="ct"></div>

2.class .

div.item.item2
<div class="item item2"></div>

3.atrr []

div#ct.ct[data-value]
<div id="ct" class="ct" data-value=""></div>

• 变量{} $
  1.{}

p{click me}
<p>click me</p>

2.$

p{变量$}*5
<p>变量1</p>
<p>变量2</p>
<p>变量3</p>
<p>变量4</p>
<p>变量5</p>

• 生成无意义文本测试排版 lorem+数字 生成多少个随机单词

lorem10
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, sapiente.

• 今年最后一篇博客，祝大家新年快乐，鸡年大吉。

版权为饥人谷和作者所有，若转载请注明出处