[Organisasi dan perkongsian] Pemalam VSCode yang penting untuk bahagian hadapan pada tahun 2023

Visual Studio Code ialah editor kod sumber merentas platform percuma yang dibangunkan oleh Microsoft untuk menulis aplikasi web dan awan moden. Ia mengandungi pasaran pemalam yang kaya, menyediakan banyak pemalam praktikal. Mari kongsikan pemalam VS Code yang penting untuk bahagian hadapan pada tahun 2023!

Rangka kerja bahagian hadapan

---

ES7+ Coretan React/ Redux/React-Native

Pemalam menyediakan beberapa awalan trengkas untuk mempercepatkan pembangunan dan membantu pembangun mencipta coretan dan sintaks kod untuk React, Redux, GraphQL dan React Native. Contohnya, buat fail baharu dan taip rfce kemudian tekan enter, ini akan menjana Komponen Fungsi React, import React dan eksport komponen.

VSCode React Refactor

Ini ialah sambungan Kod VS yang direka khusus untuk pembangun React. Pemfaktoran semula boleh mencabar apabila bekerja pada projek besar. Kod boleh difaktorkan semula dengan cepat menggunakan VSCode React Refactor, yang mengekstrak coretan kod JSX ke dalam kelas dan komponen baharu. Selain itu, ia menyokong TypeScript, TSX, fungsi biasa, kelas dan fungsi anak panah.

Coretan Reaksi Mudah

Pemalam ini menyediakan set coretan React yang dipilih dengan teliti yang boleh ditambah dengan mudah pada kod anda dengan memasukkan beberapa huruf di tengah. Sebagai contoh, menaip imr akan mengimport React ke dalam komponen.

Coretan Kod Reaksi Typescript

Pemalam ini mengandungi coretan kod React menggunakan Typescript, ia menyokong Typescript(.ts) atau Languages ​​​​seperti TypeScript React (.tsx). Di bawah ialah dua coretan mencipta komponen React menggunakan TypeScript.

• Eksport React secara lalai:

• Eksport Komponen React:

Ciri Bahasa Vue (Volar)

Secara lalai, komponen Vue kami kelihatan seperti ini:

Gunakan pemalam ini untuk mendapatkan penyerlahan sintaks yang cantik, semakan ralat dan pemformatan kod. Selain itu, ia menambahkan banyak arahan Vue dan pengendali acara untuk memberikan cadangan yang bagus semasa menaip.

volar ialah pemalam sokongan bahasa yang dibina khusus untuk Vue 3. Ia mengira segala-galanya atas permintaan berdasarkan @vue/reactivity untuk mencapai prestasi tahap perkhidmatan bahasa TypeScript asli.

Apabila Vue 3 + TypeScript menjadi semakin popular, Vetur (sambungan Kod VS rasmi untuk Vue) mula menghadapi masalah, seperti penggunaan CPU yang tinggi apabila menggunakan Vue dengan TypeScript, atau tidak menyokong Vue 3 The new <script setup></script> sintaks. Volar menyelesaikan masalah Vetur dan memberikan pengalaman pembangunan terbaik untuk pengguna Vue 3 + TypeScript. Ia menyediakan sokongan bahasa penuh untuk Vue 3, termasuk sintaks ware (SFC) standard Kumpulan Fail Tunggal dan tambahan terbaharunya <script setup></script>.

Snippet Vue 3

Pemalam ini mengandungi semua coretan kod yang sepadan dengan API Vue.js 2 dan Vue.js 3.

Vue VSCode Snippet

Pemalam ini menambahkan Vue 2 Snippet dan Vue 3 Snippet pada Visual Studio Code.

React Native Tools

Pelanjutan React Native Tools dibina oleh pasukan Microsoft dan menyediakan persekitaran pembangunan untuk projek React Native. Pemalam membolehkan anda menjalankan dan menyahpepijat kod dengan mudah pada simulator atau emulator yang berbeza, menjalankan perintah asli tindak balas dengan cepat daripada palet arahan tanpa perlu menjalankan perintah secara manual dalam terminal, dan menggunakan IntelliSense untuk menyemak imbas fungsi React Native, objek, parameter dan banyak lagi .

Coretan kod JavaScript (ES6)

Pemalam ini membolehkan anda menggunakan trengkas coretan sintaks ES6 yang dipratentukan, dengan itu meningkatkan pembangunan kecekapan . Pemalam Kod VS ini boleh disesuaikan kerana ia tidak khusus untuk mana-mana rangka kerja.

Git Integration

---

GitLens

