前端开发IDE Webstorm使用技巧 2017年1月31日

1. 首先 webstrom是支持Emmet语法 所以肯定有常用的快速生成语法
   快速生成的 语法的 主要有以下几点

> 代表下级的元素
+ 代表同级元素
^ 代表把这个之后的元素往上提高一级
* 代表多次生成 重复
() 让逻辑更加清晰
# 让生成的元素拥有id //比如 div.contanair 
. 让生成的元素拥有classname //和上者可以一起使用
[] 里面为作为自定义的属性 比如 div.classname[data-value]
$ 符号可以让我们添加按序的数字 比如 div>li.item$*5就会自动添加12345
{} 在大括号之中的为文本 比如div{this txt} 
lorem 为我们生成无意义的文字 作为文本测试只用 比如 lorem100 生成一百个



//在css中同样支持emmet语法 比如输入bt 会生成border-top 输入bt10 生成border-top:10px; 如果想设置多个数字 比如margin 0 auto 那么可以m0auto 更多的语法还要自己探索

• Webstorm小技巧
• f1 可以让我们找到想要的帮助信息 比如你选择了aleart 按下f1就会显示一些相关的帮助
• alt + up/dm 可以帮我们层层递进的选择子元素
• ctrl + shift + v 可以帮我们粘贴 粘贴板中不同的内容
• ctrl + y 快速删除一行
• ctrl + alt + enter 在上方新建一行
• ctrl + shift + enter 在下方新建一行
• ctrl + +/- 折叠或展开代码
• alt + shift + up/dm 上下移动这行代码
• ctrl + e 查看最近的文件
• 选择图片按f1可以快速预览图片
• ctrl + shift + alt + t 重命名复制 支持css 颜色也支持
• f2 在错误里跳转
• alt + enter 可以对错误进行一些推荐操作
• alt + ins 新建文件或目录
• 用meta:vp可以快速生成视口代码
• ctrl+alt+shift+j 选择所有相同的词
• ctrl + w 选择一个单词 比如id class之类的