Cara Mengatur Lebih Cantik di Visual Studio Code

Menulis kode yang bersih dan mudah dibaca sangat penting, baik Anda bekerja sendiri atau dengan tim pengembang. Meskipun banyak faktor yang berkontribusi terhadap keterbacaan kode, salah satu yang terpenting adalah pemformatan kode yang konsisten.

Tapi inilah masalahnya: pemformatan kode manual bisa sangat menyusahkan dan sangat rentan terhadap kesalahan. Alat seperti Prettier membuat pemformatan HTML, CSS, JavaScript, dan bahasa lainnya, jauh lebih mudah. Temukan cara menginstal dan menggunakan ekstensi Prettier untuk pemformatan kode, serta beberapa setelan konfigurasi lanjutan.

Memasang Lebih Cantik

Sebelum melanjutkan, pastikan Anda telah menginstal Node.js di komputer Anda. Anda dapat menginstal versi terbaru dari halaman unduhan Node.js resmi. Itu datang dengan manajer paket simpul (npm) bawaan, yang akan Anda gunakan untuk mengelola paket Node.js Anda.

Setelah mengonfirmasi bahwa Node.js diinstal secara lokal, mulailah dengan membuat direktori kosong untuk proyek Anda. Anda dapat memberi nama direktori demo-cantik.

Selanjutnya, cd ke direktori tersebut menggunakan baris perintah, lalu jalankan perintah berikut untuk menginisialisasi proyek Node.js:

npm init -y

Perintah ini menghasilkan file package.json yang berisi pengaturan default.

Untuk menginstal ekstensi Prettier, jalankan perintah terminal ini:

npm i --save-dev lebih cantik

Itu --save-dev flag menginstal lebih cantik sebagai ketergantungan dev, artinya hanya digunakan selama pengembangan.

Sekarang setelah Anda menginstalnya, Anda dapat mulai menjelajahi cara kerja Prettier dengan menggunakannya di baris perintah.

Menggunakan Prettier melalui Command Line

Mulailah dengan membuat a script.js file dan mengisinya dengan kode berikut:

fungsijumlah(a, b) { kembali a + b}
const pengguna = { nama: "Kyle", usia: 27,
 adalah Programmer: BENAR,
 kunci panjang: "Nilai",
 lebih banyakData: 3
}

Untuk memformat kode dalam file script.js ini melalui baris perintah, jalankan perintah berikut:

npx lebih cantik --tulis script.js

Perintah memformat ulang kode JavaScript di script.js ke standar default Prettier. Ini akan menjadi hasilnya:

fungsijumlah(a, b) {
kembali a + b;
}
const pengguna = {
 nama: "Kyle",
 usia: 27,
 adalah Programmer: BENAR,
 kunci panjang: "Nilai",
 lebih banyakData: 3,
};

Anda juga dapat memformat markup HTML dari baris perintah. Buat sebuah index.html file di direktori yang sama dengan script.js. Kemudian rekatkan HTML dengan format buruk berikut ke dalam file:

"" alt=""kelas="ikon cuaca besar">

kelas="TempHeader saat ini"><menjangkau>21menjangkau></div>
</div>
 </header>

Untuk memformat HTML, jalankan perintah ini:

npx lebih cantik --tulis index.html

Perintah ini memformat ulang HTML ke standar default Prettier, yang menghasilkan kode berikut:

<tajuk>
<div>
<imgsrc=""alt=""kelas="ikon cuaca besar" />
<divkelas="TempHeader saat ini"><menjangkau>21menjangkau>div>
div>
tajuk>

Anda juga dapat menggunakan --memeriksa tandai untuk memeriksa apakah kode sesuai dengan standar Prettier. Contoh cek berikut script.js:

npx lebih cantik --periksa script.js

Ini berguna jika Anda menginginkan pre-commit hook untuk memastikan orang menggunakan Prettier dan memformat file sebelum memasukkannya ke Git. Ini bekerja dengan baik ketika berkontribusi pada open source.

Mengintegrasikan Lebih Cantik ke dalam Kode Visual Studio

Menggunakan Prettier melalui baris perintah bisa merepotkan. Alih-alih menjalankan perintah secara manual setiap kali Anda ingin memformat kode, Anda dapat mengaturnya untuk memformat secara otomatis saat Anda mengubah file. Untungnya, Visual Studio Code (VS Code) memiliki cara bawaan untuk melakukan ini untuk Anda.

Pergi ke Ekstensi tab di VS Code dan cari Lebih cantik. Klik Lebih cantik - Pemformat kode, instal, lalu aktifkan.

