Tools ini Akan Membuat Code Anda Seperti Ditulis oleh Engineer Google dan Facebook

Photo by Stillness InMotion on Unsplash

Pasang Prettier di proyek-proyek Anda seperti Google dan Facebook sekarang juga!

Anda tim single quote atau double quote? Bracket spacing atau no bracket spacing? LF atau CRLF?

Berbicara tentang coding style, dimanakah tim Anda sekarang? Tidak punya style guide? Punya style guide sendiri berbentuk tulisan atau dokumentasi? Atau sudah memaksa seluruh tim untuk menggunakan style guide melalui tools secara otomatis?

Jika Anda dan tim di state pertama dan kedua, artikel ini akan membantu Anda menuju state terakhir dengan mengunakan Prettier. Jika Anda di state terakhir, artikel ini mungkin bisa menunjukan apa yang terlewat, atau mengingatkan kembali betapa pentingnya hal ini.

Apa itu Prettier?

Prettier adalah code formatter, that’s all. Lalu kenapa code formatter itu begitu penting?

• Mengurangi perdebatan tentang coding style

Mau pakai single quote atau double quote? Tulis saja dulu, biar Prettier yang format nanti.

• Membuat coding style konsisten

Tidak peduli seberapa besar codebasenya, berapa banyak dan berapa kali ganti developernya, coding style akan tetap sama.

• Membantu pendatang baru

Fresh graduate atau anak magang masuk tim Anda? Mau push ke production di hari pertama? Ya, setidaknya Anda tinggal review hal lain selain format code.

• Merapikan existing codebase

Prettier bisa dijalankan melalui command line. Oleh karena itu, cukup jalankan prettier sekali pada existing codebase, maka seluruh code Anda akan rapi.

Source Code Apa Saja yang Didukung Prettier?

Prettier mendukung banyak bahasa, berikut adalah daftar bahasa yang didukung:

• JavaScript (including experimental features)
• JSX
• Angular
• Vue
• Flow
• TypeScript
• CSS, Less, and SCSS
• HTML
• JSON
• GraphQL
• Markdown, including GFM and MDX
• YAML

Integrasi Prettier dengan Editor

Berikut adalah editor yang dapat diintegrasikan dengan Prettier.

• Visual Studio Code
• Emacs
• Vim
• Sublime Text
• JetBrains WebStorm, PHPStorm, PyCharm
• Visual Studio
• Atom
• Espresso

Anda bisa menuju ke dokumentasi Prettier untuk mempelajari lebih lanjut.

Kapan Harus Menggunakan Prettier?

Lakukan sekarang! Jadi Anda bisa menghemat enegi dan fokus ke hal yang lebih penting.

Bagaimana Cara Menggunakan Prettier?

Pasanglah Prettier secara lokal didalam setiap project, sehingga tim Anda tidak perlu lagi memasangnya secara global. Hal ini juga diperlukan agar semua contributor menggunakan versi Prettier yang sama.

npm install — save-dev — save-exact prettier
yarn add — dev — exact prettier

Buat Prettier config file supaya editor dan tim Anda tahu bahwa project menggunakan Prettier.

touch .prettierrc.json

Buat .prettierignore file, gunanya untuk memberi tahu Prettier bagian mana saja yang tidak ingin diformat. prettierignore file menggunakan sintaks gitignore.

touch .prettierignore

Misalnya Anda tidak ingin memformat direktori build dan coverage.

# Ignore artifacts:
build
coverage

Untuk melakukan format cukup menjalankan

prettier --write .

Anda juga bisa menggunakan .gitignore file sebagai .prettierignore file dengan cara dibawah ini.

prettier --write . — ignore-path .gitignore

Untuk melakukan pengecekan apakah project sudah diformat oleh Prettier, Anda bisa menjalankan command berikut.

prettier --check .

Pengecekan biasanya dijalankan pada pipeline continuous integration.

Anda juga bisa melakukan format secara otomatis sebelum Anda melakukan git commit. Detailnya bisa Anda baca di dokumentasi Prettier.

Contoh lain penggunaan Prettier bisa dilihat pada project open source dari Hyperjump, yaitu Monika. Monika adalah aplikasi command line untuk synthetic monitoring. Untuk mengenal lebih jauh apa itu synthetic monitoring, silahkan baca artikel yang menarik dan mencerahkan dari Pak Ariya Hidayat disini. Anda juga dapat membuat issue, pull request, atau sekadar berdiskusi pada repositori Monika.

Jadi, tunggu apalagi? Share tulisan ini, install Prettier sekarang, dan push ke production hari ini! Mari Kita tingkatkan kualitas code yang ditulis oleh anak bangsa. Semangat!

Lain kali Saya akan bahas bagaimana menggunakan ESLint dan kegunaannya sebagai lanjutan artikel ini.

Hyperjump Update!

We just launched our free and open source synthetic monitoring tool called Monika on Product Hunt! Your review and upvote are greatly appreciated! 🤝

Hyperjump is an open-source-first company providing engineering excellence service. We aim to build and commercialize open-source tools to help companies streamline, simplify, and secure the most important aspects of their modern DevOps practices.