Formatter JavaScript

0 karakter

Alat pemformatan kode JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON di sisi browser, mendukung konfigurasi detail gaya Prettier, kompresi-obfuskasi Terser, editor CodeMirror terintegrasi, pratinjau real-time, operasi pintas, unggah/unduh file.

Rekomendasi Terkait

Kompres JS

CSS Formatter

Alat Pemformat JSX

Generator QR Code/Barcode

Konverter cURL ke Kode

Obfuscasi JS

Kasus penggunaan

  • Selama pengembangan frontend, tempel kode JS pihak ketiga yang telah dikompresi, hias cepat untuk dibaca dan di-debug
  • Sebelum tinjauan kode tim, format kode JavaScript/TypeScript secara seragam, hilangkan perbedaan gaya seperti indentasi, tanda kutip, titik koma, fokus pada peninjauan logika
  • Saat mengambil alih proyek lama, format sekali klik kode JS lama yang tata letaknya berantakan, cepat memahami struktur kode dan hierarki logika
  • Sebelum deployment production, gunakan Terser untuk mengompresi dan mengobfuskasi kode JavaScript, kurangi ukuran file dan tingkatkan kecepatan loading halaman web
  • Saat menulis demo JS/JSX online, format real-time menjaga kode tetap bersih, mudah dibagikan dengan rekan kerja atau komunitas
  • Saat mempelajari efek berbagai opsi konfigurasi Prettier, pratinjau hasil format secara instan dengan menyesuaikan opsi, pahami fungsi parameter seperti tabWidth, trailingComma
  • Saat memproses cuplikan kode yang disalin dari platform seperti Stack Overflow, GitHub, perbaiki masalah indentasi dan pergantian baris secara otomatis
  • Saat menulis file konfigurasi JSON, format indentasi dan pergantian baris secara otomatis, hindari kegagalan parsing yang disebabkan oleh kesalahan koma, kurung
  • Selama pengembangan halaman CSS/HTML, format satu atap kode JS+CSS+HTML dalam proyek yang sama, jaga gaya tetap seragam
  • Sebelum wawancara/ujian tulis, cepat merapikan kode JS untuk soal algoritma, format standar meningkatkan kesan visual kode

Cara Penggunaan

  1. Buka halaman alat formatter JavaScript, dapat langsung tempel kode ke area editor kiri, atau klik tombol unggah untuk memilih file lokal (mendukung format .js/.ts/.jsx/.tsx/.css/.html/.json)
  2. Pilih jenis bahasa yang sesuai: Alat biasanya mengenali otomatis, jika pengenalan tidak akurat dapat memilih manual JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON di dropdown bahasa
  3. Konfigurasi opsi pemformatan: Dapat memilih gaya cepat preset (default/modern/classic), atau menyesuaikan manual opsi Prettier (lebar indentasi, Tab/spasi, lebar baris, titik koma, tanda kutip, koma trailing, kurung panah)
  4. Jika perlu mengompresi kode, beralih ke mode kompresi, konfigurasi opsi kompresi Terser (aktifkan compress atau tidak, mangle nama variabel atau tidak, kompresi variabel level teratas atau tidak), tingkat optimalisasi CSS, opsi kompresi HTML
  5. Alat memproses kode secara real-time, area editor kanan langsung menampilkan hasil format atau kompresi, bilah status bawah menampilkan statistik jumlah karakter, jumlah byte, rasio kompresi secara real-time
  6. Gunakan pintasan keyboard untuk meningkatkan efisiensi: Ctrl+Shift+B memicu format, Ctrl+Shift+M beralih mode kompresi, Ctrl+Shift+O buka file, Ctrl+Shift+D unduh hasil, Ctrl+Shift+K bersihkan editor
  7. Setelah puas klik tombol salin untuk menyalin hasil ke clipboard, atau klik tombol unduh untuk menyimpan sebagai file lokal; juga dapat klik tombol bagikan untuk membuat tautan URL berisi kode dan konfigurasi dibagikan kepada orang lain

