npm package: @febase/prettier-config
Description: Shared Prettier config
Author: 2tl
Latest version: 1.5.0

# Prettier Config

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

## Prettier and Linters

1. [Prettier Config](https://www.npmjs.com/package/@febase/prettier-config): `Prettier` config for the `Front-end` projects.
2. [Prettier Config](https://www.npmjs.com/package/@febase/prettier-config-svelte): `Prettier` config for the `Svelte` projects.
3. [Eslint Config Base](https://www.npmjs.com/package/@febase/eslint-config-base): `Eslint` config for the `Javascript` projects.
4. [Eslint Config Typescript](https://www.npmjs.com/package/@febase/eslint-config-ts): `Eslint` config for the `Typescript` projects.
5. [Eslint Config React JS](https://www.npmjs.com/package/@febase/eslint-config-react): `Eslint` config for the `React JS` projects.
6. [Eslint Config React TS](https://www.npmjs.com/package/@febase/eslint-config-reactts): `Eslint` config for the `React TS` projects.
7. [Eslint Config Next JS](https://www.npmjs.com/package/@febase/eslint-config-next): `Eslint` config for the `Next JS` projects.
8. [Eslint Config Next TS](https://www.npmjs.com/package/@febase/eslint-config-nextts): `Eslint` config for the `Next TS` projects.
9. [Eslint Config Lit JS](https://www.npmjs.com/package/@febase/eslint-config-lit): `Eslint` config for the `Lit JS` projects.
10. [Eslint Config Lit TS](https://www.npmjs.com/package/@febase/eslint-config-litts): `Eslint` config for the `Lit TS` projects.
11. [Eslint Config Node ESM](https://www.npmjs.com/package/@febase/eslint-config-node-esm): `Eslint` config for the `Node Esm` projects.
12. [Eslint Config Svelte JS](https://www.npmjs.com/package/@febase/eslint-config-svelte): `Eslint` config for the `Svelte` projects.
13. [Eslint Config Svelte TS](https://www.npmjs.com/package/@febase/eslint-config-sveltets): `Eslint` config for the `Svelte TS` projects.

> and more to come.

## Usage

#### 1. Install package

```sh
pnpm add -D prettier @febase/prettier-config
```

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

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

#### 3. Add script to your `package.json`.

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

## Configuration your `VScode`.

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

```sh
.vscode
  - settings.json
```

```json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}
```

## Setup git hooks

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

```sh
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`:

```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.

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