Cara Mengubah VSCode Menjadi Editor Penurunan Nilai Tertinggi

Cara Mengubah VSCode Menjadi Editor Penurunan Nilai Tertinggi

Jika anda menulis untuk web, anda mungkin mahu melihat penurunan harga. Terdapat banyak aplikasi Markdown yang memenuhi keperluan penulis web. Tetapi editor kod percuma seperti Kod Visual Studio Microsoft (VSCode) boleh menjadi lebih berkuasa.





VSCode memahami Markdown dan mempunyai alatan terbina dalam untuk melihatnya dalam HTML. Walau bagaimanapun, anda boleh menambah fungsi pemproses kata seperti kiraan perkataan dan penyemak ejaan. Anda juga mungkin mahu mendayakan penyesuaian khusus tapak web untuk pratonton.



MAKEUSEOF VIDEO OF THE DAY

Akhir sekali, keupayaan untuk menyalin Markdown sebagai HTML supaya anda boleh menampalnya dengan bersih ke dalam Sistem Pengurusan Kandungan (CMS) adalah satu kemestian.





Muat turun dan Pasang VSCode

Untuk bermula, muat turun sama ada VSCode atau VSCodium alternatif sumber terbukanya. Versi setiap satu tersedia untuk semua sistem pengendalian desktop utama.

Sebaik sahaja anda telah memuat turun dan memasang VSCode , jalankan aplikasi untuk bermula.



Skrin alu-aluan lalai VSCode.

Pasang Sambungan Kiraan Kata

Mulakan dengan menambah pembilang perkataan. Terdapat banyak sambungan tersedia yang mengendalikan perkara ini. Yang paling membezakan antara perkataan sebenar dan kod atau nama fail ialah sambungan Kaunter Kata Microsoft sendiri.

Muat turun: Bilangan Perkataan Sambungan VSCode (Percuma)



  1. Klik pada Muat Turun Sambungan bawah Sumber di anak tetingkap kanan bawah.
  2. Setelah dimuat turun, tukar kepada VSCode.
  3. Klik pada ikon gear di sudut kiri bawah antara muka.
  4. Klik pada Sambungan .
  5. Klik elipsis ( ... ) berhampiran bahagian atas anak tetingkap Sambungan.
  6. klik Pasang daripada VSIX . ​​​​VSCode dengan sambungan Word Count oleh Microsoft ditunjukkan mengesan bilangan perkataan dalam dokumen sampel.
  7. Pilih yang ms-vscode.wordcount-*.vsix fail yang baru anda muat turun.

The Bilangan Perkataan sambungan kini perlu dipasang. Ujinya dengan membuka fail Markdown baharu dan menaip. Anda kini sepatutnya melihat pembilang perkataan di bahagian bawah sebelah kiri antara muka:

​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​Dibuka dalam VSCode dengan salah ejaan yang dikesan oleh salah ejaan yang dikesan oleh garis bawah berlekuk biru lembut.

Pasang Sambungan Semak Ejaan

Anda juga perlu menambah fungsi semakan ejaan. Seperti pembilang perkataan, terdapat banyak sambungan yang mengendalikan semakan ejaan. Yang paling popular ialah Semakan Ejaan Kod oleh Perisian Street Side kerana ia tersedia dalam banyak bahasa.



Muat turun: Semakan Ejaan Kod Sambungan VSCode (Percuma)

  1. Ikuti langkah 1 hingga 6 dari bahagian di atas.
  2. Pilih yang streetsidesoftware.code-spell-checker-*.vsix fail yang baru anda muat turun.

The Semakan Ejaan Kod sambungan kini perlu dipasang. Ujinya dengan membuka fail Markdown baharu dan menaip perkataan yang salah eja.

​​​Sebelah kanan bawah bar status VSCode dengan penunjuk menunjukkan empat ralat ejaan.

Anda sepatutnya melihat garis berlekuk biru di bawah perkataan tersebut bersama-sama dengan kiraan ralat di bahagian bawah sebelah kanan antara muka:

Fail VSCode settings.json dibuka dengan kod tersuai ditambah.

Sesuaikan Squiggle Ralat

Isu terbesar dengan sambungan Semak Ejaan ini ialah warna biru lemah yang digunakan untuk coretan yang mengenal pasti ralat. Ia cenderung untuk digabungkan dengan latar belakang tema gelap dan digunakan semula untuk elemen penurunan harga yang lain.

cara mengurangkan penggunaan ram chrome google

Anda boleh cuba menukarnya kepada warna merah tebal seperti yang anda jangkakan untuk lihat dalam pemproses perkataan:

  1. Klik pada ikon gear di sudut kiri bawah antara muka.
  2. Klik pada tetapan .
  3. Klik pada Meja kerja , kemudian Penampilan .
  4. Tatal ke bawah ke Penyesuaian Warna : Dokumen penurunan harga dibuka dalam VSCode dengan salah ejaan ketara yang dikesan oleh garis bawah berlekuk merah yang kuat.
  5. klik Edit dalam settings.json .
  6. Tampalkan kod berikut ke dalam editor yang dibuka dalam tab baharu:
    "editorInfo.foreground": "#ff0000"
    Dokumen penurunan harga dibuka dalam VSCode dengan tiga ralat ejaan.
  7. dan simpan fail.

Sekarang jika anda salah mengeja perkataan, VSCode akan menghiasinya dengan coretan merah terang:

Dokumen HTML yang diformat dengan betul dibuka dalam VSCode.

Mengabaikan Positif Palsu

Penyemak ejaan mungkin tidak mengenali istilah khusus industri tertentu atau kata nama khas seperti nama syarikat. Dalam tangkapan skrin di atas, sebagai contoh, VSCode menyerlahkan singkatan 'distro' sebagai salah ejaan.

Untuk berhenti melihat perkataan ini sebagai ralat, anda perlu menambahkannya pada anda Tetapan Pengguna .

  1. Klik kanan pada perkataan yang anda mahu penyemak ejaan diabaikan.
  2. Tuding ke atas Ejaan dan pilih Tambahkan Perkataan pada Tetapan Pengguna . ​​​​Artikel ini sebagai fail penurunan nilai dibuka dalam VSCode dengan pratonton lalai.

Mulai sekarang, semakan ejaan tidak lagi akan mengenal pasti perkataan ini sebagai salah:

​​​​​​Tetapan VSCode > Sambungan > Markdown > Menu Markdown: Styles.

Pasang Copy Markdown sebagai Sambungan HTML

Seterusnya, pasangkan Copy Markdown sebagai sambungan HTML supaya anda boleh menyalin & menampal Markdown yang diformatkan.

Muat turun: Salin Markdown sebagai HTML Sambungan VSCode (Percuma)

  1. Ikuti langkah 1 hingga 6 daripada bahagian di atas.
  2. Pilih yang jerriepelser.copy-markdown-as-html-1.1.0.vsix fail yang baru anda muat turun.

Kini anda sepatutnya boleh menyalin Markdown daripada VSCode dan menampalnya ke dalam CMS sebagai HTML bersih. Untuk menguji ini:

  1. Pilih beberapa teks Markdown.
  2. Buka Palet Perintah di dalam Lihat menu, atau dengan menekan CTRL+Shift+P .
  3. pilih Markdown: Salin sebagai HTML : Artikel ini sebagai fail penurunan nilai dibuka dalam VSCode dengan pratonton disesuaikan agar kelihatan seperti MUO.
  4. Tampal Markdown yang disalin ke dalam fail HTML baharu.

Anda harus melihat bahawa Markdown yang disalin telah ditampal dengan betul sebagai HTML:

Skrin alu-aluan VSCode dalam tema cahaya.

Menyesuaikan Anak Tetingkap Pratonton

Secara lalai, anak tetingkap pratonton akan mempunyai gaya yang sama seperti tema VSCode semasa.