Masuk ke pengaturan Kode VS Anda dengan menavigasi ke File > Preferensi > Pengaturan. Di kotak pencarian, cari Lebih cantik. Anda akan menemukan banyak opsi untuk membantu Anda mengonfigurasi ekstensi Prettier.

Biasanya, Anda dapat bertahan dengan pengaturan default. Satu-satunya hal yang mungkin Anda pertimbangkan untuk diubah adalah titik koma (Anda dapat menghapusnya jika mau). Jika tidak, semuanya diatur ke default, tetapi Anda dapat mengubahnya sesuka Anda.

Pastikan untuk mengaktifkan formatonsave sehingga kode di setiap file diformat secara otomatis saat Anda menyimpan file tersebut. Untuk mengaktifkannya, cari saja formatonsave dan centang kotak.

Jika Anda tidak menggunakan VSCode atau ekstensi tidak berfungsi karena beberapa alasan, Anda dapat melakukannya unduh pustaka onchange. Ini menjalankan perintah untuk memformat kode setiap kali Anda mengubah file.

Cara Mengabaikan File Saat Memformat Dengan Lebih Cantik

Jika Anda menjalankan yang lebih cantik --menulis perintah di seluruh folder Anda, itu akan melewati setiap modul simpul Anda. Tetapi Anda tidak perlu membuang waktu untuk memformat kode orang lain!

Untuk mengatasi masalah ini, buatlah a .prettierignore file dan sertakan istilahnya node_modules dalam file. Jika Anda menjalankan --menulis perintah di seluruh folder, itu akan memformat ulang semua file kecuali yang ada di node_modules map.

Anda juga dapat mengabaikan file dengan ekstensi tertentu. Misalnya, jika Anda ingin mengabaikan semua file HTML, cukup tambahkan *.html ke .prettierignore.

Cara Konfigurasi Lebih Cantik

Anda dapat mengonfigurasi bagaimana Anda ingin Prettier bekerja dengan opsi yang berbeda. Salah satu caranya adalah dengan menambahkan a lebih cantik kunci untuk Anda package.json mengajukan. Nilainya akan menjadi objek yang berisi semua opsi konfigurasi:

{
 ...
"skrip": {
"tes": "echo \"Kesalahan: tidak ada tes yang ditentukan\" && keluar 1"
 },
 lebih cantik: {
// opsi buka di sini
 }
}

Opsi kedua (yang kami rekomendasikan) adalah membuat file .prettierrc mengajukan. File ini akan memungkinkan Anda untuk melakukan segala macam penyesuaian.

Katakanlah Anda tidak suka titik koma. Anda dapat menghapusnya dengan menempatkan objek berikut di file:

{
"semi": BENAR,
"mengganti": [
 {
"file": ".ts",
"pilihan": {
"semi": PALSU
 }
 }
 ]
}

Itu menimpa properti memungkinkan Anda menentukan penggantian khusus untuk file atau ekstensi file tertentu. Dalam hal ini, kami mengatakan bahwa semua file berakhiran .ts (yaitu, file TypeScript) tidak boleh memiliki titik koma.

Menggunakan Lebih Cantik Dengan ESLint

ESLint adalah alat linting untuk mendeteksi kesalahan dalam kode JavaScript serta memformatnya. Jika Anda menggunakan Prettier, Anda mungkin juga tidak ingin menggunakan ESLint untuk pemformatan. Untuk menggunakannya bersama-sama, Anda harus menginstal dan menyiapkannya eslint-config-prettier. Alat ini mematikan semua konfigurasi ESLint untuk hal-hal yang sudah ditangani oleh Prettier.

Pertama, Anda perlu menginstalnya:

npm i --save-dev eslint-config-prettier

Selanjutnya, tambahkan ke daftar ekstensi di .eslintrc file (pastikan itu yang terakhir dalam daftar):

{
"memanjang": [
"beberapa-lain-config-yang-Anda-gunakan",
"lebih cantik"
 ],
"aturan": {
"inden": "kesalahan"
 }
}

Sekarang ESLint akan menonaktifkan semua aturan yang sudah ditangani oleh Prettier untuk mencegah konflik.

Bersihkan Basis Kode Anda Dengan Lebih Cantik dan ESLint

Prettier adalah alat yang ideal untuk membersihkan kode Anda dan menegakkan pemformatan yang konsisten dalam sebuah proyek. Menyetelnya agar berfungsi dengan VS Code berarti selalu dalam jangkauan.

ESLint adalah alat JavaScript yang harus dimiliki yang sejalan dengan Prettier. Ini memberikan banyak fitur dan opsi penyesuaian yang melampaui pemformatan dasar. Pelajari cara menggunakan ESLint dengan JavaScript jika Anda ingin menjadi pengembang yang lebih produktif.