Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan)

Artikel ini meringkaskan dan mengesyorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode Saya harap ia akan membantu semua orang!

Cadangkan gelombang pemalam penting untuk pembangunan bahagian hadapan, yang pastinya akan meningkatkan produktiviti anda sekeliling. [Pembelajaran yang disyorkan: "tutorial vskod"]

Syor komprehensif untuk pembangunan

Lompat laluan Alias

plug-in Name: Alias ​​​​path jump

Arahan penggunaan: Alias ​​​​path jump plug-in, menyokong sebarang projek,

Senario penggunaan: Bila anda sedang membangunkan halaman, anda ingin mengklik Apabila mengimport komponen melalui laluan alias (demo di bawah)

Arahan konfigurasi

• Hanya sesuaikan selepas memuat turun Hanya konfigurasikan beberapa laluan alias yang biasa digunakan

  • Klik kanan pemalam--"Tetapan Lanjutan--"Edit Pemetaan Laluan dalam settinas.json

  // 文件名别名跳转
    "alias-skip.mappings": {
      "~@/": "/src",
      "views": "/src/views",
      "assets": "/src/assets",
      "network": "/src/network",
      "common": "/src/common"
    },

  Salin selepas log masuk

Paparan kesan

Path alias smart prompt

• Nama pemalam: path-alias
• Senario: Apabila mengimport komponen, apabila menggunakan laluan alias tidak berguna (boleh digunakan pada masa yang sama dengan alias lompat laluan, tiada konflik)
• Tutorial penggunaan terperinci (sangat mudah)

Kesan dan fungsi pemasangan

inden-pelangi

• Nama pemalam: indent-rainbow
• Fungsi: Inden Pelangi

Pewarna Pasangan Kurungan 2

• Nama pemalam: Bracket Pair Colorizer 2
• Fungsi: Beri padanan kurungan () atau objek { }.. Tambahkan warna yang sepadan untuk membezakan

Auto Rename Tag

• Nama pemalam: Auto Rename Tag
• Fungsi : Namakan semula tag secara automatik

Pemeriksa Ejaan Kod

• Nama pemalam: Code Spell Checker
• Fungsi: Periksa sama ada perkataan itu dieja dengan salah (menyokong Bahasa Inggeris)

Pelari Kod

• Nama Pemalam: Code Runner
• Fungsi: Pelaksanaan satu klik pelbagai kod bahasa (biasa digunakan untuk ujian)

Penyahpepijat untuk Chrome

• Nama pemalam: Debugger for Chrome
• Fungsi: Hidup bahagian VSCode, kod nyahpepijat

Live ServerPP

• Nama pemalam: Live ServerPP
• Fungsi: Buka fail anda pada bahagian pelayan dan paparkan kod anda yang diubah suai dalam masa nyata
  • Menyokong perkhidmatan mesej websocket, yang boleh digunakan untuk menyahpepijat pelanggan websocket
  • Menyokong maya boleh atur cara fail, yang boleh digunakan untuk mensimulasikan antara muka API sebelah pelayan

Pratonton Svg

• Nama pemalam: Svg Preview
• Fungsi: Anda boleh memaparkan gambar SVG anda dan mengeditnya

Tabnine

• Nama pemalam: Tabnine
• Fungsi: Kod gesaan pintar, boleh meramalkan Gesaan untuk kod yang akan anda tulis

Penukar Rentetan Templat

• Nama pemalam: Template String Converter
• Fungsi: Masukkan $ dalam rentetan untuk mencetus dan menukar rentetan menjadi templat rentetan aksara

vskod-pigmen

• Nama pemalam: vscode-pigments
• fungsi : Pratonton masa nyata bagi warna yang ditetapkan

Petunjuk Parameter

• Nama pemalam: Parameter Hints
• Fungsi: Jenis dan mesej parameter fungsi gesaan

Quokka.js

• Nama pemalam : Quokka.js
• Penggunaan: Selepas memasang pemalam, ctrl shift pmasukkan Quokka  new JavaScr.. untuk menggunakan
• Fungsi: paparkan cetakan dalam masa nyata, dan terokai lebih banyak fungsi sendiri (biasa digunakan untuk ujian)

Serlahkan Tag Padanan

• Palam- dalam nama: Highlight Matching Tag
• Fungsi: Apabila kursor kekal pada teg, teg yang sepadan akan diserlahkan

Pemalam popular

• pada asasnya tersedia Pemasangan tidak akan diperkenalkan secara terperinci

Pemalam