Fitur

  • Dukungan multi-bahasa: Pemformatan serentak untuk JavaScript, TypeScript, JSX, TSX, CSS, HTML, JSON total 7 bahasa umum frontend, pemrosesan kode frontend satu atap
  • Konfigurasi detail gaya Prettier: Mendukung opsi lengkap seperti tabWidth lebar indentasi (2/4/8 spasi), useTabs Tab vs spasi, printWidth lebar baris, semi titik koma, singleQuote tanda kutip tunggal/ganda, trailingComma koma trailing, arrowParens tanda kurung fungsi panah
  • Fitur kompresi kode: Terintegrasi engine kompresi Terser, mendukung opsi kompresi tingkat production seperti compress kompresi kode, mangle obfuskasi nama variabel, toplevel kompresi variabel level teratas
  • Optimalisasi khusus CSS: Menyediakan konfigurasi tingkat optimalisasi CSS, mendukung pemrosesan khusus seperti kompresi CSS, hapus komentar, hapus spasi
  • Opsi kompresi HTML: Mendukung konfigurasi HTML minify, dapat meringkas spasi putih, menghapus komentar, menghapus tanda kutip atribut, dll.
  • Pemrosesan real-time: Format dan pratinjau secara real-time setelah memasukkan kode, lihat hasil tata letak tanpa perlu klik tombol
  • Editor CodeMirror: Editor CodeMirror profesional terintegrasi, memberikan pengalaman pengeditan profesional seperti penyorotan sintaksis, tampilan nomor baris, pencocokan kurung, pelipatan kode
  • Unggah/unduh file: Mendukung unggah langsung file .js/.ts/.jsx/.tsx/.css/.html/.json lokal, setelah format dapat mengunduh file yang telah diproses sekali klik
  • Tautan berbagi: Simpan kode dan konfigurasi melalui URL hash, buat tautan berbagi dikirim ke rekan kerja untuk mereproduksi skenario pemformatan saat ini
  • Riwayat: Simpan riwayat pemformatan otomatis ke localStorage, kembali ke versi kode dan konfigurasi sebelumnya kapan saja
  • Pintasan keyboard: Mendukung operasi pintas seperti Ctrl+Shift+B format, Ctrl+Shift+M kompres, Ctrl+Shift+O buka file, Ctrl+Shift+D unduh, Ctrl+Shift+K bersihkan
  • Preset cepat: Menyediakan 3 preset konfigurasi cepat default, modern, classic, beralih gaya umum sekali klik
  • Statistik karakter: Menampilkan perbandingan jumlah karakter, jumlah byte, rasio kompresi kode asli dan kode yang telah diproses secara real-time
  • Contoh kode: Contoh kode untuk berbagai bahasa terintegrasi, klik untuk memuat langsung guna mencoba fitur

Pertanyaan Umum

Apakah logika kode JavaScript setelah diformat akan berubah?

Tidak. Pemformatan hanya menyesuaikan konten terkait "tata letak" seperti spasi putih, indentasi, pergantian baris, posisi kurung, gaya tanda kutip, dll., berdasarkan konversi AST (Abstract Syntax Tree), struktur AST kode sebelum dan sesudah format sepenuhnya identik, logika eksekusi 100% sama. Selama kode itu sendiri sintaksis benar dan dapat di-parse normal, pemformatan tidak akan mengubah perilaku eksekusi apa pun, dapat digunakan dengan tenang. Namun kompresi (mangle) meskipun juga tidak mengubah logika, perlu memperhatikan skenario khusus seperti eval, ekspor variabel global, menghindari konfigurasi yang tidak tepat.

Bagaimana jika hasil format alat format dan VS Code/Prettier lokal saya berbeda?

Logika pemformatan alat ini sebisa mungkin dijaga sesuai dengan perilaku resmi Prettier. Jika hasil berbeda, silakan periksa item konfigurasi: tabWidth, useTabs, semi, singleQuote, trailingComma, arrowParens - apakah beberapa opsi inti ini kedua sisi benar-benar sama. Selain itu perhatikan perbedaan versi Prettier - konfigurasi default Prettier 2/3 memiliki perbedaan kecil (v3 default trailingComma: all, v2 default es5; sejak v2 arrowParens default always). Jika proyek lokal Anda memiliki file konfigurasi .prettierrc, sesuaikan opsi yang sesuai di halaman web, hasil format akan sama.

Apakah kode yang dikompresi dapat dikembalikan? Nama variabel yang telah di-mangle dapat dipulihkan?

