作者：laoshu仔 | 来源：互联网 | 2023-07-14 15:10
**20170901更新***之前用webstorm+prettier之后，发现如果切换到旧的项目，用webstorm一保存强制使用prettier的规范就悲剧了！于是改成每个项目用自己的
之前用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 配置 eslintPreference->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
|
京公网安备 11010802041100号