Penurunan harga artikel ini dibuka dalam VSCode menggunakan tema Office oleh huacat.

Walau bagaimanapun, anda mungkin mahu pratonton mencerminkan destinasi utama kandungan anda dengan lebih dekat. Anda boleh menyesuaikan anak tetingkap pratonton untuk menjadikan Markdown anda kelihatan seperti sudah berada di tapak web yang anda terbitkan.

Anda boleh menggunakan mana-mana laman web yang anda mahu; gaya berikut diambil daripada MUO. Cuma gunakan alat elemen periksa penyemak imbas anda untuk mencari fon dan pilih warna dari mana-mana laman web .

  1. Buat fail baharu dan namakannya seperti ' CustomStyles.css '
  2. Tampalkan contoh kod CSS berikut ke dalam fail:
    body { 
      background-color: #fff; 
      color: #2c2c2c; 
      font-family: Roboto; 
      font-size: 18px; 
      font-weight: 400; 
      line-height: 1.7em; 
      max-width: 750px; 
    } 
      
    h1 { 
      font-size: 38px; 
      font-weight: 800; 
    } 
      
    h2 { 
      font-size: 34px; 
      font-weight: 700; 
    } 
      
    h3 { 
      font-size: 24px; 
      font-weight: 700; 
    } 
      
    a { 
      border-bottom: 2px solid #bf0d0b; 
      color: #bf0d0b; 
      font-weight: 700; 
    } 
      
    a:hover { 
      color: #fff; 
      background: #bf0d0b; 
    } 
      
    strong { 
      font-weight: bold; 
    }
  3. dan simpan fail.
  4. Klik pada ikon gear di sudut kiri bawah antara muka.
  5. Klik pada tetapan .
  6. Klik pada Sambungan dan kemudian Penurunan harga .
  7. Tatal ke bawah ke Penurunan harga: Gaya dan klik Tambah Item .
  8. Masukkan laluan anda CustomStyles.css fail, contohnya:
    C:\Users\Adam\CustomStyles.css
    Penurunan harga artikel ini dibuka dalam VSCode menggunakan tema Bahan oleh Equinusocio.
  9. klik okey .

Sebaik sahaja anda membuat ini, anda sepatutnya mendapat anak tetingkap pratonton yang kelihatan seperti artikel ini.

Sekali lagi, saya mendapat nilai ini dengan menggunakan alat Inspect Element penyemak imbas saya pada MUO, tetapi anda perlu mencari nilai untuk tapak web destinasi anda sendiri.

Tema Editor

Tema VSCode lalai datang dalam kedua-dua gelap dan terang, dengan versi kontras tinggi setiap satu. Tetapi seperti mana-mana editor kod yang baik, ada satu tan tema pihak ketiga yang hebat tersedia .

Jika anda lebih suka rupa Pemproses Perkataan berbanding editor kod, saya mengesyorkan tema Office oleh huacat:

Jika anda lebih suka editor kod, tema biasa seperti Dracula, Gruvbox, Material (lihat tangkapan skrin di bawah) dan Nord semuanya tersedia daripada pasaran sambungan.

Untuk memasang tema baharu:

  1. Klik pada ikon gear di sudut kiri bawah antara muka.
  2. Klik pada Sambungan .
  3. Cari mana-mana tema yang disebutkan di atas atau hanya tapis kategori ke tema dan semak imbas apa yang tersedia.

Adakah VSCode Editor Penurunan Nilai Tertinggi?

Jadi, adakah VSCode editor Markdown muktamad untuk kandungan web? Di luar kotak, mungkin tidak. Tetapi ia boleh diperluaskan dengan apa sahaja.

Pembilang perkataan, penyemak ejaan, Salin Markdown sebagai HTML, penyesuaian pratonton dan tema hanya menconteng permukaan. Terdapat ekosistem yang penuh dengan sambungan yang tersedia untuk VSCode, dan anda bebas untuk menjadikannya milik anda sendiri.