• Bookmarks
  • Fungsi: Biasa digunakan untuk membaca kod sumber untuk menandakan baris, Lompat (tanda kod lompat cepat)
• ESLint
  • Fungsi: Semakan spesifikasi kod
• Prettier - Code formatter
  • Fungsi: Pengindahan kod, diformat secara automatik ke dalam format piawai
• Project Manager
  • Fungsi: Pemalam pengurusan projek, apabila membangunkan berbilang projek, Boleh melompat dengan pantas
• Path Intellisense
  • Ciri-ciri: Laluan pintar menggesa
• Image preview
  • Fungsi: Apabila laluan import ialah imej, anda boleh pratonton imej semasa
• GitLens
  • Fungsi: Fungsi git telah dipertingkatkan untuk menyokong paparan pengarang, masa pengubahsuaian, dsb.
• open in browser
  • Fungsi: Buka fail semasa dalam penyemak imbas

Vue Development Disyorkan

vue-component

• Nama pemalam: vue-component
• Fungsi: Masukkan nama komponen untuk mengimport komponen yang ditemui secara automatik, mengimport laluan dan komponen secara automatik
  • Selepas pemilihan , masukkan nama komponen secara automatik (termasuk atribut yang diperlukan), pernyataan import, atribut komponen

Vetur

• Nama pemalam: Vetur
• Diperlukan untuk membangunkan Vue

Vue 3 Snippet

• Nama pemalam: Vue 3 Snippets

• Keperluan asas: banyak Vue coretan kod, sangat mudah untuk pembangunan

Syor pembangunan React

React Style Helper

• Plug- dalam nama: React Style Helper
• Fungsi: Tulis gaya sebaris dengan lebih pantas dalam React dan berikan bantuan hebat untuk CSS, LESS, SASS dan fail gaya lain Fungsi pembangunan
  • Autolengkap
  • Lompat ke gaya dan lokasi definisi berubah
  • Buat gaya sebaris JSX/TSX
  • Pratonton gaya dan kandungan berubah

• Pelengkapan automatik gaya sebaris dan menyokong lonjakan dan pratonton pembolehubah SASS.

ES7 Reactsnippet

• Nama pemalam: ES7 React/Redux/React-Native/JS snippets
• Fungsi: Banyak React coretan kod, sangat mudah untuk pembangunan

komponen gaya vskod

• Nama pemalam: vscode-styled-components
• Fungsi: Semasa menulis gaya dalam JS fail, ada Petua perisikan

Kelas tema

Dracula Official

• Palam -dalam nama: vscode-styled-components

One Dark Pro

• Nama pemalam: One Dark Pro

ikon vskod

• Nama pemalam: vscode-icons
• VSCodeIkon Folder & Fail

Syor lain

• Pemalam berikut mungkin tidak biasa digunakan jika anda berminat, anda boleh mencubanya

Nilai Awal CSS

• Nama pemalam: vscode-icons
• Fungsi: Paparkan nilai awal setiap sifat CSS apabila kursor kekal pada sifat css

Lukisan cat

• Nama pemalam: Draw.io Integration

• Fungsi: Lukis gambar dalam VSCode dan sokong kerjasama berbilang orang untuk mengedit carta..

Pemalam Petua Pintar Echars

• Nama pemalam: echarts-vscode-extension

• Penggunaan: Selepas memasang pemalam, ctrl shift pmasukkan active Echars untuk membukanya Smart prompt

• fungsi: Gesa pelbagai Echar中Option atribut, sangat berkuasa

Pemalam terjemahan

• Pemalam nama: A-super-translate

• Penggunaan: Pilih baris, Ctrl Shift p untuk memasukkan terjemahan

  • Taip ctrl ` dan kemudian tekan ctrl 1 untuk menggantikan terus kawasan yang dipilih untuk terjemahan

• Fungsi: Terjemah bahagian ulasan dalam kod pengecaman tanpa mengganggu bacaan. Menyokong bahasa yang berbeza, komen satu baris dan berbilang baris,

  • menyokong rentetan pengguna dan terjemahan berubah-ubah, menyokong pemisahan sarung unta

Ringkasan (dengan gambar semua pemalam)

• Mengikut keperluan anda, anda hanya boleh memasang pemalam yang sepadan (jika anda memasang terlalu banyak pemalam, VSCode akan tersekat)
• Sudah tentu, konfigurasi komputer cukup berkuasa Apabila saya tidak mengatakan

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati. : Video Pengaturcaraan! !

Atas ialah kandungan terperinci Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!