webstorm那些事——保持更新 - HelloWorld开发者社区

走在前端的大道上——webstorm那些事

最后更新时间2018年1月31日

1.`vue.js`在`webstorm`里`npm run dev`经常不会更新

描述：如题，用vue-cli构建了项目之后在webstorm开发，用npm run dev跑本地服务，经常修改之后在浏览器刷新没反应，偶尔才会有刷新，需要重新跑一遍npm run dev才会更新，这是怎么回事呢？
解释：webstorm保存的时候会先保存到旧时文件中，其实并没有真正保存，要在setting->stystem settings下的“use save write”去掉

webstorm那些事——保持更新

2.webstorm打开后无法显示文件夹目录

来源

描述：在使用webstorm时出现项目中文件夹不显示问题，状况类似这样的

webstorm那些事——保持更新

百度搜索关键字是“webstorm project can't show folder”，第一条就是stack overflow的解释。

问题原因 ：webstorm自动生成的配置文件 .idea/modules.xml损坏

解决办法：{
1.关掉webstorm
2.删除.idea`文件夹（如果隐藏，请设置显示隐藏文件夹）；
3.重新新建项目；
}

webstorm那些事——保持更新

3.安装了vue 插件后，在新建文件的时候没有像下图出现vue格式文件

webstorm那些事——保持更新

可能需要自己添加
方法：在自己的模板中添加，方法如图（webstorm的不同，图中2的路径可能不一样，在1下找找）
webstorm那些事——保持更新

4.用webstorm在chrome 调试页面时一直弹出说页面未经授权。

描述:用chrome来调试页面，没每次刷新会弹出弹出`requested without authorization,
you can copy URL and open it in browser to trust it`，同时解决了谷歌游览器调试时看不到网络请求问题，见图
webstorm那些事——保持更新
解决办法:见图

webstorm那些事——保持更新

5.webstorm编写html标签快捷键

  div.task-list>div.task-item{item content $}*3

光标停留在最后，然后按下键盘Tab键,生成

<div class="task-list">
    <div class="task-item">item content 1</div>
    <div class="task-item">item content 2</div>
    <div class="task-item">item content 3</div>
</div>

6.Webstorm实现css3自动加前缀prefix

目的是在敲css代码时自动补齐css前缀，webstorm整合了autoprefixer

-webkit-border-radius:50%;  
-moz-border-radius:50%;  
border-radius:50%;

实现步骤：

step1：安装node.js （安装方式这里就不展开讲了）

step2：安装Autoprefixer npm install autoprefixer -g

step3：安装postcss-cli npm install postcss-cli -g

step4：设置webstorm External Tools

打开webstorm->File->搜索External Tools->点击‘+’，设置Edit Tool

webstorm那些事——保持更新

Name:autoprefixer
Tool settings:
Program：找到postcss.cmd文件
Parameters：-u autoprefixer -o $FileDir$&dollar;FileName$ $FileDir$\$FileName$
Working directory：$ProjectFileDir$

webstorm那些事——保持更新