Logo

dev-resources.site

for different kinds of informations.

Prettier for PHP File Formats in VSCode

Published at
3/18/2024
Categories
vscode
php
prettier
Author
ngobrolinit
Categories
3 categories in total
vscode
open
php
open
prettier
open
Author
11 person written this
ngobrolinit
open
Prettier for PHP File Formats in VSCode

Hello, dev 👋

If you are a programmer in the PHP language, of course, you want to make your coding look neat so that it is easy for other programmers to read. In VS Code there is an extension to automatically tidy up coding called Prettier.

But it turns out that by default Prettier does not support PHP formatting language. Although there is a PHP plugin for Prettier created by the community. You can just read the Use section on the GitHub page to see how to use the plugin together with Prettier to format the PHP language. In my opinion, this method is quite complicated because it would be easier if the formatting was executed when the PHP file was saved (formatOnSave).

PHP Intelephense

To format the PHP language, I suggest you use the VSCode extension called PHP Intelephense which was created by Ben Mewburn. Install the extension first.

After the extension is installed, you can go to File -> Preferences -> Settings, then look for "default formatter"

VSCode Default Formatter

Then change the Default Formatter to PHP Intelephense. Still in settings, look for "formatonsave" and then check Format On Save so that our PHP file is formatted automatically when saving the file.

Multiple Formatter

Now this becomes confusing when we also work in languages other than PHP, such as Javascript, Typescript, or other programming languages.

When we choose the Default Formatter to PHP Intelephense, this means that all files will be formatted using PHP Intelephense, while this extension only supports PHP. Then, how?

The solution is to use the settings.json configuration file in VSCode to set the PHP language using PHP Intelephense.

Now go to settings and change Default Formatter to Prettier. Why Prettier? Prettier itself supports quite a lot of languages such as JavaScript, TypeScript, JSX, Angular, Vue, CSS, HTML, JSON, GraphQL, and others.

Then you create settings.json using Ctrl + Shift + P then search for "open user settings". Select the (JSON) one. Then the settings.json file will open. So here add the following configuration:

"[php]": {
    "editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
}
Enter fullscreen mode Exit fullscreen mode

This means that all files with the .php extension will be formatted using the PHP Intelephense extension. Don’t forget to save the settings.json.

Good luck 🍻

prettier Article's
30 articles in total
Favicon
VSCode Prettier format on save
Favicon
Beyond Spellcheck: How Static Analysis Tools Enhance Collaboration in Coding
Favicon
Setup Eslint Prettier in a TypeScript project with mongoose ODM
Favicon
Vue3 + ESLint 9.13.0 + Prettier +TypeScript and VSCode Autoformat on Save
Favicon
Configurando Prettier, ESLint y Husky en Angular
Favicon
Setup Prettier Pada Nextjs Tailwind Project
Favicon
Regras customizáveis para Prettier + Eslint em React
Favicon
Useful VS Code Extensions for JS
Favicon
ESLint x Prettier: The Right Way To Start A JavaScript Project
Favicon
How to Set Up ESLint and Prettier in a TypeScript Project
Favicon
Customizable rules for Prettier + Eslint in React
Favicon
Tired of Messy Code?🥴
Favicon
Streamline Your Tailwind CSS Workflow with Prettier Plugin Enhancements
Favicon
Why Do I Love Code Formatters?
Favicon
How to set up Eslint and prettier
Favicon
Configure Eslint, Prettier and show eslint warning into running console vite react typescript project
Favicon
Building Vue3 Component Library from Scratch #11 ESlint + Prettier + Stylelint
Favicon
Setup Eslint + Prettier for code standardization in React
Favicon
Setup Eslint + Prettier para padronização de código em React
Favicon
How to prevent Prettier putting a full stop on a new line after a link
Favicon
Moving "server-only" to the top of the imports
Favicon
My opinion about opinionated Prettier: 👎
Favicon
Setting Up Express development environment (Typescript, Eslint, Prettier)
Favicon
Biome.js : Prettier+ESLint killer ?
Favicon
Most elemental code formatting for Typescript/Javascript: .editorconfig vs prettier
Favicon
Setup Next.js 14 project with Eslint + Prettier + Tailwind CSS
Favicon
Prettier for PHP File Formats in VSCode
Favicon
Angular 14 + Prettier + Husky Setup
Favicon
แชร์ไฟล์ Prettier ง่ายๆ แค่ปลายนิ้ว!
Favicon
NextJS 14'te Kod Kalitesini Artırma: ESLint, Prettier ve Husky Kullanımı

Featured ones: