webstorm那些事——保持更新

走在前端的大道上——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”去掉

---

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

来源

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

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

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

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

---

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

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

---

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

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

解决办法:见图

---

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

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

添加快捷键:

右键太麻烦的话，可以设置个快捷键，打开Webstorm设置，webstorm->File-> -> Keymap ， 搜索autoprefixer ， 配置 autoprefixer即可。 不要和原来的冲突就可以了。 我配置的是
CTRL+SHIFT+ALT+P。

7.快速添加单引号、双引号、括号的快捷键

在用webstorm开发时，怎么给选中的单词等快速添加成对的如单引号，双引号或者括号

答案：Editer --> General --> Smart Keys 这里面有一个复选项是 Surfound selection on typing quote or brace,将其勾选就可以了（webstorm默认不勾选）

用法

设定好了这个选项以后，选中 某个你想添加双引号、单引号、中括号、大括号、小括号的编程单元（单词或短语），按对应的键盘上的按键就可以了。

比如，添加双引号，就是 选中某单词，按shift+引号键。