Kode yang diformat sepenuhnya reversibel - karena hanya tata letak yang berubah, semua pengenal, logika dipertahankan utuh, format lagi akan kembali. Tetapi kode yang dikompresi: bagian yang hanya menghapus spasi dan komentar dapat diformat ulang untuk memulihkan tata letak, tetapi mangle (obfuskasi nama variabel) tidak dapat dibalik - nama variabel yang awalnya bermakna userName menjadi a, proses ini searah, tidak dapat otomatis memulihkan nama asli. Jika perlu men-debug kode terkompresi di lingkungan production, sebaiknya konfigurasi pembuatan file Source Map, petakan kembali ke posisi kode sumber melalui Source Map. Jadi sebelum mengompresi pastikan menyimpan kode sumber asli yang tidak terkompresi!

Browser apa saja yang didukung? Dapat digunakan di ponsel?

Alat ini mendukung semua browser modern: Chrome, Firefox, Safari, Edge versi terbaru semuanya dapat digunakan normal. Browser IE tidak didukung (sekarang juga tidak ada yang menggunakan IE untuk pengembangan). Tata letak responsif menyesuaikan layar ponsel, tetapi pengeditan kode di layar kecil pengalaman biasa, disarankan menggunakan di browser desktop, layar besar efisiensi lebih tinggi. Semua perhitungan format dan kompresi berjalan lokal di browser, tidak perlu mengunggah kode ke server, kode tidak akan meninggalkan browser Anda, aman dan terpercaya.

Mengapa beberapa kode tidak dapat diformat, menampilkan kesalahan parsing?

Alat pemformatan pertama-tama perlu mem-parse kode menjadi AST baru dapat bekerja, jika kode memiliki kesalahan sintaksis (kurung tidak cocok, string tidak tertutup, kata kunci salah tulis, kelebihan koma, dll.), parser tidak memahami struktur kode akan memberikan error. Silakan periksa kesalahan sintaksis kode itu sendiri terlebih dahulu: lihat konsol apakah ada pesan error, editor apakah ada garis bergelombang merah menunjukkan lokasi kesalahan, setelah memperbaiki kesalahan sintaksis dapat diformat normal. Selain itu pastikan memilih mode bahasa yang benar, kode JSX/TSX jangan dipilih menjadi JS biasa.

Apakah kode saya akan diunggah ke server? Apakah kode aman?

Tidak. Semua pemformatan, kompresi, penyorotan sintaksis sepenuhnya berjalan lokal di browser Anda melalui JavaScript, kode tidak dikirim ke server mana pun, diproses sepenuhnya di perangkat Anda. Anda dapat menguji dengan memutus jaringan: setelah memutus jaringan alat tetap dapat digunakan normal. Fitur tautan berbagi mengodekan kode dan konfigurasi ke dalam URL hash, klik bagikan hanya membuat URL, kode tidak diunggah - tetapi jika Anda mengirim tautan ke orang lain, mereka membuka tautan dapat melihat kode Anda, jadi jangan bagikan kode sensitif melalui tautan.

Dapat memformat komponen file tunggal Vue (file .vue)? Bagaimana dengan Svelte?

Saat ini dukungan multi-bahasa alat ini mencakup JS/TS/JSX/TSX/CSS/HTML/JSON, file tunggal <template>/<script>/<style> Vue (SFC) dan komponen Svelte saat ini tidak mendukung pemformatan seluruhnya secara langsung, tetapi Anda dapat menyalin bagian script (JS/TS), bagian style (CSS), bagian template (HTML) secara terpisah memilih bahasa yang sesuai untuk diformat terpisah. Ke depannya akan dipertimbangkan untuk menambah dukungan format Vue/Svelte SFC.

Bagaimana cara mengatur spesifikasi format terpadu tim?

Untuk spesifikasi terpadu tim, disarankan kombinasi di tiga tingkat: ①Letakkan .editorconfig di direktori root proyek, satukan pengaturan dasar editor (indentasi, pemisah baris, encoding); ②Gunakan Prettier dan letakkan file konfigurasi .prettierrc di proyek, semua orang dan CI memformat dengan konfigurasi ini, alat ini juga dapat memilih opsi yang sesuai untuk mencocokkan konfigurasi; ③Gunakan ESLint + eslint-config-prettier untuk mematikan aturan gaya ESLint, hanya periksa kualitas kode. Konfigurasikan editor untuk memformat otomatis saat menyimpan (pasang ekstensi Prettier di VS Code, atur editor.formatOnSave: true), tambahkan langkah lint di CI untuk memeriksa format, pastikan kode yang dikirim sesuai spesifikasi.

