如何在VSCode中保存时美化由Gatsby引导的组件？

Question

我正在尝试根据Gatsby文档：https://www.gatsbyjs.org/tutorial/part-zero/#install-the-prettier-plugin

在Gatsby项目中的VSCode中保存时启用格式设置

我还尝试设置eslint，所以现在有了：

{
  "env": {
    "browser": true,
    "es6": true
  },
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": ["prettier"],
  "rules": { "prettier/prettier": "error" },
  "extends": ["airbnb", "prettier", "prettier/react"],
  "settings": {
    "import/core-modules": ["react"]
  }
}

在我的.eslintrc.json和

中

{
  "endOfLine": "lf",
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

在我的.prettierrc中。

我在“用户设置”和“工作区”设置中都启用了“保存，粘贴和类型格式化”功能，它似乎可以在.eslintrc.json和.css文件中使用，但不适用于Gatsby组件（ Header.js，Layout.js等）。我可以通过打开命令面板并手动单击“设置文档格式”来设置这些组件文件的格式，但不能在保存时自动设置。