利用webstrom的宏，使用eslint規則保存文件自動格式化代碼(mac版)

**20170901 更新 ***

之前用webstorm+prettier之後，發現如果切換到舊的項目，用webstorm一保存強制使用prettier的規範就悲劇了！於是改成每個項目用自己的eslint配置的方式，這樣沒有eslint配置的舊項目不會受編輯器的影響！

1.全局安裝eslint相關

npm i eslint  -g
npm i eslint-plugin-react -g
npm i eslint-config-react-app -g
npm i eslint-plugin-import -g
npm i eslint-loader -g
npm i eslint-plugin-flowtype -g
npm i eslint-plugin-jsx-a11y -g
npm i babel-eslint -g

2.webstorm 配置 eslint

Preference->Tools->External Tools, Click "+“

3.Record the macro
Edit > Macros > Start Macro recording

i. Cmd+Alt+L   (使用editorconfig格式化代碼)

ii. Cmd+Alt+S  (保存)

iii. Tools->External Tools->ESlint Fix

Stop recording the macro clicking on the Stop button on the bottom right of the page.
Give this macro a name like "Format(editorconfig+eslint) and Save"

4.Assing Ctrl+S to "Format(editorconfig+eslint) and Save"
open WebStorm->Preferences;
search for "keymap" and open it;
search "Format(editorconfig+eslint) and Save" and double click the action "Format(editorconfig+eslint) and Save";
select "Add Keyboard Shortcut";
select "Cmd+S" as first stroke.
it will report conflicts. Ignore it and click OK button
WebStorm will show a warning "The shortcut is already assigned to other actions. Do you want to remove other assignments?" Click "Remove" button

5.webstorm的自動格式化需要特殊設置：勾選 Keep when reformatting->Simple methods in one line

否則會把下面的一行
console.groupEnd = console.groupEnd || function () {}
變成兩行，
console.groupEnd = console.groupEnd || function () {
}
醜陋而且沒有必要

PS:每次cmd+s的時候，都要顯示ESlint Fix執行結果的命令行窗口，可以通過cmd+4關閉。

如果覺得每次都需要額外操作來關閉這個窗口，太麻煩，可以選擇將其固定在左側/右側，或者懸浮.

**20170827 更新 ***

最近公司有同事在使用VSCode之後，用了Prettier這個插件，引入了一個新的特性：

Bracket Spacing （Print spaces between brackets in object literals）

效果如下圖:

這個特性是EditorConfig不支持的，爲了解決這個問題，只好在Webstorm中引入Prettier，而且用Prettier的規則，覆蓋EditorConfig的規則，在文件保存的時候，只使用Prettier！

1.全局安裝prettier

npm install prettier -g

2.webstorm設置prettier

Preference->Tools->External Tools, Click "+“

更多參數說明和IDE集成說明，請查看https://github.com/prettier/prettier

3.Record the macro
Edit > Macros > Start Macro recording
Tools->External Tools->prettier,and then cmd+4, and then cmd+4 , and then cmd+alt+s
Stop recording the macro clicking on the Stop button on the bottom right of the page.
Give this macro a name like "Format(prettier) and Save"

4.Assing Ctrl+S to "Format(prettier) and Save"
open WebStorm->Preferences;
search for "keymap" and open it;
search "Format(prettier) and Save" and double click the action "Format(prettier) and Save";
select "Add Keyboard Shortcut";
select "Cmd+S" as first stroke.
it will report conflicts. Ignore it and click OK button
WebStorm will show a warning "The shortcut is already assigned to other actions. Do you want to remove other assignments?" Click "Remove" button

****下面是舊版，用的是EditorConfig********

這個git的截圖大家是不是很熟悉，一個項目多人協作。有人提交前，格式化了代碼，有人沒有，進倉庫的時候，各種合併！真正修改的幾行，散落在這些無用的代碼中，不方便快速定位！

如果大家都用同樣的IDE，IDE在保存文件的時候，能自動格式化，就能最大限度的規避這種問題！

很幸運，webstorm正好有這個功能！

PS: go的fmt已經在語言級別實現保存自動格式代碼了！不需要在ide設置宏!

參考資料：http://stackoverflow.com/questions/21217791/how-to-auto-format-code-in-webstorm

Record the macro

1. Edit > Macros > Start Macro recording
2. Press Cmd+Alt+L, and then Cmd+Alt+S
3. Stop recording the macro clicking on the Stop button on the bottom right of the page.
4. Give this macro a name like "Format and Save"

Assing Ctrl+S to "Format and Save"

1. open WebStorm->Preferences;
2. search for "keymap" and open it;
3. search "Format and Save" and double click the action "Format and Save";
4. select "Add Keyboard Shortcut";
5. select "Cmd+S" as first stroke.
6. it will report conflicts. Ignore it and click OK button
7. WebStorm will show a warning "The shortcut is already assigned to other actions. Do you want to remove other assignments?" Click "Remove" button

That's it.

PS: websotrm自帶的format其實是EditorConfig,可以在項目下新增一個.editorconfig 文件，覆蓋默認的規則:

root = true

[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = false
insert_final_newline = false