Integrasi Prettier & konflik aturan
Integrasikan Prettier dengan ESLint, hindari aturan duplikat, dan tangani konflik antara aturan gaya dan logika.
Integrasi Prettier & konflik aturan adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar TypeScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus TypeScript Academy mencakup 3 pelajaran total.
Pengantar
Tujuan: Gabungkan Prettier (pemformatan) dengan ESLint (logika/gaya) tanpa konflik.
Memasang
Pasang Prettier dan plugin/konfigurasi ESLint agar keduanya terintegrasi dengan lancar.
npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettierKonfigurasi Prettier
Prettier memiliki berkas konfigurasinya sendiri. Gunakan berkas ini hanya untuk opsi pemformatan (tanda kutip, titik koma, panjang baris).
// .prettierrc.json
{
"semi": false,
"singleQuote": true
}Mengintegrasikan konfigurasi
Tambahkan plugin:prettier/recommended untuk memperluas ESLint. Konfigurasi ini mencakup eslint-config-prettier dan eslint-plugin-prettier.
// .eslintrc.js
module.exports = {
extends: [
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended"
]
}Contoh konflik
Tanpa konfigurasi, ESLint dan Prettier mungkin berbeda pendapat (misalnya tentang titik koma). Konfigurasi menonaktifkan aturan ESLint yang bertentangan.
// demo.ts
const msg = "hi"
console.log(msg)
// ESLint: missing semicolon
// Prettier: auto removes semicolons if disabled
// Solution: use eslint-config-prettierMenjalankan pemeriksaan
Jalankan ESLint untuk logika/gaya, dan Prettier untuk pemformatan. Anda juga dapat mengintegrasikan keduanya ke editor.
npx eslint "src/**/*.{ts,tsx}"
npx prettier --check "src/**/*.{ts,tsx}"Pertanyaan
Pemeriksaan singkat: Apa yang dilakukan eslint-config-prettier?
Rangkuman
Rangkuman: Pasang Prettier + konfigurasi, tambahkan ke daftar perluasan ESLint, nonaktifkan aturan yang bertentangan, lalu jalankan kedua alat tersebut agar selaras.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Integrasi Prettier & konflik aturan” gratis?
Ya — teks lengkap “Integrasi Prettier & konflik aturan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus TypeScript Academy, upgrade ke CoddyKit PRO. Kursus TypeScript Academy mencakup 3 pelajaran total.
Apa yang akan aku pelajari di “Integrasi Prettier & konflik aturan”?
Integrasikan Prettier dengan ESLint, hindari aturan duplikat, dan tangani konflik antara aturan gaya dan logika. Kamu berlatih TypeScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai TypeScript Academy?
Tidak diperlukan pengalaman sebelumnya. TypeScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 3.
Berapa lama pelajaran “Integrasi Prettier & konflik aturan” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran TypeScript Academy ini?
Ya. Setiap pelajaran TypeScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- ESLint + @typescript-eslint
- Integrasi Prettier & konflik aturan
- Kumpulan aturan umum di dunia nyata