Prettier Config

This package provides prettier config for the Front-end projects.

Prettier and Linters

1. Prettier Config: Prettier config for the Front-end projects.
2. Prettier Config: Prettier config for the Svelte projects.
3. Eslint Config Base: Eslint config for the Javascript projects.
4. Eslint Config Typescript: Eslint config for the Typescript projects.
5. Eslint Config React JS: Eslint config for the React JS projects.
6. Eslint Config React TS: Eslint config for the React TS projects.
7. Eslint Config Next JS: Eslint config for the Next JS projects.
8. Eslint Config Next TS: Eslint config for the Next TS projects.
9. Eslint Config Lit JS: Eslint config for the Lit JS projects.
10. Eslint Config Lit TS: Eslint config for the Lit TS projects.
11. Eslint Config Node ESM: Eslint config for the Node Esm projects.
12. Eslint Config Svelte JS: Eslint config for the Svelte projects.
13. Eslint Config Svelte TS: Eslint config for the Svelte TS projects.

and more to come.

Usage

1. Install package

pnpm add -D prettier @febase/prettier-config

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

{
  "prettier": "@febase/prettier-config"
}

3. Add script to your package.json.

{
  "scripts": {
    "format": "prettier --write ."
  }
}

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
}

Setup git hooks

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

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

• Add the following to your package.json:

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": ["pnpm format", "pnpm lint:fix"],
    "*.{json,css,md,html}": ["pnpm format"]
  }
}

Note

• Monorepo: Just setup at the root repo.
• VScode: Do not use the below config. Because it may cause conflict order import with this config.

"editor.codeActionsOnSave": {
  "source.organizeImports": true,
},