npm package: @luckyf/prettier-config
Description: Prettier config by luckyf
Author: Lukas Frischknecht
Latest version: 5.2.0

# Prettier Config by luckyf

This shareable prettier config which formats the most common files used during web development.

## Features

- Formats the following file extensions: `Dockerfile`, `Dockerfile.xyz`, `.css`, `.env`, `.gitignore`, `.gql`, `.html`, `.js`, `.json`, `.jsonc`, `.jsx`, `.less`, `.md`, `.scss`, `.sh`, `.toml`, `.ts`, `.tsx`, `.vue`, `.vue`, `.xml`, `.yaml` & `.yml`
- Sorts Imports on JS/TS Files
- Sorts `package.json` Files
- Sorts Tailwind Classes

## Usage

- Installation

  - NPM: `npm install --save-dev @luckyf/prettier-config prettier @prettier/plugin-xml @trivago/prettier-plugin-sort-imports prettier-plugin-packagejson prettier-plugin-sh prettier-plugin-tailwindcss prettier-plugin-toml`
  - Yarn: `yarn add -D @luckyf/prettier-config prettier @prettier/plugin-xml @trivago/prettier-plugin-sort-imports prettier-plugin-packagejson prettier-plugin-sh prettier-plugin-tailwindcss prettier-plugin-toml`
  - PNPM: `pnpm add -D @luckyf/prettier-config prettier @prettier/plugin-xml @trivago/prettier-plugin-sort-imports prettier-plugin-packagejson prettier-plugin-sh prettier-plugin-tailwindcss prettier-plugin-toml`

> **Recommended**: Set `"type": "module"` in the `package.json`, otherwise use `module.exports`-Syntax if you set `"type": "commonjs"`

- Create `.prettier.config.js`:

  ```js
  'use strict';

  import { Config } from '@luckyf/prettier-config';

  /**
   * @type {import('@luckyf/prettier-config').Config}
   */
  export default {
    ...Config,
    // Overwrite or modify setting if needed
  };
  ```

- Create `.prettierignore`:

  ```gitignore
  CHANGELOG.md
  ```

- Add the following scripts to `package.json`:
  - For NPM
    ```json
    {
      ...
      "scripts": {
        "_format": "prettier \"**/*(*.{js,ts,json,yml,yaml,xml,sh,env,gitignore,toml,md,css,vue,jsx,tsx,html,gql,jsonc,less,scss,vue}|*{Dockerfile,Dockerfile.*})\"",
        "format": "npm _format --check",
        "format:fix": "npm _format --write"
      }
      ...
    }
    ```
  - For PNPM
    ```json
    {
      ...
      "scripts": {
        "_format": "prettier \"**/*(*.{js,ts,json,yml,yaml,xml,sh,env,gitignore,toml,md,css,vue,jsx,tsx,html,gql,jsonc,less,scss,vue}|*{Dockerfile,Dockerfile.*})\"",
        "format": "pnpm run _format --check",
        "format:fix": "pnpm run _format --write"
      }
      ...
    }
    ```
  - For Yarn
    ```json
    {
      ...
      "scripts": {
        "_format": "prettier \"**/*(*.{js,ts,json,yml,yaml,xml,sh,env,gitignore,toml,md,css,vue,jsx,tsx,html,gql,jsonc,less,scss,vue}|*{Dockerfile,Dockerfile.*})\"",
        "format": "yarn _format --check",
        "format:fix": "yarn _format --write"
      }
      ...
    }
    ```

## VSCode

- Install the recommended VSCode Extensions:

  - `esbenp.prettier-vscode`: Use Prettier as default formatter
  - `foxundermoon.shell-format`: Use this extension for files like Dockerfiles, Dotenv, Ignore, Properties, Shell
  - `be5invis.toml`: Use this extension for TOML files

- Add the recommended from [here](https://git.frischknecht.dev/luckyf/prettier-config/-/blob/main/.vscode/settings.json?ref_type=heads) to your VSCode settings.
- Restart VSCode