Astro tooling : Prettier

.editorconfig

# editorconfig.org
root = true

[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = false

[**/Makefile]
indent_style = tab
indent_size = 4

[*.md]
trim_trailing_whitespace = false

[{.*,*.md,*.json,*.toml,*.yml,}]
indent_style = space

.prettierrc.cjs

/** @type {import("@types/prettier").Options} */

module.exports = {
  printWidth: 80,
  semi: true,
  singleQuote: true,
  tabWidth: 2,
  trailingComma: 'all',
  useTabs: false,

  plugins: ['./node_modules/prettier-plugin-astro'],
  overrides: [
    {
      files: '*.astro',
      options: {
        parser: 'astro',
        printWidth: 80,
      },
    },
    {
      files: ['.*', '*.json', '*.md', '*.toml', '*.yml'],
      options: {
        useTabs: false,
      },
    },
    {
      files: ['**/*.css', '**/*.scss'],
      options: {
        singleQuote: false,
      },
    },
  ],
};

package.json

{
  "scripts": {
    "format": "prettier -w ./src ./src/**/*.astro"
  },
  "devDependencies": {
    "@types/prettier": "^2.6.3",
    "prettier": "^2.6.2",
    "prettier-plugin-astro": "^0.0.12"
  }
}

settings.json

// VSCode
// Extensions: "esbenp.prettier-vscode", "editorconfig.editorconfig"

{
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "prettier.documentSelectors": ["**/*.astro"],
  "[astro]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }

  // "editor.formatOnPaste": false,
  // "editor.formatOnType": false,
  // "editor.formatOnSave": true,
  // "editor.codeActionsOnSave": {
  //   "source.fixAll": true
  // }
}