利用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 Edit > Macros > Start Macro recording Press Cmd+Alt+L, 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 and Save" Assing Ctrl+S to "Format and Save" open WebStorm->Preferences; search for "keymap" and open it; search "Format and Save" and double click the action "Format 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 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