星空·无限 发表于 2019-1-11 18:39:38

webstorm一些使用技巧分享给大家,帮助大家提高编程效率!

本帖最后由 星空·无限 于 2019-1-11 18:41 编辑


自己总结的一些webstorm使用技巧希望对大家有用,就不排版了大家将就看吧!
1. 在标签后面加.类名或者是#id名可以实现快速创建带id或者是类的标签;
比如:输入p.page按下tab,就会出来<p class="page"></p>。id同理;
2.那么如果在上面的需求中还要求在标签中添加文字呢?只需要在后面吧需要添加的文字用'{}'包裹起来
比如:p.page{这是一个p标签} 弹出<p class="page">这是一个p标签</p>;
3.如果需要创建一个标签中包含多个下级标签?
比如:要在一个类名为page中的p标签中创建三个h1标签,下级标签用'>'表示,要创建3个用'*3'就可以了,同理需要在里面添加文字用'{}'
‘p.page>h1{xxxx}*3’ ; 效果我就不写出来了;
4.在第三点的需求上要为三个h1标签添加不同的类或者是id呢?使用'$'符号是基数器符号,从一开始累加。
比如:第一个h1为class=content1,第二个class=content2,第三个class=content3
'p.page>h1.content${dff$}*3';
5.更复杂的组合使用,我就举个例子。大家自己去试试看了结果就明白了;
例子:‘div.page>div.col>div.pic(>h1{这是标题$}+p{这是文字$})*3’


css:
在写css代码的时候其实也可以进行便捷输入;
比如要写'width: 33%;' 不用这么麻烦直接输入'w33%'按tab就是了,要写‘width: 33px;’直接输入‘w33’按tab键就可以了;
其他属性的快捷字母输入也是同理,再说下的就是要输入多个数值应该怎么输入?
比如:要写‘padding: 20px 30px;’ 直接‘p20,20’按tab键,参数之间用逗号隔开;
再说下怎么知道哪些属性的简写方式呢?
在设置里面-》编辑器》代码模板里选择‘Zen CSS’打开就看到了。



Changgf 发表于 2019-1-11 18:42:22

支持

sxfxtf 发表于 2019-2-20 20:53:45

请问下,webstorm中HTML标签貌似不会弹出提示怎么设置? 比如输入di不会跳出DIV的代码提示

不二如是 发表于 2019-2-21 10:11:47

加油哦~
页: [1]
查看完整版本: webstorm一些使用技巧分享给大家,帮助大家提高编程效率!