Skip to content

Instantly share code, notes, and snippets.

@mdmoinulhossain

mdmoinulhossain/.prettierrc

Created October 22, 2025 07:10
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mdmoinulhossain/20fe8ab08192fc0a5ff9f4afb4281956 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mdmoinulhossain/20fe8ab08192fc0a5ff9f4afb4281956 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mdmoinulhossain created this gist Oct 22, 2025.
    19 changes: 19 additions & 0 deletions .prettierrc
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    {
    "semi": true,
    "singleQuote": true,
    "tabWidth": 2,
    "trailingComma": "es5",
    "printWidth": 80,
    "bracketSpacing": true,
    "arrowParens": "avoid",
    "endOfLine": "lf",
    "overrides": [
    {
    "files": "*.blade.php",
    "options": {
    "parser": "html",
    "printWidth": 120
    }
    }
    ]
    }
    59 changes: 59 additions & 0 deletions prettierrc.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,59 @@
    The easiest way to set up automatic code formatting in any new IDE:

    # VS Code (Most Popular)
    Step 1: Install Extension

    * Open VS Code
    Go to Extensions (Ctrl+Shift+X)
    Search "Prettier - Code formatter"
    Install the one by Esben Petersen

    * Step 2: Enable Format on Save
    Press Ctrl+, (open settings)
    Search "format on save"
    Check the box for "Editor: Format On Save"
    Search "default formatter"
    Set it to "Prettier - Code formatter"
    Done! Now every save auto-formats your code.

    # WebStorm/PhpStorm (JetBrains)

    * Step 1: Enable Prettier
    Go to File → Settings → Languages & Frameworks → JavaScript → Prettier
    Check "On code reformat" and "On save"
    Set Prettier package path (usually auto-detected)

    * Step 2: Set as Default
    Go to Editor → Code Style
    Set "Prettier" as formatter for JS, HTML, CSS

    # Sublime Text

    * Step 1: Install Package Control
    Install Package Control if you don't have it

    * Step 2: Install JsPrettier
    Ctrl+Shift+P → "Package Control: Install Package"
    Search "JsPrettier" and install

    * Step 3: Enable Auto Format
    Preferences → Package Settings → JsPrettier → Settings
    Add: "auto_format_on_save": true
    Any IDE - Universal Method
    The .prettierrc file does the magic!

    Just copy these 2 files to any new project:

    .prettierrc (your formatting rules)
    .vscode/settings.json (VS Code auto-format settings)

    Pro Tip: Create a template folder with these files and copy them to every new project. The .prettierrc file works with ANY editor that supports Prettier!

    ## Quick Setup for New Projects:

    Copy .prettierrc to project root
    Install Prettier extension in your IDE
    Enable "format on save" in IDE settings
    Done!

    The .prettierrc file is the key - it makes formatting consistent across all IDEs and team members.
    25 changes: 25 additions & 0 deletions settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,25 @@
    {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
    },
    "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[blade]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "files.associations": {
    "*.blade.php": "blade"
    }
    }