引入 Prettier 总结

[liyatang]

背景

最近在重构代码，碰到很多格式化问题。不是很满意 webstorm 的格式化，跑了格式化后，还要自己手动改一下地方，不是那么智能。 用 vsc 的人也挺多，不同编辑器格式化不一样，比较乱。

所以引入 prettier 统一代码格式。

设置prettier

Webstorm

• 更新 eslint-plugin-gmfe 到 1.x（里面配置好了 prettier）
• 设置webstorm 的 prettier package。 Preferences > Languages & Framworks > Javascript > Prettier。
• 添加文件 .prettierrc.js

  module.exports = {
  semi: false,
  singleQuote: true,
  jsxSingleQuote: true
  }

• 使用 prettier 格式化默认快捷键是 shift + option + command + p

VS Code 待玩 VS Code 的人补充

遇到问题

prettier 提供的配置很少（也挺好），也就是说基本是要按照他的规则走。如果和 eslint 已有的规则冲突，那么只能改 eslint 的规则（就是这么倔强），解决方法见 https://github.com/prettier/eslint-config-prettier ，按照指引配置好即可。可参考 https://github.com/gmfe/eslint-plugin-gmfe/blob/master/index.js 配置

相关资料

prettier 官网 https://prettier.io/ eslint 官网和一些规则 https://cn.eslint.org/ https://cn.eslint.org/docs/rules/

其他

为避免用webstorm常规的格式化，可以将其快捷键去掉。 Preferences > Keymap > 找到 Reformat Code，移除快捷键即可。

默认的prettier快捷键按四个键，很麻烦，我改成了 option + command + p