Pemalam ini meningkatkan Git dalam Kod VS dan mengeluarkan data tersembunyi daripada setiap repositori. Anda boleh melihat dengan cepat siapa yang menulis kod, menavigasi dengan mudah dan meneroka repositori Git, mendapatkan cerapan dengan visualisasi yang kaya dan arahan perbandingan yang berkuasa dan melakukan lebih banyak lagi untuk membantu anda memahami kod anda dengan lebih baik.

Sejarah Git

Pemalam ini digunakan untuk melihat log Git dan sejarah fail serta membandingkan cawangan atau komit.

Git Graph

Git Graph plugin digunakan untuk melihat secara visual operasi Git repositori dan dengan mudah melaksanakan operasi Git daripada graf .

Analisis Data

---

Kos Import

Isu prestasi mungkin berlaku apabila mengimport berbilang pakej ke dalam projek Kos Import digunakan untuk melihat kos mengimport perpustakaan tertentu ke dalam projek. Plugin memaparkan saiz perpustakaan yang diimport, jika saiznya berwarna hijau bermakna perpustakaan itu kecil, manakala merah bermakna perpustakaan itu besar.

Masa Master

Metrik, cerapan dan penjejakan masa yang dijana secara automatik daripada aktiviti pengaturcaraan. Ia adalah projek sumber terbuka, bebas daripada persekitaran rangkaian, selamat dan ringan.

Kaunter Kod VS

Pemalam VS Code Counter digunakan untuk mengira bilangan baris kod projek memasang pemalam, klik kanan pada yang diperlukan Untuk mengira folder kod, pilih "Kira baris dalam direktori". .md format. Hasilnya akan memaparkan jumlah bilangan baris kod, bilangan baris fail dalam format berbeza, fungsi fail dengan laluan berbeza, dsb. Bilangan baris kod termasuk bilangan baris kod tulen, bilangan baris kosong dan bilangan baris ulasan.

Peningkatan fungsi

---

Tindakan Pendua

Semasa membangun, kami mungkin menghadapi situasi di mana kami perlu menyalin fail (komponen Secara lalai, anda mesti klik kanan fail dan klik Salin). Klik kanan folder yang anda ingin salin fail dan klik Tampal. Klik kanan fail sekali lagi dan namakannya semula.

Dengan pemalam ini, anda akan melihat pilihan "Fail atau direktori pendua" baharu apabila anda mengklik kanan pada fail. Klik padanya, masukkan nama baharu untuk fail tersebut dan tekan Enter.

npm Intellisense

Pemalam ini menyediakan autolengkap untuk modul npm dalam penyata import. Semua import modul npm dikendalikan secara automatik menggunakan sambungan ini.

Path intellisense

Pemalam ini digunakan untuk melengkapkan nama fail secara automatik. Apabila mengimport fail lain, anda boleh menggesa fail dan melengkapkan nama fail yang hendak diimport dengan cepat.

Auto Namakan Teg

Menggunakan pemalam ini, anda boleh menamakan semula permulaan teg HTML secara automatik apabila menamakannya semula. dan tag penutup. Elakkan ubah suai tag pembuka sahaja dan lupa untuk ubah suai tag penutup. Sambungan berfungsi dengan HTML, XML, PHP dan JavaScript.

Auto Close Tag

Biasanya apabila anda ingin menggunakan elemen HTML tertentu, anda perlu memasukkan teg pembuka dan penutup tag. Selepas menggunakan plugin ini, anda hanya perlu memasukkan tag pembuka dan ia akan menambah tag penutup secara automatik. Untuk pembangun Vue, ia juga menyokong nama jenis tersuai. Apabila anda memasukkan teg pembukaan komponen tersuai, teg penutup secara automatik akan ditambahkan.

CSS Peek

Menggunakan pemalam ini, anda boleh menavigasi dan mengedit helaian gaya luaran yang ditakrifkan terus daripada fail HTML dan JavaScript gaya. Ia menyediakan fungsi "Peek" Pilih nama kelas atau id dalam HTML dan tahan kekunci Ctrl + butang tetikus kiri untuk mengesan kedudukan CSS nama secara langsung.

Pemalam ini berfaedah untuk bekerja dengan helaian gaya CSS yang besar atau kompleks kerana ia membolehkan anda mencari dan mengedit gaya dengan cepat yang digunakan pada elemen tertentu tanpa perlu menyemak imbas berbilang fail atau mencari melalui sejumlah besar kod.

Previewer Regex

