webstorm配置

主题下载
http://www.phpstorm-themes.com/themes-list?title=&field_tags_tid=All&page=9
主题

image.png
主题导入
https://www.jianshu.com/p/721d87e620a3

文件图标插件：Atom Material Icons
在plugins直接搜索

image.png image.png

字体

image.png
image.png

webstorm编写小程序智能提示包:tools-master

webstorm新建文件的时候没有vue选项：

image.png

没有node代码提示
设置里面搜索node

image.png

自定义文字颜色

image.png

js:
arrow function: B952B4
block commit:818E96
braces/brackets: ABB2BE
class:7FE59E
doc commits:5C6370
documentation tag:C678DD
exported function:61AFEF
global function:61AFEF
global variable:E56862
instance member function:61AFEF
instance member variable:FFA03A
interface:3366FF
keyword:C678DD
line commit:5C6370
local function:999933
local variable:FF6666
number:FFB639
operation:ABB2BE
parameter:99CC00
regular expression/string:98C379
valid string escape:86C26E
效果：

image.png

html:
arrtibute name:D19A66
arrtibute value:A6DE78
commit:66747B
Entity reference:C079ED
HTML code:BBBBBB
tag:ABB2BE
tag name:E06C75
效果：

image.png

css:
braces:ABB2BE
brackets:C678DD
class name:99CC66
commit:66747B
function:56B6C2
hex color:56B6C2
id selector:D16BA6
important:C678DD
keyword:C678DD
number:D19A66
operation sign:C678DD
parenthesis:ABB2BE
Property name:999900
property value:D19A66
string:98C379
tag name:CC6666
url:ABB2BE
效果：

image.png

自定义代码片段：

image.png

a标签:
aa <a href="javascript:;" class=""></a>
cg console.log()
meta:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
单行:
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
多行:
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: ;
overflow: hidden;
换行:
word-wrap: break-word;
white-space: normal;
word-break: break-all;
图片:
max-width: px;
max-height: px;
display: block;
object-fit: scale-down;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

下划线导航:
<div class="tab-wrapper clearfloat">
<p class="tab-item">导航一</p>
<p class="tab-item">导航二</p>
<p class="tab-item">导航三</p>
</div>
.clearfloat::after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
.tab-wrapper {
border-bottom: 2px solid #DDDDDD;
width: 1000px;
margin: 0 auto;
}
.tab-item {
float: left;
padding: 0 5px;
cursor: pointer;
margin-left: 20px;
padding-bottom: 5px;
position: relative;
}
.tab-item::after {
content: '';
position: absolute;
left: 50%;
bottom: -2px;
width: 100%;
opacity: 0;
border-bottom: 2px solid #e5242b;
transform: translate(-50%) scaleX(0);
transition: .2s ease-in-out;
}
.tab-item:hover::after {
opacity: 1;
transform: translate(-50%) scaleX(1);
}
.tab-item:first-child{
margin-left: 0;
}
.tab-item.tabActive {
border-bottom: 2px solid #e5242b;
}

不限宽高弹窗
<div class="popup-cover">
<div class="popup-wrapper">
<p>弹窗弹窗弹窗</p>
</div>
</div>
.popup-cover {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
}
.popup-wrapper {
padding: 20px;
width: auto;
height: auto;
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
background: #ffffff;
}

不限宽高弹窗1
<div class="popup-wrapper">
<div class="inner-wrapper">
弹窗弹窗弹窗弹窗弹窗
</div>
</div>
.popup-wrapper {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
background: rgba(0,0,0,0.3);
z-index: 1000;
}
.popup-wrapper:after {
content: "";
display: inline-block;
height: 100%;
width: 0;
vertical-align: middle;
}
.inner-wrapper {
display: inline-block;
padding: 20px;
padding-bottom: 10px;
vertical-align: middle;
background-color: #fff;
border-radius: 4px;
border: 1px solid #ebeef5;
font-size: 18px;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
text-align: left;
overflow: hidden;
backface-visibility: hidden;
}