Svelte Prettier Config

This package provides Svelte Prettier Config.

Usage

1. Install package

pnpm add -D prettier @lcbase/prettier-config-svelte

2. Add "prettier": "@lcbase/prettier-config-svelte" to your package.json.

{
  "prettier": "@lcbase/prettier-config-svelte"
}

3. Add script to your package.json.

{
  "scripts": {
    "prettify": "prettier src --check",
    "prettify:fix": "pnpm prettify --write"
  }
}

4. Combine with @lcbase/eslint-config-* packages

pnpm add -D eslint @lcbase/eslint-config-*

{
  "scripts": {
    "lint": "eslint src",
    "lint:fix": "pnpm lint --fix",
    "prettify": "prettier src --check",
    "prettify:fix": "prettier src --write",
    "format": "pnpm prettify:fix && pnpm lint:fix"
  }
}

5. Configuration your VScode.

In root your project's folder. Create .vscode folder with structure:

.vscode
  - settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[svelte]": {
    "editor.defaultFormatter": "svelte.svelte-vscode"
  },
  "eslint.validate": ["javascript", "javascriptreact", "svelte"],
  "prettier.documentSelectors": ["**/*.svelte"]
}

6. Setup git hooks

• Install packages and global setup husky, lint-staged.

pnpm add -D husky lint-staged
npx husky install
npm pkg set scripts.prepare="husky install"
npx husky add .husky/pre-commit "npx lint-staged"

• Add the following to your package.json:

{
  "scripts": {
    "prepare": "husky install"
  },
  "lint-staged": {
    "*.{js,cjs,mjs,jsx,cjsx,mjsx,ts,mts,cts,tsx,mtsx,ctsx}": ["pnpm format"],
    "*.{json,css,md,html}": ["pnpm prettify:fix"]
  }
}