My Prettier Config

My preferred Prettier config which i use between my projects.

I recommend using this config with my Editoconfig template. They are fully compatible between themselves.

This config is in the .prettierrc.json file.

Usage

Stage 0

Install prettier and @socnik/my-prettier-config packages:

npx nypm add -D prettier @socnik/my-prettier-config

Stage 1

Add config to your package.json:

// package.json

{
  "name": "my-cool-library",
  "version": "9000.0.1",
  // ...
  "prettier": "@socnik/my-prettier-config", // <- Add this line
}

Stage 2 (Optional)

Install Prettier VSCode extension from marketplace.

Stage 3

Add your package manager lockfile to .prettierignore:

# .prettierignore

# Pnpm
pnpm-lock.yaml

# Npm
package-lock.json

Stage 4a (optional)

Setup VSCode environment with workspace configuration:

// .vscode/extensions.json

{
  "recommendations": [
    // ...
    "esbenp.prettier-vscode",
    // ...
  ],
}

// .vscode/settings.json

{
  // Prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
}

Stage 4b (optional)

Setup VSCode environment with Devcontainer configuration:

// .devcontainer/devcontainer.json

{
  // ...
  "customizations": {
    "vscode": {
      "settings": {
        // Prettier
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true,
      },
      "extensions": ["esbenp.prettier-vscode"],
    },
  },
}

Stage 5 (optional)

Setup Editorconfig with my config. If you want to do it, follow the instructions in socnik/my-editorconfig repository.

Stage 6

Enjoy 🚀!