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 經常使用設置講解