Imam Fahrur Rofi

Pengaturan Ekstensi Visual Studio Code Agar Ngoding PHP Lebih Rapi

Ilustrasi Ekstensi Visual Studio Code

Penulisan kode agar lebih rapi tidak dinilai oleh masing-masing programmer, melainkan dinilai oleh standar gaya pengkodean yang telah ditentukan oleh komunitas. Dalam bahasa pemrograman PHP terdapat beberapa standar gaya pengkodean (coding style standard), namun dalam artikel ini hanya membahas standar gaya pengkodean PSR-2 dan cara penggunaannya dalam editor Visual Studio Code.

Penggunaan coding style standard sangat dianjurkan dalam menulis kode terutama jika kita bekerja dalam tim, hal ini dikarenakan kode lebih mudah dipelihara dan mudah dibaca oleh anggota tim lain sehingga memudahkan kita bekerja dalam tim. Namun, coding style standard cukup beragam di dunia pemrograman sesuai masing-masing bahasa pemrograman. Pada PHP, PSR-2 menjadi standar gaya pengkodean yang sering digunakan dan diperluas oleh komunitas programmer PHP.

Jika anda ingin langsung ke bagian pengaturan ekstensi Visual Studio Code, langsung ke bagian VSCodeExtension

Panduan Coding Style Standard PSR-2

Aturan coding style standard PSR-2 adalah sebagai berikut:

  • File PHP hanya boleh diawali oleh kode <?php atau <?=
  • File PHP ditulis menggunakan pengkodean karakter (character encoding) UTF-8
  • Penamaan kelas harus mengikuti aturan UpperCamelCase
    contoh :
    class IniSebuahKelas
    {
        // isi dari kelas
    }
  • Penamaan variabel konstan di dalam kelas harus mengikuti aturan UPPER_SNAKE_CASE
    contoh :
    class IniSebuahKelas
    {
        const HELLO_WORLD = "Hello World";
    }
  • Penamaan property dan method (fungsi di dalam kelas) harus mengikuti aturan camelCase
    contoh :
    class IniSebuahKelas
    {
        // Properties
        public $name;
        public $color;
    
        // Methods
        function set_name($name) {
          $this->name = $name;
        }
        function get_name() {
          return $this->name;
        }
    }
  • Menggunakan 4 spasi untuk indent, tidak diperbolehkan menggunakan tab. 
    Hal ini cukup merepotkan jika menggunakan text editor biasa, namun jika kita gunakan Visual Studo Code maka aturan ini cukup mudah diimplementasikan
  • Panjang kode perbaris sebisa mungkin di bawah 120 karakter dan lebih baik lagi jika di bawah 80 karakter. Jika lebih dari 120 karakter sebaiknya cari cara agar kode bisa dibagi menjadi 2 baris
  • Setelah nama kelas dan method, kurung kurawal  berada di baris baru.
  • Di dalam method ataupun fungsi, pembuka kurung kurawal  tidak perlu berada dibaris baru, contoh kasus if .. elseif .. else
  • Pada kondisional if .. elseif .. else, penulisan pernyataan harus diberi jarak 1 spasi sebelum  dan sesudah  ) , namun tidak boleh ada spasi setelah  dan sebelum  
    contoh :
    // contoh penulisan kode yang benar
    if (condition) {
      // kode yang akan dijalankan jika kondisi bernilai true;
    }
    
    // contoh penulisan kode yang salah
    if(condition){
    // kode yang akan dijalankan jika kondisi bernilai true;
    }
  • Mendefinisikan kelas dengan extends dan implements harus ditulis di satu baris yang sama dengan nama kelas, jika banyak interface yang diimplements, maka tulis sebuah nama interface per barisnya,
    contoh :
    class ClassName extends ParentClassName implements Interface1, Interface2
    {
        // Class definition
    }
    
    class ClassName2 extends ParentClassName implements
        Interface1,
        Interface2,
        Interface3,
        Interface4
    {
        // Class definition
    }
    
  • Jika method atau fungsi memiliki argument yang banyak, maka masing-masing argument harus di pisahkan oleh tanda koma (,) dan satu spasi setelahnya. Jika argument terlalu banyak maka setiap argument ditulis perbaris
    contoh :
    function doSomething($arg1, $arg2, $arg3)
    {
        // ...
    }
    
    function doSomething2(
        $arg1,
        $arg2,
        $arg3
      ){
        // ...
    }
    
  • Setiap variabel yang didefinisikan harus digunakan.

Perbedaan elseif dan else if

Kenyataannya kondisional elseif dan else if hanya memiliki perbedaan spasi, ketika dijalankan pun keduanya menghasilkan output yang sama. Namun keduanya memiliki makna yang berbeda, mudahnya langsung contoh saja ya :

// penggunaan if .. else if .. else 
if ($condition1) {
    // ...
} else if ($condition2) {
    // ...
} else {
    // ...
}

// kode di atas diinterpretasikan sebagai berikut :
if ($condition1) {
    // ...
} else {
    if ($condition2) {
        // ...
    } else {
        // ...
    }
}

// sedangkan if .. elseif .. else interpretasinya sesuai kode
if ($condition1) {
    // ...
} elseif ($condition2) {
    // ...
} else {
    // ...
}

Ekstensi Visual Studio Code Yang Mendukung Coding Style Standard

1. PHP Intelephense

PHP Intelephense adalah ekstensi yang berguna untuk membantu produktivitas programmer PHP dengan banyak fitur yang ditawarkan, seperti code completion and suggestion, cek definisi syntax berdasarkan sumber resmi website PHP, menampilkan masalah jika pengkodean tidak sesuai format PSR-12 dan beberapa fitur lainnya.

