webstorm配置整理

JetBrain常见软件：webstorm，phpstorm，Intellij Idea等

插件

Key Promoter：

快捷键过渡，可以检测用户行为的频繁程度，询问是否生成快捷键或者提示已有的快捷键

Material Theme UI ：

Material Theme UI，升级到webstorm 2018，ui方案更多样化

liveEdit：

相似于f5web免刷新工具，须要chrome插件配合使用。在未打开调试工具的时候可以在控制台输出chrome的日志

CodeGlance：

建立一个当前文件的快捷导航条，减小鼠标滚轮的压力，方便快速定位

CMD support

支持右键运行bat文件，把经常使用的命令写成bat文件，右键直接执行方便快捷

Intellij Stylelint Plugin

css代码规范提示插件，更多stylelint介绍

还有相似markdown、vue、mongo plugin等等插件

个性配置

live template：

配置代码片断，快速生成业务代码，可配置参数占位，而且提供了如fileNameWithoutExtension(当前文件名称)等宏占位。

字体偏好

Lucida Sans typewriter

css格式化风格

editor-> code Style -> CSS 勾选keep single-line blocks

内存实时显示

appearance->appearance->勾上show memory indicator

忽略文件或文件夹

Editor->File Types->ignore files and folders

增长开发的时候不关心的文件格式或者文件夹，好比.idea、node_modules

power save mode

在file菜单下，省电模式，能够减小ide对文件的语法、拼写、变量使用等的检查

code folding

Editor->General->Code Folding

勾上method bodies能够在打开文件的时候收起function的{}，快速了解总体文件

支持es6

setting——Languages & frameworks——javascript

选择ECMAScript6

内存设置

tomcat有时会报内存溢出，解决方法是在tomcat配置面板中的VM options中加入：

```
-Xms512m -Xmx512m -XX:PermSize=512M -XX:MaxPermSize=1024m
```
复制代码

autoPrefixer安装

1. 全局安装autoprefixer

   npm install autoprefixer -g
   复制代码

2. 安装 postcss-cli

   npm install postcss-cli -g
   复制代码

3. 打开Webstorm设置，Preferences -> Tools -> External Tools ;

   //输入框内容
   C:\Users\hzqiushengqiang\AppData\Roaming\npm\postcss.cmd
   
   -u autoprefixer -o $FileDir$/$FileName$  $FileDir$/$FileName$
   
   $ProjectFileDir$
   复制代码

4. 保存以后打开mcss文件或者css文件，输入

   a{
       display: flex;
   }
   复制代码

5. 右键External Tools -> autoPrefixer，代码自动变成

   a{
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
   }
   复制代码

关闭safe write

使用webpack的watch时必须关闭，不然没法热替换

setting -> Appearance & Behavior -> System Setting -> Use 'safe write'(save changes to a temporary file first)
复制代码

个性化配置迁移

File -> Import Setting 便可，或者文件覆盖对应路径下的文件

默认配置所在路径：

• win： C:\Users\用户名\.IntelliJIdea14(idea版本号)\config
• OSX: Library/Prefrences/WebStorm2018.1/

快捷键设置

仅供参考，本人选择 OSX版本，如下为部分定制化修改

• duplicate lines or block: ctrl + D
• extend selection： ctrl + W
• fix eslint problems： command + shift + O
• fix styelint problems: command + shift + P

传送门：

• 官网速成
• IntelliJ IDEA 简体中文专题教程
• IntelliJ IDEA 经常使用设置讲解