Rabu, 23 February 2022

Penggunaan Prettier untuk Laravel Blade: Panduan Coding Style

Anda tau, baru-baru ini tailwind telah merilis plugin prettier untuk tailwindcss. Tapi kali ini, kita akan dikenalkan plugin baru kusus untuk Anda yang suka bermain blade.

Laravel
Tool

Anda tau, baru-baru ini tailwind telah merilis plugin prettier untuk tailwindcss. Tapi kali ini, kita akan dikenalkan plugin baru kusus untuk Anda yang suka bermain blade. Apa lagi jika Anda sering bermasalah dengan blade component, maka plugin ini adalah jawabannya.

Instalasi

Untuk menggunakannya itu sangat mudah sekali. Install package nya terlebih dahulu seperti berikut.

Terminal
npm install --save-dev @shufo/prettier-plugin-blade prettier

# yarn
yarn add -D @shufo/prettier-plugin-blade prettier

# pnpm
pnpm add -D @shufo/prettier-plugin-blade prettier

Ketika Anda menggunakan tailwindcss, maka anda tentu bisa menambahkan plugin dari tailwindcss sekaligus yaitu: prettier-plugin-tailwindcss

Konfigurasi

Kemudian silakan masukkan konfigurasi berikut mau itu di .prettier ataupun prettier.json, yang penting di prettier config nya.

./.prettierrc
{
    "plugins": [
        "@shufo/prettier-plugin-blade"
    ],
    "overrides": [
        {
            "files": ["*.blade.php"],
            "options": {
                "parser": "blade",
                "tabWidth": 4
            }
        }
    ]
}

Running

Setelah itu, maka Anda bisa menjalankannya. Ada dua pilihan disini, bisa langsung jalankan directly tembak dari node_modulesnya, atau bisa dengan memasukkan ke scripts yang ada di package.json.

Dengan terminal

Terminal
./node_modules/.bin/prettier --write resources/**/*.blade.php

Atau bisa dengan perintah npx.

Terminal
npx prettier --write resources/**/*.blade.php

Dengan scripts

Silakan buka file package.json, dan masukkan line berikut tepat di dalam scripts seperti:

./package.json
"scripts": {
    // ...
    "format": "prettier --write resources/**/*.blade.php"
},

Dengan begitu, maka kita bisa menjalakan perintah:

Terminal
npm run format

# yarn
yarn format

Vscode Config

Oia, ini ada tips bagi Anda yang sedang menggunakan vscode sebagai editor textnya, Anda bisa buka settings.json, dan masukkan kode ini.

settings.json
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[blade]": {
    "editor.defaultFormatter": "shufo.vscode-blade-formatter"
},
"editor.formatOnPaste": true,

Anda juga bisa mengaktifkan format on save pada vscode, jadi Anda tidak perlu run berkali prettier nya dari command line.