Apa keuntungan koma trailing (trailingComma)? Apakah sebaiknya diaktifkan?

Sangat disarankan mengaktifkan koma trailing (setidaknya tingkat es5, tingkat all direkomendasikan). Keuntungan koma trailing adalah: ①Git diff lebih bersih: saat menambahkan elemen terakhir tidak perlu menambahkan koma di baris sebelumnya, hanya ada diff baris baru, penambahan koma tidak mengotori diff baris sebelumnya; ②Lebih nyaman saat menyusun ulang urutan elemen, tidak perlu menangani masalah koma terakhir; ③Browser modern dan Node.js mendukung koma trailing sepenuhnya, IE lama tidak mendukung tetapi sekarang tidak perlu mempertimbangkan IE lagi. Satu-satunya kerugian adalah satu koma lebih banyak, tetapi dibandingkan dengan kenyamanan yang dibawa, ini sepenuhnya sepadan. Prettier v3 secara default adalah all.

Saat mengompresi apakah sebaiknya mengaktifkan mangle? Apa perbedaan compress dan mangle?

Untuk kompresi lingkungan production disarankan mengaktifkan baik compress maupun mangle, keduanya adalah opsi kompresi independen: compress adalah optimalisasi kode (melipat konstanta, menghapus kode mati, menyederhanakan ekspresi, dll.), hanya memodifikasi struktur kode jika dapat disederhanakan, tidak mengubah nama variabel; mangle adalah memendekkan nama variabel lokal, mengubah nama variabel panjang menjadi karakter tunggal, ini adalah salah satu sumber pengurangan ukuran terbesar. Selama kode Anda tidak dipanggil dari luar langsung dengan nama variabel sebagai pustaka, atau tidak mengakses nama variabel secara dinamis dengan eval, mangle aman dan dapat mengurangi ukuran secara signifikan. Jika pustaka open source perlu mempertahankan nama API, dapat mengonfigurasi mangle.reserved untuk mempertahankan nama yang diekspor.

Mengapa saat memformat JSON beberapa karakter otomatis di-escape?

