如何搭配使用Prettier与@hapi/eslint-plugin

核心逻辑 #

调整格式化和校验的执行顺序，先由Prettier处理通用格式规范，再由ESLint的@hapi/eslint-plugin执行hapi专属规则的修复，完全保留hapi的代码风格要求。

操作步骤 #

• 安装必要依赖

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

• 调整ESLint配置（.eslintrc.json 或对应格式的配置文件）

{
  "extends": [
    "plugin:@hapi/recommended",
    // Prettier相关配置必须放在extends最后一位，自动关闭ESLint中与Prettier冲突的通用规则
    "plugin:prettier/recommended"
  ],
  "rules": {
    // 手动开启hapi要求的函数首行空行规则，开启自动修复
    "@hapi/hapi/function-padding": ["error", "always"]
  }
}

• 配置格式化执行脚本（package.json）

{
  "scripts": {
    "format": "prettier --write . && eslint --fix ."
  }
}

IDE适配（以VSCode为例） #

修改VSCode的settings.json配置，保证保存时的执行顺序符合要求：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

效果验证 #

执行npm run format后，ESLint会自动给所有函数添加首行空行，Prettier不会主动删除该空行，完全符合hapi代码规范要求。如果后续遇到其他hapi专属规则与Prettier的冲突，都可以按照该思路，在ESLint rules中手动开启对应hapi规则即可。

内容的提问来源于stack exchange，提问作者ee0jmt