Setelah instalasi PHP Intelephense di Visual Studio Code, pengaturan yang perlu diubah hanyalah bagian Intelephense › Environment: PHP Version, isi sesuai versi PHP yang terinstal pada komputer anda.

Instal PHP Intelephense di tautan berikut : https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client

2. Error Lens

Error Lens adalah ekstensi yang berfungsi menampilkan problem atau error langsung pada editor VSCode. 

Tidak ada pengaturan khusus setelah ekstensi ini diinstal, berikut tautan ekstensi ini : https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens

3. PHP CS Fixer

PHP CS Fixer berfungsi untuk memperbaiki kode PHP yang tidak sesuai dengan coding style standard. Ekstensi PHP CS Fixer membutuhkan pengaturan khusus untuk bisa digunakan dengan baik.

Ekstensi VS Code PHP CS Fixer bekerja dengan menggunakan library  friendsofphp/php-cs-fixer , oleh karena itu kita perlu menginstall terlebih dahulu library tersebut melalui composer. Caranya:

  1. Jika di dalam root folder project anda belum ada file composer.json, maka buka terminal pada root folder project, kemudian jalankan perintah berikut di dalam terminal tersebut:
    composer init
  2. Jika telah ada composer.json, maka lanjutkan instalasi library friendsofphp/php-cs-fixer dengan menjalankan perintah berikut di terminal: 
    composer require friendsofphp/php-cs-fixer

Instal ekstensi PHP CS Fixer Visual Studio Code di tautan berikut ini : https://marketplace.visualstudio.com/items?itemName=junstyle.php-cs-fixer

Selanjutnya atur pengaturan ekstensi PHP CS Fixer adalah sebagai berikut :

  1. Buka settings di dalam VSCode, caranya klik File > preferences > Settings
  2. Masukkan keyword PHP CS Fixer di dalam kolom pencarian
  3. Scroll untuk mencari PHP-cs-fixer: Config, kosongkan kolomnya
  4. Cari PHP-cs-fixer: Executable Path,
    isi dengan  ${extensionPath}/php-cs-fixer.phar 
  5. Cari juga PHP-cs-fixer: Onsave, centang agar PHP CS Fixer memperbaiki kode setiap kali file PHP disimpan
  6. Buat file  .php_cs  di root folder project, masukkan kode berikut :
<?php

use PhpCsFixer\Config;
use PhpCsFixer\Finder;

$rules = [
    '@PSR2' => true,
    'array_syntax' => ['syntax' => 'short'],
    'ordered_imports' => ['sortAlgorithm' => 'alpha'],
    'no_unused_imports' => true,
    'not_operator_with_successor_space' => true,
    'trailing_comma_in_multiline_array' => true,
    'phpdoc_scalar' => true,
    'unary_operator_spaces' => true,
    'binary_operator_spaces' => true,
    'blank_line_before_statement' => [
        'statements' => ['break', 'continue', 'declare', 'return', 'throw', 'try'],
    ],
    'phpdoc_single_line_var_spacing' => true,
    'phpdoc_var_without_name' => true,
    'method_argument_space' => [
        'on_multiline' => 'ensure_fully_multiline',
        'keep_multiple_spaces_after_comma' => true,
    ]
];

$project_path = getcwd();
$finder = Finder::create()
    ->notPath('vendor/*')
    ->in([
        $project_path.'/*',
    ])
    ->name('*.php')
    ->notName('*.blade.php')
    ->ignoreDotFiles(true)
    ->ignoreVCS(true);

$config = new Config();
return $config->setRules($rules)->setFinder($finder);

Kode di atas untuk pengaturan PHP CS Fixer pada project PHP secara umum, anda bisa memodifikasi bagian notPath dan in menyesuikan dengan framework yang anda gunakan.

Sebagai contoh untuk pengaturan pada project Laravel adalah sebagai berikut :

<?php

use PhpCsFixer\Config;
use PhpCsFixer\Finder;

$rules = [
    '@PSR2' => true,
    'array_syntax' => ['syntax' => 'short'],
    'ordered_imports' => ['sortAlgorithm' => 'alpha'],
    'no_unused_imports' => true,
    'not_operator_with_successor_space' => true,
    'trailing_comma_in_multiline_array' => true,
    'phpdoc_scalar' => true,
    'unary_operator_spaces' => true,
    'binary_operator_spaces' => true,
    'blank_line_before_statement' => [
        'statements' => ['break', 'continue', 'declare', 'return', 'throw', 'try'],
    ],
    'phpdoc_single_line_var_spacing' => true,
    'phpdoc_var_without_name' => true,
    'method_argument_space' => [
        'on_multiline' => 'ensure_fully_multiline',
        'keep_multiple_spaces_after_comma' => true,
    ]
];

$project_path = getcwd();
$finder = Finder::create()
    ->notPath('bootstrap/*')
    ->notPath('storage/*')
    ->notPath('vendor/*')
    ->notPath('resources/view/mail/*')
    ->in([
        $project_path.'/app',
        $project_path.'/config',
        $project_path.'/resources',
        $project_path.'/routes',
    ])
    ->name('*.php')
    ->notName('*.blade.php')
    ->ignoreDotFiles(true)
    ->ignoreVCS(true);

$config = new Config();
return $config->setRules($rules)->setFinder($finder);

Setelah pengaturan dibuat, maka setiap kali kita menyimpan file PHP di folder kerja yang berisi .php_cs secara otomatis akan diformat sesuai coding style standard PSR-12.

Sekian artikel mengenai pengaturan ekstensi Visual Studio Code agar ngoding PHP lebih rapi mengikuti coding style standard, semoga bermanfaat.

Disadur dari artikel PSR-12: Extended Coding Style - PHP-FIG (php-fig.org)


Pengaturan
Mode
Warna
Search panel