Spesifikasi JSON memiliki persyaratan sintaksis yang ketat: string harus tanda kutip ganda, tidak boleh ada koma trailing, karakter khusus harus di-escape (baris baru→\n, tanda kutip→\", garis miring terbalik→\\, Tab→\t, dll.). Jika string JSON Anda memiliki karakter khusus yang belum di-escape, akan otomatis di-escape sesuai spesifikasi JSON selama pemformatan, ini adalah perilaku yang benar. Catatan: JSON bukan JavaScript, tidak dapat menulis komentar di JSON, tidak boleh tanda kutip tunggal, tidak boleh undefined, semua ini akan menyebabkan parsing JSON gagal.

Bagaimana cara selalu memiliki kurung dalam parameter fungsi panah? Atau tidak ingin kurung?

Sesuaikan opsi arrowParens: always adalah selalu memasang kurung ((x) => x), ini default Prettier v2+, keuntungannya saat menambah/mengurangi parameter tidak perlu menambah/menghapus kurung, diff lebih bersih; avoid adalah menghilangkan kurung saat parameter tunggal (x => x), kode lebih ringkas. Pilih sesuai gaya tim, kedua gaya tidak ada benar salah, hanya perlu seragam. Catatan: Parameter dengan anotasi tipe, parameter default, parameter destrukturisasi akan memiliki kurung dalam konfigurasi apa pun.

Dapatkah pemformatan otomatis memperbaiki masalah gaya yang ditunjukkan ESLint?

Alat ini adalah pemformatan gaya Prettier, hanya dapat memperbaiki masalah gaya yang ditangani Prettier (indentasi, tanda kutip, titik koma, koma trailing, lebar baris, spasi, dll.). Masalah kualitas kode yang ditunjukkan ESLint (seperti variabel tidak terpakai, kurang return, masalah ===) adalah masalah logika, alat format tidak dapat memperbaiki otomatis, perlu dimodifikasi manual. Jika ESLint Anda dikonfigurasi eslint-config-prettier, setelah memformat dengan Prettier, ESLint tidak akan memberikan error terkait gaya, masalah kualitas sisanya perbaiki manual.

Berapa ukuran file kode maksimum yang didukung? Apakah memformat file besar akan lag?

Karena pemformatan berjalan lokal di browser, ukuran file yang didukung tergantung pada kinerja perangkat Anda, umumnya file JS dari puluhan KB hingga beberapa MB dapat diproses normal, file JS tunggal proyek umum sepenuhnya cukup. Jika file JS yang dikemas sangat besar (puluhan MB) mungkin lag atau memori tidak cukup, untuk file besar seperti ini disarankan memproses lokal dengan baris perintah Node.js+Prettier/Terser. Dalam pengembangan sehari-hari ukuran file sumber individu biasanya dalam rentang pemrosesan.

Mengapa saat menekan pintasan Ctrl+Shift+B di Chrome malah membuka pengelola bookmark?

Ini adalah konflik pintasan default browser Chrome: Ctrl+Shift+B adalah pintasan Chrome untuk menampilkan/menyembunyikan bilah bookmark, prioritas pintasan browser lebih tinggi dari pintasan JS halaman web, sehingga diintersep oleh Chrome. Solusi: ①Klik tombol format untuk beroperasi; ②Jika Anda pengguna Mac maka Cmd+Shift+B tidak akan konflik dengan Chrome; ③Dapat mengubah pintasan browser di pengaturan Chrome; ④Dapat memfokuskan di dalam editor terlebih dahulu, beberapa situasi fokus editor dapat menangkap pintasan. Jika browser lain juga ada konflik pintasan, dapat menggunakan tombol untuk beroperasi.

Pemecahan Masalah

Saat memformat menampilkan "Kesalahan parsing sintaksis", tidak dapat memformat

Kode itu sendiri memiliki kesalahan sintaksis: kurung tidak cocok, string tidak tertutup, kurang kata kunci, kelebihan koma, dll., kesalahan sintaksis menyebabkan parsing AST gagal tidak dapat memformat, silakan perbaiki kesalahan sintaksis terlebih dahulu Pemilihan mode bahasa salah: misalnya kode JSX/TSX dipilih menjadi JavaScript, sintaksis generik disalahartikan sebagai tag JSX, atau sebaliknya, silakan pilih manual jenis bahasa yang benar Mengandung sintaksis eksperimental: kode menggunakan proposal sintaksis JavaScript terlalu baru yang belum menjadi standar (seperti decorator, operator Pipeline), parser tidak mendukung File memiliki header BOM: tiga byte UTF-8 BOM (EF BB BF) di awal, beberapa parser mungkin tidak dapat menanganinya, coba simpan sebagai UTF-8 tanpa BOM Tercampur kode bahasa lain: misalnya bahasa template yang disematkan dalam HTML (EJS, Handlebars, direktif template Vue) bukan JS/HTML murni, parser tidak dapat mengenali Dalam kode ada komentar blok yang belum berakhir: /* tidak ada */ yang sesuai, komentar tidak tertutup menyebabkan seluruh kode setelahnya dianggap komentar Ambiguitas ekspresi regex: beberapa tempat yang terlihat seperti operator pembagi/sebenarnya adalah regex literal, parser salah menilai, dapat menambahkan titik koma sebelum regex untuk menghilangkan ambiguitas

Error saat kompresi (Minify), tidak dapat mengompresi

Kesalahan sintaksis kode: Sama seperti pemformatan, kompresi juga berbasis AST, kode harus sintaksis benar baru dapat dikompresi, perbaiki kesalahan sintaksis terlebih dahulu Menggunakan import/export ES Module tetapi tidak menandai jenis modul dengan benar, atau konfigurasi kompresi tidak cocok dengan jenis modul Masalah saat mangle nama properti: Jika mengaktifkan mangle nama properti (default tidak aktif), akses properti dinamis obj['key'] menyebabkan properti tidak ditemukan, jangan sembarangan mengaktifkan mangle properti Dalam kode ada eval() atau pernyataan with: Ketika Terser menemui eval/with mangle bisa salah, karena eval dapat mengakses nama variabel dalam cakupan secara dinamis, hindari penggunaan eval dalam kode production Kesalahan konfigurasi nama yang dicadangkan: Jika mengonfigurasi mangle.reserved tetapi ejaan salah atau kurang nama yang harus dicadangkan (seperti jQuery, $ dan pustaka global lainnya), dapat menyebabkan kesalahan runtime Masalah konfigurasi kompresi toplevel: Jika kode Anda berjalan di cakupan global daripada dikemas dalam IIFE/modul, mengaktifkan compress.toplevel: true dapat merusak referensi variabel global Konfigurasi versi browser target terlalu lama: Terser dapat menggunakan sintaksis yang tidak didukung browser target saat kompresi, dapat mengonfigurasi versi ecma untuk menentukan versi sintaksis JS output

Saat memformat bahasa Mandarin/komentar Mandarin menampilkan karakter rusak

Encoding file bukan UTF-8: File lokal yang diunggah adalah encoding Mandarin seperti GBK/GB2312, alat parsing default mengikuti UTF-8 menyebabkan karakter rusak, gunakan editor menyimpan ulang file sebagai encoding UTF-8 lalu unggah kembali Encoding halaman browser dimodifikasi tidak sengaja: Meskipun browser saat ini default UTF-8, tetapi beberapa browser lama atau pengaturan khusus encoding mungkin salah, dapat melihat pengaturan encoding halaman di menu browser dan atur ke UTF-8 File memiliki header UTF-8 BOM: Meskipun BOM biasanya tidak menyebabkan karakter rusak, tetapi beberapa parser menangani BOM tidak normal, dapat menggunakan editor menghapus BOM simpan sebagai UTF-8 tanpa BOM Masalah konversi encoding saat salin tempel: Saat menyalin kode dari beberapa perangkat lunak lama (seperti Notepad versi lama, Word), karakter khusus (seperti tanda kutip Mandarin, spasi lebar penuh) mungkin salah dikonversi, usahakan menyalin dari editor modern seperti VS Code Masalah font: Beberapa font monospaced mendukung bahasa Mandarin dengan buruk menyebabkan tampilan tidak normal, ini bukan masalah encoding, hanya masalah font tampilan, ganti font monospaced yang mendukung bahasa Mandarin saja Karakter Unicode khusus: Kode mengandung karakter khusus tidak terlihat seperti emoji, spasi nol lebar, karakter kontrol, dapat menyebabkan tampilan tidak normal atau kesalahan format, dapat mengaktifkan tampilan karakter tidak terlihat di editor untuk melihat Masalah kompresi gzip atau proxy: Jika mengakses setelah deployment muncul karakter rusak, periksa apakah server telah menetapkan header respons Content-Type: application/javascript; charset=utf-8 dengan benar

Pemformatan kode JSX/TSX gagal atau kesalahan parsing

Mode bahasa dipilih menjadi JavaScript alih-alih JSX/TSX: Parser JS biasa tidak mengenali sintaksis <tag>, akan memparsing tag JSX sebagai operator perbandingan dan memberikan error, silakan pilih manual bahasa JSX atau TSX Ambiguitas sintaksis generik TSX: Parameter generik <T> dalam TSX dapat disalahartikan sebagai tag JSX, seperti const f = <T>(x: T) => x, dapat menambahkan koma setelah <T> menjadi <T,> untuk menghilangkan ambiguitas (ini adalah penulisan umum TSX) Tag JSX belum tertutup: JSX mensyaratkan semua tag harus tertutup dengan benar, tag penutup sendiri harus memiliki />, berbeda dengan HTML, <img> harus ditulis <img/> Masalah kurung ekspresi JS dalam JSX: Ekspresi JS di dalam {} harus tertutup dengan benar, jika {obj.prop} tidak menulis } akan menyebabkan parsing setelahnya kacau Masalah sintaksis pendek Fragment: Tag kosong <></> memerlukan dukungan React 16+ dan harus tertutup dengan benar; jika menggunakan <Fragment> perlu diimpor dengan benar Masalah tanda kutip nilai atribut JSX: Nilai atribut JSX jika berupa string harus menggunakan tanda kutip (tanda kutip ganda), jika ekspresi gunakan {}, jangan dicampur Ekstensi file TSX adalah .ts bukan .tsx: Parser TypeScript hanya mengaktifkan parsing JSX pada ekstensi .tsx, jika menulis JSX dengan ekstensi .ts akan error, silakan gunakan ekstensi yang benar

