[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"\u002Fblog\u002Fusing-prettier-format-php-in-vscode":3,"$fCG59DZfkYrIizWJzcZZqXEDoGFL0zfeTgETuwKi3NIo":529,"i-local-icon:calendar-days":533,"i-local-icon:tag":538,"i-local-icon:eye":540},{"id":4,"title":5,"body":6,"categories_slug":516,"comment_count":519,"date_published":520,"description":521,"extension":522,"meta":523,"navigation":524,"path":525,"seo":526,"stem":527,"__hash__":528},"content\u002Fblog\u002F17.using-prettier-format-php-in-vscode.md","Using Prettier to format PHP code in VS Code",{"type":7,"value":8,"toc":503},"minimark",[9,13,18,23,35,38,50,54,57,84,88,91,123,129,133,138,148,152,159,199,203,208,240,244,251,256,283,288,398,409,413,416,460,464,467,493,499],[10,11,5],"h1",{"id":12},"using-prettier-to-format-php-code-in-vs-code",[14,15],"meta-card",{":categories":16,":date":17},"categories_slug","date_published",[19,20,22],"h2",{"id":21},"overview","Overview",[24,25,26,34],"p",{},[27,28,33],"a",{":target":29,"href":30,"rel":31},"\\_blank","https:\u002F\u002Fprettier.io\u002F",[32],"nofollow","Prettier"," is an opinionated code formatter that enforces consistent code style by parsing your code and re-printing it with its own rules. It automatically handles line length, indentation, and formatting decisions, eliminating debates about code style in development teams.",[24,36,37],{},"By default, Prettier supports languages such as JavaScript, TypeScript, HTML, Vue, CSS, SCSS, JSON, Markdown, and many others. However, PHP is not included in the core supported languages.",[24,39,40,41,49],{},"Fortunately, the community has created ",[27,42,45],{":target":29,"href":43,"rel":44},"https:\u002F\u002Fgithub.com\u002Fprettier\u002Fplugin-php",[32],[46,47,48],"code",{},"@prettier\u002Fplugin-php",", a plugin that brings Prettier's formatting capabilities to PHP code. This plugin allows you to maintain consistent PHP code formatting across your projects using the same tool you use for other languages.",[19,51,53],{"id":52},"requirements","Requirements",[24,55,56],{},"Before starting, ensure you have:",[58,59,60,72],"ul",{},[61,62,63,71],"li",{},[27,64,67],{":target":29,"href":65,"rel":66},"https:\u002F\u002Fnodejs.org\u002Fen",[32],[68,69,70],"strong",{},"Node.js"," installed (version 14 or higher recommended)",[61,73,74,77,78,83],{},[68,75,76],{},"VS Code"," with the official ",[27,79,82],{":target":29,"href":80,"rel":81},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=esbenp.prettier-vscode",[32],"Prettier extension"," installed",[19,85,87],{"id":86},"installation","Installation",[24,89,90],{},"Install the required packages in your project directory:",[92,93,98],"pre",{"className":94,"code":95,"language":96,"meta":97,"style":97},"language-bash shiki shiki-themes github-dark","npm install --save-dev prettier @prettier\u002Fplugin-php\n","bash","",[46,99,100],{"__ignoreMap":97},[101,102,105,109,113,117,120],"span",{"class":103,"line":104},"line",1,[101,106,108],{"class":107},"svObZ","npm",[101,110,112],{"class":111},"sU2Wk"," install",[101,114,116],{"class":115},"sDLfK"," --save-dev",[101,118,119],{"class":111}," prettier",[101,121,122],{"class":111}," @prettier\u002Fplugin-php\n",[24,124,125,128],{},[68,126,127],{},"Note:"," The plugin requires PHP to be installed on your system as it uses PHP's built-in tokenizer for parsing.",[19,130,132],{"id":131},"vs-code-integration-setup","VS Code Integration Setup",[134,135,137],"h3",{"id":136},"step-1-install-prettier-extension","Step 1: Install Prettier Extension",[24,139,140,141,147],{},"Install the official ",[27,142,144],{":target":29,"href":80,"rel":143},[32],[68,145,146],{},"Prettier - Code formatter"," extension from the VS Code marketplace.",[134,149,151],{"id":150},"step-2-configure-document-selectors","Step 2: Configure Document Selectors",[24,153,154,155,158],{},"VS Code may not automatically recognize PHP files for Prettier formatting. Add PHP to your document selectors by updating your VS Code ",[46,156,157],{},"settings.json",":",[92,160,164],{"className":161,"code":162,"language":163,"meta":97,"style":97},"language-json shiki shiki-themes github-dark","{\n  \"prettier.documentSelectors\": [\n    \"**\u002F*.{js,jsx,ts,tsx,vue,html,css,scss,less,json,md,mdx,graphql,yaml,yml,php}\"\n  ]\n}\n","json",[46,165,166,172,181,187,193],{"__ignoreMap":97},[101,167,168],{"class":103,"line":104},[101,169,171],{"class":170},"s95oV","{\n",[101,173,175,178],{"class":103,"line":174},2,[101,176,177],{"class":115},"  \"prettier.documentSelectors\"",[101,179,180],{"class":170},": [\n",[101,182,184],{"class":103,"line":183},3,[101,185,186],{"class":111},"    \"**\u002F*.{js,jsx,ts,tsx,vue,html,css,scss,less,json,md,mdx,graphql,yaml,yml,php}\"\n",[101,188,190],{"class":103,"line":189},4,[101,191,192],{"class":170},"  ]\n",[101,194,196],{"class":103,"line":195},5,[101,197,198],{"class":170},"}\n",[134,200,202],{"id":201},"step-3-set-prettier-as-the-default-formatter-for-php-files","Step 3: Set Prettier as the default formatter for PHP files",[24,204,205,206,158],{},"Add Prettier as the default formatter for PHP in your VS Code ",[46,207,157],{},[92,209,211],{"className":161,"code":210,"language":163,"meta":97,"style":97},"  \"[php]\": {\n    \"editor.defaultFormatter\": \"esbenp.prettier-vscode\",\n  }\n",[46,212,213,221,235],{"__ignoreMap":97},[101,214,215,218],{"class":103,"line":104},[101,216,217],{"class":111},"  \"[php]\"",[101,219,220],{"class":170},": {\n",[101,222,223,226,229,232],{"class":103,"line":174},[101,224,225],{"class":115},"    \"editor.defaultFormatter\"",[101,227,228],{"class":170},": ",[101,230,231],{"class":111},"\"esbenp.prettier-vscode\"",[101,233,234],{"class":170},",\n",[101,236,237],{"class":103,"line":183},[101,238,239],{"class":170},"  }\n",[134,241,243],{"id":242},"step-4-create-prettier-configuration","Step 4: Create Prettier Configuration",[24,245,246,247,250],{},"Create a ",[46,248,249],{},".prettierrc"," file in your project root directory:",[24,252,253],{},[68,254,255],{},"Basic Configuration:",[92,257,259],{"className":161,"code":258,"language":163,"meta":97,"style":97},"{\n  \"plugins\": [\"@prettier\u002Fplugin-php\"]\n}\n",[46,260,261,265,279],{"__ignoreMap":97},[101,262,263],{"class":103,"line":104},[101,264,171],{"class":170},[101,266,267,270,273,276],{"class":103,"line":174},[101,268,269],{"class":115},"  \"plugins\"",[101,271,272],{"class":170},": [",[101,274,275],{"class":111},"\"@prettier\u002Fplugin-php\"",[101,277,278],{"class":170},"]\n",[101,280,281],{"class":103,"line":183},[101,282,198],{"class":170},[24,284,285],{},[68,286,287],{},"Advanced Configuration:",[92,289,291],{"className":161,"code":290,"language":163,"meta":97,"style":97},"{\n  \"plugins\": [\"@prettier\u002Fplugin-php\"],\n  \"phpVersion\": \"8.2\",\n  \"printWidth\": 100,\n  \"tabWidth\": 4,\n  \"useTabs\": false,\n  \"singleQuote\": true,\n  \"trailingCommaPHP\": true,\n  \"braceStyle\": \"per-cs\"\n}\n",[46,292,293,297,308,320,332,344,357,370,382,393],{"__ignoreMap":97},[101,294,295],{"class":103,"line":104},[101,296,171],{"class":170},[101,298,299,301,303,305],{"class":103,"line":174},[101,300,269],{"class":115},[101,302,272],{"class":170},[101,304,275],{"class":111},[101,306,307],{"class":170},"],\n",[101,309,310,313,315,318],{"class":103,"line":183},[101,311,312],{"class":115},"  \"phpVersion\"",[101,314,228],{"class":170},[101,316,317],{"class":111},"\"8.2\"",[101,319,234],{"class":170},[101,321,322,325,327,330],{"class":103,"line":189},[101,323,324],{"class":115},"  \"printWidth\"",[101,326,228],{"class":170},[101,328,329],{"class":115},"100",[101,331,234],{"class":170},[101,333,334,337,339,342],{"class":103,"line":195},[101,335,336],{"class":115},"  \"tabWidth\"",[101,338,228],{"class":170},[101,340,341],{"class":115},"4",[101,343,234],{"class":170},[101,345,347,350,352,355],{"class":103,"line":346},6,[101,348,349],{"class":115},"  \"useTabs\"",[101,351,228],{"class":170},[101,353,354],{"class":115},"false",[101,356,234],{"class":170},[101,358,360,363,365,368],{"class":103,"line":359},7,[101,361,362],{"class":115},"  \"singleQuote\"",[101,364,228],{"class":170},[101,366,367],{"class":115},"true",[101,369,234],{"class":170},[101,371,373,376,378,380],{"class":103,"line":372},8,[101,374,375],{"class":115},"  \"trailingCommaPHP\"",[101,377,228],{"class":170},[101,379,367],{"class":115},[101,381,234],{"class":170},[101,383,385,388,390],{"class":103,"line":384},9,[101,386,387],{"class":115},"  \"braceStyle\"",[101,389,228],{"class":170},[101,391,392],{"class":111},"\"per-cs\"\n",[101,394,396],{"class":103,"line":395},10,[101,397,198],{"class":170},[24,399,400,402,403,408],{},[68,401,127],{}," All available config options can be found on their ",[27,404,407],{":target":29,"href":405,"rel":406},"https:\u002F\u002Fgithub.com\u002Fprettier\u002Fplugin-php?tab=readme-ov-file#configuration",[32],"GitHub page",".",[134,410,412],{"id":411},"step-5-format-on-save-options","Step 5: Format on Save options",[24,414,415],{},"Enable automatic formatting by adding to your VS Code settings:",[92,417,419],{"className":161,"code":418,"language":163,"meta":97,"style":97},"{\n  \"[php]\": {\n    \"editor.formatOnSave\": true,\n    \"editor.formatOnPaste\": true\n  }\n}\n",[46,420,421,425,431,442,452,456],{"__ignoreMap":97},[101,422,423],{"class":103,"line":104},[101,424,171],{"class":170},[101,426,427,429],{"class":103,"line":174},[101,428,217],{"class":115},[101,430,220],{"class":170},[101,432,433,436,438,440],{"class":103,"line":183},[101,434,435],{"class":115},"    \"editor.formatOnSave\"",[101,437,228],{"class":170},[101,439,367],{"class":115},[101,441,234],{"class":170},[101,443,444,447,449],{"class":103,"line":189},[101,445,446],{"class":115},"    \"editor.formatOnPaste\"",[101,448,228],{"class":170},[101,450,451],{"class":115},"true\n",[101,453,454],{"class":103,"line":195},[101,455,239],{"class":170},[101,457,458],{"class":103,"line":346},[101,459,198],{"class":170},[19,461,463],{"id":462},"conclusion","Conclusion",[24,465,466],{},"Using Prettier to format PHP code in VS Code provides several benefits:",[58,468,469,475,481,487],{},[61,470,471,474],{},[68,472,473],{},"Consistency"," across multiple languages in your project",[61,476,477,480],{},[68,478,479],{},"Team standardization"," with shared configuration",[61,482,483,486],{},[68,484,485],{},"Automated formatting"," reducing manual code style decisions",[61,488,489,492],{},[68,490,491],{},"Integration"," with existing Prettier workflows",[24,494,495,496,498],{},"The ",[46,497,48],{}," plugin makes it easy to extend your existing Prettier setup to include PHP files, maintaining the same formatting experience across your entire codebase.",[500,501,502],"style",{},"html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}",{"title":97,"searchDepth":174,"depth":174,"links":504},[505,506,507,508,515],{"id":21,"depth":174,"text":22},{"id":52,"depth":174,"text":53},{"id":86,"depth":174,"text":87},{"id":131,"depth":174,"text":132,"children":509},[510,511,512,513,514],{"id":136,"depth":183,"text":137},{"id":150,"depth":183,"text":151},{"id":201,"depth":183,"text":202},{"id":242,"depth":183,"text":243},{"id":411,"depth":183,"text":412},{"id":462,"depth":174,"text":463},[517,518],"development","php",null,"2025-06-20","Learn how to use Prettier to format PHP code in VS Code using the @prettier\u002Fplugin-php community plugin. Complete setup guide with configuration examples and troubleshooting tips.","md",{},true,"\u002Fblog\u002Fusing-prettier-format-php-in-vscode",{"title":5,"description":521},"blog\u002F17.using-prettier-format-php-in-vscode","xuc2nvpdO1CXWO0NWUOclWR-Sw1BqbW_YVQDrRufAdM",[530],{"id":531,"name":525,"count":532},31,4742,{"left":534,"top":534,"width":535,"height":535,"rotate":534,"vFlip":536,"hFlip":536,"body":537},0,24,false,"\u003Cpath\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    stroke-width=\"1.5\"\n    d=\"M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12zM12 15h.008v.008H12zm0 2.25h.008v.008H12zM9.75 15h.008v.008H9.75zm0 2.25h.008v.008H9.75zM7.5 15h.008v.008H7.5zm0 2.25h.008v.008H7.5zm6.75-4.5h.008v.008h-.008zm0 2.25h.008v.008h-.008zm0 2.25h.008v.008h-.008zm2.25-4.5h.008v.008H16.5zm0 2.25h.008v.008H16.5z\" \u002F>",{"left":534,"top":534,"width":535,"height":535,"rotate":534,"vFlip":536,"hFlip":536,"body":539},"\u003Cg\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    stroke-width=\"1.5\">\n    \u003Cpath\n      d=\"M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.1 18.1 0 0 0 5.224-5.223c.54-.827.368-1.908-.33-2.607l-9.583-9.58A2.25 2.25 0 0 0 9.568 3\" \u002F>\n    \u003Cpath d=\"M6 6h.008v.008H6z\" \u002F>\n  \u003C\u002Fg>",{"left":534,"top":534,"width":535,"height":535,"rotate":534,"vFlip":536,"hFlip":536,"body":541},"\u003Cg\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    stroke-width=\"1.5\">\n    \u003Cpath\n      d=\"M2.036 12.322a1 1 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178c.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178\" \u002F>\n    \u003Cpath d=\"M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0\" \u002F>\n  \u003C\u002Fg>"]