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:

  '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:

  CHANGELOG.md

• Add the following scripts to package.json:

  • For NPM

    {
      ...
      "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

    {
      ...
      "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

    {
      ...
      "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 to your VSCode settings.

• Restart VSCode