Setelah format indentasi salah, tidak sesuai ekspektasi

Konfigurasi tabWidth salah: Periksa konfigurasi lebar indentasi adalah 2 atau 4, tim biasanya menggunakan 2 spasi, jika ekspektasi 4 spasi perlu menyesuaikan manual opsi tabWidth Konfigurasi useTabs salah: Jika tim menggunakan indentasi Tab tetapi Anda mengonfigurasi spasi, atau sebaliknya, periksa apakah opsi useTabs benar Kode itu sendiri memiliki kesalahan sintaksis: Kesalahan sintaksis menyebabkan struktur AST tidak normal, saat diformat indentasi menjadi kacau, perbaiki terlebih dahulu kesalahan sintaksis yang ditunjukkan oleh garis bergelombang merah Pencampuran Tab dan spasi: Dalam kode asli beberapa tempat indentasi Tab beberapa tempat spasi, pemformatan akan menyatukan menjadi gaya yang dikonfigurasi, tetapi jika kode asli terlalu kacau mungkin perlu memformat beberapa kali Pengaturan printWidth terlalu kecil: Jika lebar baris diatur terlalu kecil (seperti 40), kode akan sering pindah baris membuat indentasi terlihat kacau, atur ke 80 atau 100 lebih sesuai Konfigurasi opsi tata letak seperti bracketSameLine/arrowParens tidak sesuai ekspektasi: Gaya posisi kurung kurawal, kurung fungsi panah, dll. ditentukan oleh konfigurasi, bukan masalah indentasi, sesuaikan opsi yang sesuai saja Konfigurasi EditorConfig konflik dengan editor lokal: Jika editor lokal menggunakan .editorconfig untuk mengatur indentasi otomatis, berbeda dengan opsi yang dikonfigurasi di halaman web, hasil format kedua sisi tidak akan konsisten, satukan konfigurasi saja