Previewer Regex digunakan untuk menguji ungkapan biasa. Apabila menulis ungkapan biasa, anda boleh terus menggunakan kekunci pintasan Ctrl+Alt+M (tetingkap) atau ⌥+⌘+M (Mac) untuk melancarkan tab di sebelah kanan editor, di mana anda boleh menulis beberapa ujian ungkapan biasa. Use case, selepas menulis, klik Test Regex... di atas ungkapan biasa, kemudian aksara yang sepadan pada halaman tab sebelah kanan akan diserlahkan:

Ejaan Kod Checker

Pemalam Pemeriksa Ejaan Kod boleh menyemak sama ada terdapat ralat dalam ejaan perkataan Peraturan semakan mengikut camelCase (ejaan huruf unta).

Pengindahan Pengaturcaraan

---

Serlahkan Teg Padanan

Apabila terdapat banyak teg HTML, kadangkala sukar untuk meletakkan teg penamat kepada teg permulaan yang sepadan dan sebaliknya. Dengan pemalam ini, apabila anda mengklik pada teg pembukaan, anda akan melihat teg penutup digariskan. Selain itu, ia menyerlahkan teg pembukaan dan penutup dalam pepohon kod. Jika mahu, anda boleh menyesuaikan gaya untuk menjadikan garis bawah lebih menonjol.

Selain itu, pemalam mempunyai beberapa arahan yang berguna, jadi apabila teg diklik, anda boleh menggunakan ctrl + shift + P untuk membuka panel arahan dan mencari "Serlahkan Teg Padanan" **, anda akan melihat dua arahan yang boleh digunakan dalam projek.

TODO Highlight

Jika anda ingin mengingatkan diri anda tentang perkara yang perlu diperhatikan atau perkara yang belum selesai dalam kod anda sebelum mengeluarkannya kepada pengeluaran , pemalam TODO Highlight VS Code akan sangat berguna. Pemalam menyerlahkan kata kunci tertentu seperti FIXME: dan TODO: dalam ulasan kod untuk mengingatkan anda tentang perkara yang perlu diperhatikan atau perkara yang belum dilakukan.

Selain itu, gunakan pintasan ctrl + shift + P untuk membuka palet arahan dan cari Todo Highlight Pilih Senaraikan anotasi yang Diserlahkan dan kemudian pilih Semua untuk menyenaraikan semua anotasi yang diserlahkan yang ditinggalkan dalam semua fail .

Komen yang lebih baik

Pemalam ini akan menambah warna yang berbeza pada jenis ulasan yang berbeza, menjadikannya lebih mudah untuk membezakan dan membantu kami dalam Cipta lebih banyak ulasan mesra pengguna dalam kod anda.

Colorize

Colorize akan menambah latar belakang pada kod warna yang sepadan dengan warna semasa kod. Ia menggambarkan warna CSS melalui pembolehubah CSS, pembolehubah prapemproses, warna hsl/hsla, warna penyemak imbas silang, latar belakang warna exa, rgb, rgba dan argb untuk membantu pembangun membezakan warna dengan cepat.

Pratonton imej

Dengan pemalam ini, apabila tetikus melayang di atas pautan imej, anda boleh pratonton imej dalam masa nyata, kecuali Selain itu, anda juga boleh melihat saiz dan resolusi imej.

CodeSnap

CodeSnap digunakan untuk tangkapan skrin dan berkongsi kod. Tangkapan skrin boleh diberi anotasi dengan teks atau bentuk dan dikongsi melalui pautan atau disertakan pada tapak web atau dokumen. Hanya gunakan ctrl + shift + P dan taip CodeSnap kemudian tekan enter dan tetingkap CodeSnap akan terbuka.

Ralat Lens

Error Lens ialah pemalam yang menyerlahkan pemeriksaan kod (ralat, amaran, isu sintaks) . Ralat Lens meningkatkan keupayaan diagnostik bahasa dengan menjadikan diagnostik lebih menonjol, menyerlahkan keseluruhan baris tempat diagnostik yang dijana oleh bahasa itu berlaku dan mencetak mesej diagnostik dalam talian dalam talian di lokasi baris kod. One Dark Pro

Dracula Official

---

Tema GitHub

Tema Musim Sejuk Akan Datang

Owl Malam

Monokai Pro

Satu Monokai

Teduhan Ungu

Ayu

vscode-icons

VSCode official icon library.

Tema Ikon Bahan

Pemalam ini menyediakan ikon untuk fail dan folder berdasarkan tema Reka Bentuk Bahan terkini. Ia membantu kami mengenal pasti fail dan menambah rupa tersuai pada editor.

Untuk pengetahuan lanjut tentang VSCode, sila lawati: tutorial asas vscode

!

Atas ialah kandungan terperinci [Organisasi dan perkongsian] Pemalam VSCode yang penting untuk bahagian hadapan pada tahun 2023. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!