Prettier for Blade

    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.

    Irsyad A. Panjaitan

    2 min read·23 Feb 2022

    Prettier for Blade

    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.

    Karteil
    Destinasi Utama Belajar Online dengan Format Tulisan yang Elegan
    Kunjungi Sekarang

    Irsyad A. Panjaitan

    Let's start living like no one can help us in any event, so that when we are helped in certain times, it becomes a plus in itself.

    Follow me on
    Support me
    SaweriaGithub

    Newsletter

    Bergabunglah dengan 23.000+ lainnya dan jangan pernah ketinggalan screencast, tips, tutorial, dan lainnya.