Pintasan keyboard tidak berfungsi, ditekan tidak ada reaksi

Fokus tidak di editor: Pintasan hanya efektif ketika editor mendapatkan fokus, jika fokus di tombol, kotak input atau tempat lain halaman pintasan tidak terpicu, klik dulu area editor untuk memfokuskan Pintasan browser konflik: Beberapa pintasan (seperti Ctrl+Shift+B di Chrome membuka bilah bookmark, Ctrl+Shift+O di Firefox membuka riwayat) diambil alih browser, dapat klik tombol untuk beroperasi, atau pengguna Mac gunakan Cmd menggantikan Ctrl coba Masalah metode input: Dalam status metode input bahasa Mandarin beberapa pintasan dapat diintersep, beralih ke metode input bahasa Inggris lalu coba pintasan lagi Ekstensi/plugin lain mengambil alih: Ekstensi pintasan yang terpasang di browser, script Tampermonkey, plugin proxy dapat mengambil alih pintasan, coba buka halaman dalam mode penyamaran Pintasan sistem konflik: Pintasan global sistem operasi atau perangkat lunak lain yang berjalan (seperti perangkat lunak screenshot, metode input, IDE) telah mengambil alih kombinasi tombol yang sesuai, dapat mengubah pintasan perangkat lunak lain atau menggunakan tombol alat ini untuk beroperasi Perbedaan keyboard Mac/Windows: Perhatikan Mac menggunakan tombol Cmd (⌘), Windows/Linux menggunakan tombol Ctrl, jangan dicampur; Option di Mac sesuai dengan Alt di Windows Batasan keamanan browser: Beberapa pintasan terkait akses file dapat dibatasi oleh kebijakan keamanan browser, tidak dapat disimulasikan sepenuhnya melalui JS, perlu klik langsung tombol yang sesuai untuk beroperasi

Glosarium

