Skip to content

Instantly share code, notes, and snippets.

@mdmoinulhossain

mdmoinulhossain/.prettierrc

Created October 22, 2025 07:10
Show Gist options
  • Save mdmoinulhossain/20fe8ab08192fc0a5ff9f4afb4281956 to your computer and use it in GitHub Desktop.
Save mdmoinulhossain/20fe8ab08192fc0a5ff9f4afb4281956 to your computer and use it in GitHub Desktop.
Download ZIP
Get Prettierr your Code
Raw
.prettierrc
{
"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
}
}
]
}
Raw
prettierrc.md

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.

Raw
settings.json
{
"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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment