Saya mengembangkan formatter C, C++, Java, dan JavaScript berbasis Clang untuk lingkungan Node.js.
(github.com/lumirlumir)- Repositori GitHub: https://github.com/lumirlumir/npm-clang-format-node
- Situs dokumentasi resmi: https://clang-format-node.lumir.page/
Halo!
Saya telah mengembangkan formatter C, C++, Java, dan JavaScript yang memanfaatkan Clang di lingkungan Node.js. Proyek ini merupakan inisiatif baru yang dimulai berdasarkan paket clang-format milik Angular yang sudah tidak lagi dipelihara.
Saya sempat membagikan hal serupa dua atau tiga bulan lalu, dan kali ini saya merilis versi v1.3.0 serta menambahkan situs dokumentasi yang rinci agar pengguna dapat memakainya dengan lebih mudah dan nyaman. Situs dokumentasinya bisa dilihat di sini, dan memuat berbagai hal mulai dari cara instalasi dasar hingga alasan mengapa paket ini layak digunakan, jadi semoga bermanfaat bagi yang tertarik.
Pada pembaruan kali ini, saya menambahkan berbagai pengujian untuk makin meningkatkan stabilitas paket, sekaligus menambahkan fitur-fitur baru.
Paket ini seluruhnya berlisensi MIT dan dapat digunakan dengan bebas.
Proyek seperti apa clang-format-node itu?
Paket ini adalah paket Node.js berbasis clang-format dari Clang, kompiler C milik LLVM yang terkenal, dan mendukung pemformatan kode untuk bahasa C, C++, dan Java. Singkatnya, di lingkungan Node.js paket ini berperan mirip Prettier, tetapi dibedakan oleh dukungannya terhadap pemformatan C, C++, dan Java yang tidak didukung oleh Prettier.
Secara khusus, clang-format-node berguna saat Anda perlu menulis kode JavaScript dan kode C/C++ secara bersamaan, seperti dalam pengembangan core Node.js atau Electron.
Paket clang-format yang lama memiliki kerepotan karena perlu memasang dependensi tambahan yang bergantung pada lingkungan sistem operasi seperti Ubuntu, tetapi dengan paket ini Anda bisa langsung menggunakannya tanpa instalasi terpisah. Selain itu, paket lama cenderung sulit diintegrasikan ke dalam workflow berbasis Node.js dan npm di lingkungan CI, sedangkan clang-format-node dapat digunakan dengan mudah hanya dengan menginstalnya dari npm dan mengatur skrip, sehingga memberi banyak keuntungan di lingkungan CI.
Lalu, apa saja karakteristik paket clang-format-node?
1. Drop-in Replacement untuk menggantikan clang-format milik Angular
clang-format-node adalah Drop-in Replacement yang dapat menggantikan paket Angular/clang-format dengan mudah.
Peralihan dari paket lama ke clang-format-node sangat sederhana dan bisa langsung dilakukan tanpa proses yang rumit.
2. Cukup Node.js saja, tanpa dependensi tambahan untuk menggunakan Clang
Tidak memerlukan dependensi tambahan seperti Python atau C++. Cukup dengan Node.js, paket ini bisa dijalankan dengan mudah.
3. Cakupan dukungan yang luas
Mendukung berbagai sistem operasi dan arsitektur, versi Node.js, image runner GitHub Actions, image build Docker, dan banyak lagi secara luas.
4. Pengaturan CI yang mudah
Tanpa konfigurasi yang rumit, Anda bisa menggunakan clang-format-node sama seperti paket Node.js lainnya.
5. Build dan rilis otomatis
Setiap kali ada pembaruan pada clang-format, versi npm yang baru akan dirilis secara otomatis. GitHub Actions secara berkala mendeteksi pembaruan, membangun paket, lalu membuat Pull Request.
Memformat kode dengan clang-format dan git-clang-format
(Tulisan di bawah ini adalah sebagian terjemahan ke bahasa Korea dari artikel berbahasa Inggris yang saya tulis di bagian https://clang-format-node.lumir.page/docs/get-started/introduction.)
Pentingnya pemformatan kode
Selalu format kode Anda
Pemformatan kode adalah pekerjaan yang sangat penting untuk meningkatkan kualitas kode. Inti dari pemformatan adalah menjaga konsistensi format kode agar keterbacaan dan kemudahan pemahaman meningkat.
Apa itu clang-format?
clang-format adalah alat yang secara otomatis memformat file sumber untuk bahasa seperti C dan C++, dan dikembangkan sebagai bagian dari proyek open source LLVM Clang.
Cara kerjanya
- Membuat file konfigurasi
Buat file konfigurasi (.clang-format) yang mendefinisikan gaya pemformatan. - Menjalankan perintah
Saat Anda menjalankan perintahclang-format, kode sumber akan secara otomatis disusun ulang sesuai aturan gaya tersebut.
Fitur utama
- Mendukung berbagai bahasa
Mendukung beragam bahasa seperti C, C++, Java, JavaScript, Objective-C, Protobuf, dan C#. - Contoh perintah pemformatan
Jika perintah di atas dijalankan, fileclang-format -i my_source.cppmy_source.cppakan otomatis diformat sesuai gaya yang telah ditentukan.
Contoh pemformatan kode
// Before formatting
void test(QString&data, bool extraString) {
int i=0;
for (i=0;i<3;i++) {
data+="reallylongstringtoproducealonglineasanexample" + QString::number(i * 1000) + "/filetoload.html";
if (extraString)
{
data += "some-extra";
}
}
}
// After formatting
void test(QString &data, bool extraString)
{
int i = 0;
for (i = 0; i < 3; i++) {
data += "reallylongstringtoproducealonglineasanexample" + QString::number(i * 1000)
+ "/filetoload.html";
if (extraString) {
data += "some-extra";
}
}
}
Contoh di atas menunjukkan bagaimana clang-format memformat kode. Aturan pemformatan dapat diatur dengan bebas sesuai gaya tim.
Kekurangan clang-format
clang-format adalah alat yang sangat baik, tetapi dapat menimbulkan masalah pada kode yang sudah ada dan riwayat commit.
Masalah utama
- Benturan dengan kode yang sudah ada
Jika seluruh file diformat, bagian yang tidak berkaitan dengan pemformatan pun ikut berubah sehingga menghasilkan perubahan yang tidak perlu. - Riwayat commit menjadi membingungkan
Perubahan pemformatan berskala besar dapat membuat riwayat commit menjadi rumit, sehingga menyulitkan merge branch, code review, dan analisis kode. - Ketidaksesuaian antara kode baru dan kode lama
Saat menambahkan kode baru ke kode yang sudah diformat, menjaga konsistensi format bisa menjadi sulit.
Solusi: git-clang-format
git-clang-format adalah alat ekstensi Git yang membantu menerapkan pemformatan hanya pada kode yang berubah. Dengan memakainya, Anda mendapatkan keuntungan berikut.
- Meminimalkan cakupan pemformatan: hanya menerapkan format pada kode yang berubah
- Menyederhanakan review: perubahan format dan perubahan pengembangan dapat ditinjau secara terpisah
Cara menggunakan git-clang-format
Instalasi
git-clang-format disertakan bersama paket clang-format-node. Anda dapat menginstalnya dan menggunakannya melalui paket npm clang-format-git.
Workflow dasar
- Tulis kode.
- Tambahkan perubahan ke staging (
git add). - Jalankan
git-clang-format.
Contoh
# Menambahkan file baru dan men-stage perubahan
$ git diff --staged
diff --git a/x.cpp b/x.cpp
new file mode 100644
index 0000000..af14ed5
--- /dev/null
+++ b/x.cpp
@@ -0,0 +1,3 @@
+int main() {
+
+}
# Menjalankan git-clang-format
$ git-clang-format
changed files:
x.cpp
# Memeriksa status setelah pemformatan
$ git status
On branch master
Changes to be committed:
new file: x.cpp
Changes not staged for commit:
modified: x.cpp
Melalui workflow ini, perubahan format dan perubahan pengembangan dapat ditinjau secara independen. Jika Anda tidak menyukai perubahan formatnya, Anda juga bisa mengembalikannya dengan git checkout.
Menentukan gaya
Anda dapat mengatur gaya pemformatan menggunakan opsi --style.
$ git-clang-format --style=WebKit
$ git-clang-format --style=file # menggunakan file `.clang-format`
Kesimpulan
clang-format adalah alat yang kuat, tetapi dalam praktik kerja nyata sering kali perintah clang-format -i saja tidak cukup. Dengan menggunakan git-clang-format, yang menerapkan pemformatan hanya pada bagian yang berubah, Anda dapat mengelola kode secara efisien dan menyederhanakan proses review.
Karena git-clang-format hanya memformat perubahan, alat ini membantu menjaga codebase tetap rapi dan profesional sambil tetap menyediakan lingkungan pengembangan yang fleksibel. Saat memformat commit kerja atau seluruh branch, Anda cukup menambahkan beberapa perintah Git untuk menyelesaikan masalah pemformatan dengan mudah.
Terima kasih sudah membaca tulisan yang panjang ini! Semoga semua pembaca GeekNews mendapatkan tahun baru yang bahagia🙇♂️
- Repositori GitHub: https://github.com/lumirlumir/npm-clang-format-node
- Situs dokumentasi resmi: https://clang-format-node.lumir.page/
2 komentar
Saya kasih jempol dan pamit lewat.
Terima kasih!!