Prettier
Alat pemformatan kode frontend paling populer saat ini, mengadopsi filosofi desain Opinionated, mendukung berbagai bahasa seperti JS/TS/CSS/HTML/Markdown, memaksa penyatuan gaya kode, mengakhiri perdebatan gaya dalam tim.
Terser
Alat kompresi JavaScript modern, adalah cabang UglifyJS yang kompatibel dengan ES6+, mendukung kompresi-obfuskasi sintaksis ES6+, merupakan kompresor default alat build modern seperti Webpack, Rollup, Vite.
UglifyJS
Alat kompresi JavaScript klasik, pendahulu Terser, tetapi hanya mendukung sintaksis ES5 dan sebelumnya, tidak mendukung fitur baru ES6+, sekarang proyek baru umumnya menggunakan Terser sebagai pengganti.
AST (Abstract Syntax Tree)
Pohon sintaksis abstrak, representasi berbentuk pohon dari struktur sintaksis kode sumber, setiap simpul mewakili satu struktur sintaksis dalam kode. Alat seperti Babel, Prettier, Terser, ESLint semuanya diimplementasikan berbasis AST.
ESLint
Alat pemeriksa kode (Linter) paling populer di ekosistem JavaScript/TypeScript, digunakan untuk menemukan masalah kualitas kode dan menyatukan gaya kode, dapat digunakan bersama Prettier.
EditorConfig
File konfigurasi penyatuan gaya kode lintas editor/IDE, menentukan pengaturan dasar seperti gaya indentasi, ukuran indentasi, jenis pemisah baris, encoding file, baris baru di akhir, agar editor yang berbeda saat membuka proyek yang sama memiliki perilaku konsisten.
CodeMirror
Komponen editor kode berbasis browser, menyediakan fitur pengeditan profesional seperti penyorotan sintaksis, nomor baris, pencocokan kurung, pelipatan kode, multi-kursor, merupakan salah satu pilihan utama editor kode berbasis web.
minify (kompresi)
Proses meminimalkan ukuran kode tanpa mengubah logika kode, melalui cara menghapus spasi putih, komentar, memendekkan nama variabel, optimalisasi kode, dll., digunakan untuk meningkatkan kecepatan loading di lingkungan production.
mangle (obfuskasi/hancurkan)
Langkah dalam proses kompresi untuk memendekkan nama variabel, nama fungsi, nama parameter menjadi karakter tunggal, secara signifikan mengurangi ukuran kode sekaligus membuat kode lebih sulit dibaca, juga disebut obfuskasi nama variabel.
beautify (hias)
Yaitu pemformatan kode, menyusun ulang kode yang telah dikompresi atau berantakan dengan indentasi, pergantian baris, penambahan spasi, meningkatkan keterbacaan, berlawanan dengan minify.
trailing comma (koma trailing)
Koma setelah elemen terakhir dari objek, array, parameter fungsi, membantu membuat Git diff lebih bersih saat menambahkan elemen baru, lingkungan ES5+ mendukung.
arrow parens (kurung fungsi panah)
Apakah parameter fungsi panah parameter tunggal perlu dibungkus kurung, seperti x => x (tanpa kurung) vs (x) => x (dengan kurung).
printWidth (lebar baris)
Saat memformat, setiap baris otomatis pindah baris jika melebihi berapa karakter, default Prettier adalah 80 karakter, tim dapat menyesuaikan menjadi 100 atau 120 sesuai ukuran monitor.
semicolons (titik koma)
Apakah menambahkan titik koma di akhir pernyataan JavaScript, JS memiliki mekanisme ASI penyisipan titik koma otomatis, tetapi sebagian besar skenario tetap menyarankan menambahkan titik koma untuk menghindari kecelakaan.
single quote (tanda kutip tunggal)
Menggunakan tanda kutip tunggal atau ganda untuk string, dalam JS fungsinya sepenuhnya setara hanya preferensi gaya, spesifikasi JSON mewajibkan tanda kutip ganda.
double quote (tanda kutip ganda)
Membungkus string dengan tanda kutip ganda, merupakan gaya default banyak bahasa, juga merupakan format string yang diminta oleh spesifikasi JSON.
tab width (lebar indentasi)
Jumlah spasi yang sesuai dengan setiap level indentasi, komunitas frontend biasanya menggunakan 2 spasi, bahasa backend biasanya menggunakan 4 spasi.
BOM (Byte Order Mark)
Tanda urutan byte, tiga byte EF BB BF yang mungkin muncul di awal file encoding UTF-8, digunakan untuk menandai encoding, dalam beberapa skenario dapat menyebabkan kesalahan parsing JS.
UTF-8
Unicode Transformation Format 8-bit, saat ini merupakan encoding file standar Web dan proyek frontend, mendukung semua karakter Unicode, merupakan encoding yang direkomendasikan secara default.
source map (peta sumber)
File yang memetakan kode yang telah dikompresi/transpilasi kembali ke posisi kode sumber asli, digunakan untuk debugging lingkungan production, ketika kode terkompresi error dapat melacak ke nomor baris kode sumber.

Tabel opsi konfigurasi umum Prettier

Optimasi umum dan dampak kompresi/obfuscate JS

Tabel referensi pintasan keyboard editor (Windows/Linux / Mac)