Skip to content

Instantly share code, notes, and snippets.

@lunitrixx

lunitrixx/Setup PhpStorm to use Prettier and Laravel Pint (Antlers, Blade, PHP, Tailwind, Statamic).md

Forked from marcorieser/Setup PhpStorm to use Prettier and Laravel Pint (Antlers, Blade, PHP, Tailwind, Statamic).md
Created July 7, 2025 19:45
Show Gist options
  • Save lunitrixx/46d1741a7ca348f694f1f52f7e64d190 to your computer and use it in GitHub Desktop.
Save lunitrixx/46d1741a7ca348f694f1f52f7e64d190 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @marcorieser marcorieser renamed this gist Apr 29, 2025. 1 changed file with 0 additions and 0 deletions.
    0 Instructions.md → ...tlers, Blade, PHP, Tailwind, Statamic).md
    View file
    File renamed without changes.
  2. @marcorieser marcorieser revised this gist Apr 29, 2025. 1 changed file with 24 additions and 4 deletions.
    28 changes: 24 additions & 4 deletions Instructions.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,8 @@
    ## Install dependencies
    Run `npm install -D prettier prettier-plugin-antlers prettier-plugin-blade prettier-plugin-tailwindcss` in your terminal

    ## Configure prettier
    ## Prettier
    ### Configure prettier
    Create a `.prettierrc` file with the following content
    ```json
    {
    @@ -51,10 +52,29 @@ Create a `.prettierrc` file with the following content
    ]
    }
    ```
    ## Register Prettier as formatter
    Under `Settings > Languages & Frameworks > JavaScript > Prettier` register the following pattern for `Run for Files`:

    `**/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,blade.php,antlers.html,css}`
    ### Disable prettier for yaml and md
    Create a `.prettierignore` file with the following content
    ```
    **/*.md
    **/*.yaml
    ```

    ### Register Prettier as formatter
    Under `Settings | Languages & Frameworks | JavaScript | Prettier`
    - Choose `Automatic Prettier configuration`
    - Add the this pattern for `Run for Files`: `**/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,blade.php,antlers.html,css}`
    - Tick the boxes for
    - `Run on save`
    - `Prefer Prettier configuration to IDE code style`

    ## Pint
    ## Configure Pint
    - Under `Settings | PHP | Quality Tools`, enable `Laravel Pint` as External Formatter
    - Under `Settings | PHP | Quality Tools | Laravel Pint`, enable Pint
    - Under `Settings | Tools | Actions on Save`
    - Enable `Reformat code`
    - Exclude the file types `Antlers`, `Blade`, `Markdown`, and `Yaml`

    ## Troubleshooting
    - Make sure a Node interpreter is selected under `Settings > Language & Frameworks > Node.js`
  3. @marcorieser marcorieser renamed this gist Apr 29, 2025. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.txt → Instructions.md
    View file
    File renamed without changes.
  4. @marcorieser marcorieser renamed this gist Apr 29, 2025. 1 changed file with 0 additions and 0 deletions.
    0 ...wind and PHP with Prettier in PhpStorm.md → gistfile1.txt
    View file
    File renamed without changes.
  5. @marcorieser marcorieser revised this gist Apr 29, 2025. No changes.
  6. @marcorieser marcorieser revised this gist Apr 29, 2025. 1 changed file with 45 additions and 34 deletions.
    79 changes: 45 additions & 34 deletions Format Antlers, Blade, Vue, Tailwind and PHP with Prettier in PhpStorm.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,43 +1,54 @@
    ## Install dependencies
    Run `npm install -D prettier prettier-plugin-antlers prettier-plugin-blade prettier-plugin-tailwindcss @prettier/plugin-php` in your terminal
    Run `npm install -D prettier prettier-plugin-antlers prettier-plugin-blade prettier-plugin-tailwindcss` in your terminal

    ## Configure prettier
    Create a `.prettierrc` file with the following content
    ```json
    {
    "singleQuote": true,
    "printWidth": 140,
    "tabWidth": 4,
    "plugins": ["prettier-plugin-antlers", "prettier-plugin-blade", "@prettier/plugin-php", "prettier-plugin-tailwindcss"],
    "overrides": [
    {
    "files": "*.antlers.html",
    "options": {
    "parser": "antlers",
    "singleQuote": false
    }
    },
    {
    "files": ["**/*.php", "**/!*.blade.php"],
    "options": {
    "parser": "php",
    "phpVersion": "8.2"
    }
    },
    {
    "files": "*.blade.php",
    "options": {
    "parser": "blade",
    "singleQuote": false
    }
    },
    {
    "files": ["**/*.css", "**/*.html"],
    "options": {
    "singleQuote": false
    }
    }
    ]
    "singleQuote": true,
    "printWidth": 140,
    "tabWidth": 4,
    "plugins": [
    "prettier-plugin-antlers",
    "prettier-plugin-blade",
    "prettier-plugin-tailwindcss"
    ],
    "tailwindStylesheet": "./resources/css/site.css",
    "overrides": [
    {
    "files": "*.antlers.html",
    "options": {
    "parser": "antlers",
    "singleQuote": false
    }
    },
    {
    "files": "*.blade.php",
    "options": {
    "parser": "blade",
    "singleQuote": false
    }
    },
    {
    "files": [
    "**/*.css",
    "**/*.html"
    ],
    "options": {
    "singleQuote": false
    }
    },
    {
    "files": [
    "**/*.yaml",
    "**/*.yml"
    ],
    "options": {
    "singleQuote": false,
    "tabWidth": 2
    }
    }
    ]
    }
    ```
    ## Register Prettier as formatter
  7. @marcorieser marcorieser revised this gist Apr 29, 2025. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Format Antlers, Blade, Vue, Tailwind and PHP with Prettier in PhpStorm.md
    View file
    Original file line number Diff line number Diff line change
    @@ -43,7 +43,7 @@ Create a `.prettierrc` file with the following content
    ## Register Prettier as formatter
    Under `Settings > Languages & Frameworks > JavaScript > Prettier` register the following pattern for `Run for Files`:

    `{**/*,*}.{js,ts,jsx,tsx,html,vue,php,css}`
    `**/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,blade.php,antlers.html,css}`

    ## Troubleshooting
    - Make sure a Node interpreter is selected under `Settings > Language & Frameworks > Node.js`
  8. @marcorieser marcorieser revised this gist Nov 14, 2024. 1 changed file with 2 additions and 10 deletions.
    12 changes: 2 additions & 10 deletions Format Antlers, Blade, Vue, Tailwind and PHP with Prettier in PhpStorm.md
    View file
    Original file line number Diff line number Diff line change
    @@ -6,16 +6,9 @@ Create a `.prettierrc` file with the following content
    ```json
    {
    "singleQuote": true,
    "trailingComma": "all",
    "printWidth": 140,
    "tabWidth": 2,
    "endOfLine": "lf",
    "plugins": [
    "prettier-plugin-antlers",
    "prettier-plugin-blade",
    "@prettier/plugin-php",
    "prettier-plugin-tailwindcss"
    ],
    "tabWidth": 4,
    "plugins": ["prettier-plugin-antlers", "prettier-plugin-blade", "@prettier/plugin-php", "prettier-plugin-tailwindcss"],
    "overrides": [
    {
    "files": "*.antlers.html",
    @@ -28,7 +21,6 @@ Create a `.prettierrc` file with the following content
    "files": ["**/*.php", "**/!*.blade.php"],
    "options": {
    "parser": "php",
    "singleQuote": false,
    "phpVersion": "8.2"
    }
    },
  9. @marcorieser marcorieser revised this gist Jan 1, 2024. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Format Antlers, Blade, Vue, Tailwind and PHP with Prettier in PhpStorm.md
    View file
    Original file line number Diff line number Diff line change
    @@ -48,7 +48,7 @@ Create a `.prettierrc` file with the following content
    ]
    }
    ```
    ## Register prettier as formatter
    ## Register Prettier as formatter
    Under `Settings > Languages & Frameworks > JavaScript > Prettier` register the following pattern for `Run for Files`:

    `{**/*,*}.{js,ts,jsx,tsx,html,vue,php,css}`
  10. @marcorieser marcorieser renamed this gist Jan 1, 2024. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions ...tailwind and php formatter in PhpStorm.md → ...wind and PHP with Prettier in PhpStorm.md
    View file
    Original file line number Diff line number Diff line change
    @@ -11,10 +11,10 @@ Create a `.prettierrc` file with the following content
    "tabWidth": 2,
    "endOfLine": "lf",
    "plugins": [
    "prettier-plugin-tailwindcss",
    "prettier-plugin-antlers",
    "prettier-plugin-blade",
    "@prettier/plugin-php"
    "@prettier/plugin-php",
    "prettier-plugin-tailwindcss"
    ],
    "overrides": [
    {
  11. @marcorieser marcorieser revised this gist Jan 1, 2024. 1 changed file with 6 additions and 12 deletions.
    18 changes: 6 additions & 12 deletions antlers, blade, vue, tailwind and php formatter in PhpStorm.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,12 +1,5 @@
    ## Install dependencies
    Some plugins are not yet compatible with Prettier v3:
    - https://github.com/Stillat/blade-parser-typescript/issues/69
    - https://github.com/Stillat/vscode-antlers-language-server/issues/73


    Run `npm install -D prettier@^2 prettier-plugin-antlers prettier-plugin-blade [email protected] @prettier/[email protected]` in your terminal

    ~~Run `npm install -D prettier prettier-plugin-antlers prettier-plugin-blade prettier-plugin-tailwindcss @prettier/plugin-php` in your terminal~~
    Run `npm install -D prettier prettier-plugin-antlers prettier-plugin-blade prettier-plugin-tailwindcss @prettier/plugin-php` in your terminal

    ## Configure prettier
    Create a `.prettierrc` file with the following content
    @@ -18,9 +11,10 @@ Create a `.prettierrc` file with the following content
    "tabWidth": 2,
    "endOfLine": "lf",
    "plugins": [
    "./node_modules/prettier-plugin-antlers",
    "./node_modules/prettier-plugin-blade",
    "./node_modules/@prettier/plugin-php"
    "prettier-plugin-tailwindcss",
    "prettier-plugin-antlers",
    "prettier-plugin-blade",
    "@prettier/plugin-php"
    ],
    "overrides": [
    {
    @@ -57,7 +51,7 @@ Create a `.prettierrc` file with the following content
    ## Register prettier as formatter
    Under `Settings > Languages & Frameworks > JavaScript > Prettier` register the following pattern for `Run for Files`:

    `{**/*,*}.{js,ts,jsx,tsx,antlers.html,vue,php,css}`
    `{**/*,*}.{js,ts,jsx,tsx,html,vue,php,css}`

    ## Troubleshooting
    - Make sure a Node interpreter is selected under `Settings > Language & Frameworks > Node.js`
  12. @marcorieser marcorieser revised this gist Dec 7, 2023. 1 changed file with 8 additions and 1 deletion.
    9 changes: 8 additions & 1 deletion antlers, blade, vue, tailwind and php formatter in PhpStorm.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,12 @@
    ## Install dependencies
    Run `npm install -D prettier prettier-plugin-antlers prettier-plugin-blade prettier-plugin-tailwindcss @prettier/plugin-php` in your terminal
    Some plugins are not yet compatible with Prettier v3:
    - https://github.com/Stillat/blade-parser-typescript/issues/69
    - https://github.com/Stillat/vscode-antlers-language-server/issues/73


    Run `npm install -D prettier@^2 prettier-plugin-antlers prettier-plugin-blade [email protected] @prettier/[email protected]` in your terminal

    ~~Run `npm install -D prettier prettier-plugin-antlers prettier-plugin-blade prettier-plugin-tailwindcss @prettier/plugin-php` in your terminal~~

    ## Configure prettier
    Create a `.prettierrc` file with the following content
  13. @marcorieser marcorieser revised this gist Dec 7, 2023. 2 changed files with 56 additions and 49 deletions.
    49 changes: 0 additions & 49 deletions antlers, blade and tailwind formatter in PhpStorm.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,49 +0,0 @@
    ## Install dependencies
    Run `npm install -D prettier prettier-plugin-antlers prettier-plugin-blade prettier-plugin-tailwindcss` in your terminal

    ## Configure prettier
    Create a `.prettierrc` file with the following content
    ```js
    {
    "singleQuote": true,
    "trailingComma": "all",
    "printWidth": 140,
    "tabWidth": 2,
    "endOfLine": "lf",
    "plugins": [
    "./node_modules/prettier-plugin-antlers/",
    "./node_modules/prettier-plugin-blade/"
    ],
    "overrides": [
    {
    "files": "*.antlers.html",
    "options": {
    "parser": "antlers"
    }
    },
    {
    "files": "*.blade.php",
    "options": {
    "parser": "blade"
    }
    },
    {
    "files": [
    "**/*.css",
    "**/*.html",
    "**/*.php"
    ],
    "options": {
    "singleQuote": false
    }
    }
    ]
    }
    ```
    ## Register prettier as formatter
    Under `Settings > Languages & Frameworks > JavaScript > Prettier` register the following pattern for `Run for Files`:

    `{**/*,*}.{js,ts,jsx,tsx,antlers.html,vue,blade.php,css}`

    ## Troubleshooting
    - Make sure a Node interpreter is selected under `Settings > Language & Frameworks > Node.js`
    56 changes: 56 additions & 0 deletions antlers, blade, vue, tailwind and php formatter in PhpStorm.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,56 @@
    ## Install dependencies
    Run `npm install -D prettier prettier-plugin-antlers prettier-plugin-blade prettier-plugin-tailwindcss @prettier/plugin-php` in your terminal

    ## Configure prettier
    Create a `.prettierrc` file with the following content
    ```json
    {
    "singleQuote": true,
    "trailingComma": "all",
    "printWidth": 140,
    "tabWidth": 2,
    "endOfLine": "lf",
    "plugins": [
    "./node_modules/prettier-plugin-antlers",
    "./node_modules/prettier-plugin-blade",
    "./node_modules/@prettier/plugin-php"
    ],
    "overrides": [
    {
    "files": "*.antlers.html",
    "options": {
    "parser": "antlers",
    "singleQuote": false
    }
    },
    {
    "files": ["**/*.php", "**/!*.blade.php"],
    "options": {
    "parser": "php",
    "singleQuote": false,
    "phpVersion": "8.2"
    }
    },
    {
    "files": "*.blade.php",
    "options": {
    "parser": "blade",
    "singleQuote": false
    }
    },
    {
    "files": ["**/*.css", "**/*.html"],
    "options": {
    "singleQuote": false
    }
    }
    ]
    }
    ```
    ## Register prettier as formatter
    Under `Settings > Languages & Frameworks > JavaScript > Prettier` register the following pattern for `Run for Files`:

    `{**/*,*}.{js,ts,jsx,tsx,antlers.html,vue,php,css}`

    ## Troubleshooting
    - Make sure a Node interpreter is selected under `Settings > Language & Frameworks > Node.js`
  14. @marcorieser marcorieser revised this gist Jan 11, 2023. 1 changed file with 4 additions and 1 deletion.
    5 changes: 4 additions & 1 deletion antlers, blade and tailwind formatter in PhpStorm.md
    View file
    Original file line number Diff line number Diff line change
    @@ -43,4 +43,7 @@ Create a `.prettierrc` file with the following content
    ## Register prettier as formatter
    Under `Settings > Languages & Frameworks > JavaScript > Prettier` register the following pattern for `Run for Files`:

    `{**/*,*}.{js,ts,jsx,tsx,antlers.html,vue,blade.php,css}`
    `{**/*,*}.{js,ts,jsx,tsx,antlers.html,vue,blade.php,css}`

    ## Troubleshooting
    - Make sure a Node interpreter is selected under `Settings > Language & Frameworks > Node.js`
  15. @marcorieser marcorieser revised this gist Dec 13, 2022. No changes.
  16. @marcorieser marcorieser revised this gist Dec 13, 2022. 1 changed file with 3 additions and 2 deletions.
    5 changes: 3 additions & 2 deletions antlers, blade and tailwind formatter in PhpStorm.md
    View file
    Original file line number Diff line number Diff line change
    @@ -41,5 +41,6 @@ Create a `.prettierrc` file with the following content
    }
    ```
    ## Register prettier as formatter
    Under `Settings > Languages & Frameworks > JavaScript > Prettier` register the following pattern for `Run for Files`.
    `{**/*,*}.{js,ts,jsx,tsx,antlers.html,blade.php,css}`
    Under `Settings > Languages & Frameworks > JavaScript > Prettier` register the following pattern for `Run for Files`:

    `{**/*,*}.{js,ts,jsx,tsx,antlers.html,vue,blade.php,css}`
  17. @marcorieser marcorieser revised this gist Aug 16, 2022. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion antlers, blade and tailwind formatter in PhpStorm.md
    View file
    Original file line number Diff line number Diff line change
    @@ -42,4 +42,4 @@ Create a `.prettierrc` file with the following content
    ```
    ## Register prettier as formatter
    Under `Settings > Languages & Frameworks > JavaScript > Prettier` register the following pattern for `Run for Files`.
    `{**/*,*}.{js,ts,jsx,tsx,antlers.html,blade.php}`
    `{**/*,*}.{js,ts,jsx,tsx,antlers.html,blade.php,css}`
  18. @marcorieser marcorieser revised this gist Jul 19, 2022. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion antlers, blade and tailwind formatter in PhpStorm.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    ## Install dependencies
    Run `npm install -D prettier prettier-plugin-antler prettier-plugin-blade prettier-plugin-tailwindcss` in your terminal
    Run `npm install -D prettier prettier-plugin-antlers prettier-plugin-blade prettier-plugin-tailwindcss` in your terminal

    ## Configure prettier
    Create a `.prettierrc` file with the following content
  19. @marcorieser marcorieser revised this gist Jul 19, 2022. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions antlers, blade and tailwind formatter in PhpStorm.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    ## Install dependencies
    Run `npm install -D prettier prettier-plugin-antler prettier-plugin-blade-stillat prettier-plugin-tailwindcss` in your terminal
    Run `npm install -D prettier prettier-plugin-antler prettier-plugin-blade prettier-plugin-tailwindcss` in your terminal

    ## Configure prettier
    Create a `.prettierrc` file with the following content
    @@ -12,7 +12,7 @@ Create a `.prettierrc` file with the following content
    "endOfLine": "lf",
    "plugins": [
    "./node_modules/prettier-plugin-antlers/",
    "./node_modules/prettier-plugin-blade-stillat/"
    "./node_modules/prettier-plugin-blade/"
    ],
    "overrides": [
    {
  20. @marcorieser marcorieser revised this gist Jul 18, 2022. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion antlers, blade and tailwind formatter in PhpStorm.md
    View file
    Original file line number Diff line number Diff line change
    @@ -42,4 +42,4 @@ Create a `.prettierrc` file with the following content
    ```
    ## Register prettier as formatter
    Under `Settings > Languages & Frameworks > JavaScript > Prettier` register the following pattern for `Run for Files`.
    `{**/*,*}.{js,ts,jsx,tsx,antlers.html,blade.php}z
    `{**/*,*}.{js,ts,jsx,tsx,antlers.html,blade.php}`
  21. @marcorieser marcorieser revised this gist Jul 18, 2022. 3 changed files with 10 additions and 2 deletions.
    10 changes: 10 additions & 0 deletions .prettierrc → ...ade and tailwind formatter in PhpStorm.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,9 @@
    ## Install dependencies
    Run `npm install -D prettier prettier-plugin-antler prettier-plugin-blade-stillat prettier-plugin-tailwindcss` in your terminal

    ## Configure prettier
    Create a `.prettierrc` file with the following content
    ```js
    {
    "singleQuote": true,
    "trailingComma": "all",
    @@ -33,3 +39,7 @@
    }
    ]
    }
    ```
    ## Register prettier as formatter
    Under `Settings > Languages & Frameworks > JavaScript > Prettier` register the following pattern for `Run for Files`.
    `{**/*,*}.{js,ts,jsx,tsx,antlers.html,blade.php}z
    1 change: 0 additions & 1 deletion settings > Languages & Frameworks > JavaScript > Prettier > Run for Files:
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +0,0 @@
    {**/*,*}.{js,ts,jsx,tsx,antlers.html,blade.php}
    1 change: 0 additions & 1 deletion terminal.bash
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +0,0 @@
    npm install -D prettier prettier-plugin-antler prettier-plugin-blade-stillat prettier-plugin-tailwindcss
  22. @marcorieser marcorieser created this gist Jul 18, 2022.
    35 changes: 35 additions & 0 deletions .prettierrc
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,35 @@
    {
    "singleQuote": true,
    "trailingComma": "all",
    "printWidth": 140,
    "tabWidth": 2,
    "endOfLine": "lf",
    "plugins": [
    "./node_modules/prettier-plugin-antlers/",
    "./node_modules/prettier-plugin-blade-stillat/"
    ],
    "overrides": [
    {
    "files": "*.antlers.html",
    "options": {
    "parser": "antlers"
    }
    },
    {
    "files": "*.blade.php",
    "options": {
    "parser": "blade"
    }
    },
    {
    "files": [
    "**/*.css",
    "**/*.html",
    "**/*.php"
    ],
    "options": {
    "singleQuote": false
    }
    }
    ]
    }
    1 change: 1 addition & 0 deletions settings > Languages & Frameworks > JavaScript > Prettier > Run for Files:
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {**/*,*}.{js,ts,jsx,tsx,antlers.html,blade.php}
    1 change: 1 addition & 0 deletions terminal.bash
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    npm install -D prettier prettier-plugin-antler prettier-plugin-blade-stillat prettier-plugin-tailwindcss