Rumah >alat pembangunan >VSCode >Ringkasan pemalam VSCode biasa dan konfigurasi berguna yang mesti dibaca oleh orang baru bahagian hadapan pada tahun 2022

Ringkasan pemalam VSCode biasa dan konfigurasi berguna yang mesti dibaca oleh orang baru bahagian hadapan pada tahun 2022

青灯夜游
青灯夜游ke hadapan
2022-02-05 08:00:3413994semak imbas

Artikel ini meringkaskan dan berkongsi dengan anda beberapa VSCode pemalam yang biasa digunakan dan konfigurasi berguna (sangat terperinci yang mesti dibaca untuk orang baru bahagian hadapan).

Ringkasan pemalam VSCode biasa dan konfigurasi berguna yang mesti dibaca oleh orang baru bahagian hadapan pada tahun 2022

Saya telah belajar front-end selama lebih daripada setahun, dan vscode telah bersama saya sejak awal sebagai alat pembangunan utama. Daripada ini, saya juga telah berhubung dengan beberapa pelbagai pemalam dan beberapa konfigurasi. Dalam hal ini, saya ingin menulis artikel untuk memperkenalkan pemalam vscode dan beberapa kegunaan. Saya harap ia dapat memberi sedikit bantuan kepada rakan-rakan yang baru berjinak-jinak dengan pit front-end. Artikel ini sangat panjang saya harap pembaca dapat membacanya dengan sabar Anda pasti akan mendapat sesuatu selepas membacanya.

1. Disyorkan pemalam yang biasa digunakan untuk VSCode pada tahun 2022

Jika seorang pekerja ingin menjalankan tugasnya dengan baik, dia mesti mengasah terlebih dahulu alatannya. Artikel ini memperkenalkan beberapa pemalam peringkat permulaan bahagian hadapan Pengarang pemalam ini telah menggunakannya, membandingkannya dengan beberapa pemalam yang serupa dan mengesyorkannya berdasarkan sama ada pemalam itu diselenggara secara aktif. [Pembelajaran yang disyorkan: "tutorial pengenalan vskod"]

注意: Pemalam ini tertumpu terutamanya pada bahagian hadapan dan tidak melibatkan perkara seperti vue, react dan pemalam rangka kerja lain, tetapi juga jangan bercakap tentang c , python, dsb.

Senarai pemalam

  • Bahasa Cina (Ringkas) (简体中文)

  • Auto Namakan Teg

  • buka dalam penyemak imbas

  • Lebih Cantik - Pemformat kod

  • Pelayan Langsung

  • Path Intellisense

  • Pratonton imej

  • Pemeriksa Ejaan Kod

  • Komen yang Lebih Baik

  • Mudah KURANG

  • Sass

  • Penyusun Sass Langsung

  • Coretan Kod jQuery

  • coretan kod 14.JavaScript (ES6)

  • One Dark Pro

  • Tema Bahan

  • Tokyo Night

  • Tema Ikon Bahan

  • ikon vskod

01- Cadangan sambungan praktikal

1.Bahasa Cina (Mudah) (Bahasa Cina Ringkas)

  • Pek bahasa Cina (Mudah) untuk Kod VS
Ringkasan pemalam VSCode biasa dan konfigurasi berguna yang mesti dibaca oleh orang baru bahagian hadapan pada tahun 20222.Auto Namakan Teg

Ubah suai teg HTML/XML secara serentak

Ringkasan pemalam VSCode biasa dan konfigurasi berguna yang mesti dibaca oleh orang baru bahagian hadapan pada tahun 2022

3.buka dalam penyemak imbasRingkasan pemalam VSCode biasa dan konfigurasi berguna yang mesti dibaca oleh orang baru bahagian hadapan pada tahun 2022

menyediakan pilihan menu klik kanan untuk membuka fail html dalam penyemak imbas dengan satu klik.

Anda boleh memilih untuk membukanya dalam penyemak imbas lalai atau memilih penyemak imbas yang anda mahu gunakan

Ringkasan pemalam VSCode biasa dan konfigurasi berguna yang mesti dibaca oleh orang baru bahagian hadapan pada tahun 2022

4.Prettier - Pemformat kodRingkasan pemalam VSCode biasa dan konfigurasi berguna yang mesti dibaca oleh orang baru bahagian hadapan pada tahun 2022

Alat pemformatan kod bahagian hadapan paling popular

dalam tetapan Jika anda menyemak kotak semak Format semasa menyimpan, anda boleh

memformat fail selepas menyimpan Tidak kira betapa kucar-kacir anda menulisnya, kod akan menjadi kemas dan konsisten. Kami juga boleh mengkonfigurasi tetapan yang berkaitan mengikut keutamaan kami sendiri, seperti lekukan Untuk bahagian hadapan, disyorkan untuk mengesot mengikut dua unit seperti Ringkasan pemalam VSCode biasa dan konfigurasi berguna yang mesti dibaca oleh orang baru bahagian hadapan pada tahun 2022,

,

, dsb. ctrl shtmlcssjs

Ini ialah beberapa konfigurasi yang biasa digunakan, ingat untuk meletakkannya di dalam pendakap paling luar

Ringkasan pemalam VSCode biasa dan konfigurasi berguna yang mesti dibaca oleh orang baru bahagian hadapan pada tahun 2022

settings.json5

{
  "printWidth": 130,// 最大换行长度
  "tabWidth": 2, // 保存后缩进单位
    "[html][css][less][scss][javascript][typescript][json][jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",//设置prettier为默认格式化程序
    "editor.tabSize": 2 // 编辑时缩进单位
  },
}

Mulakan pelayan tempatan masa nyata

Pemalam yang sangat mudah digunakan, setiap masa anda menyimpan fail ke Penyemak imbas perlu dimuat semula untuk melihat perubahan terkini Dengan pemalam ini, anda boleh memantau perubahan fail dalam masa nyata dan memuat semula secara automatik. Saya amat berterima kasih kepada pengarang yang membangunkan pemalam ini.

Ringkasan pemalam VSCode biasa dan konfigurasi berguna yang mesti dibaca oleh orang baru bahagian hadapan pada tahun 2022

6.Path IntellisenseRingkasan pemalam VSCode biasa dan konfigurasi berguna yang mesti dibaca oleh orang baru bahagian hadapan pada tahun 2022

Penyelesaian laluan pintar

  • 之前这个插件好久都没人维护,但最近的一段时间,经常可以看到插件的更新,也对比了一些同类插件,这个插件还是很优秀的。

    Ringkasan pemalam VSCode biasa dan konfigurasi berguna yang mesti dibaca oleh orang baru bahagian hadapan pada tahun 2022

    7.Image preview

    • 鼠标悬停可以预览图片

    1Ringkasan pemalam VSCode biasa dan konfigurasi berguna yang mesti dibaca oleh orang baru bahagian hadapan pada tahun 2022

    鼠标悬停可以预览图片,显示图片的大小和尺寸。不仅仅在css中,也可以在jsvue等文件中预览哦,可以打开对应的文件夹和项目文件为位置,真的强烈推荐!

    1Ringkasan pemalam VSCode biasa dan konfigurasi berguna yang mesti dibaca oleh orang baru bahagian hadapan pada tahun 2022

    "gutterpreview.showImagePreviewOnGutter": false,// 关闭在行号中显示缩列图

    8.Code Spell Checker

    • 一个基本的拼写检查器,可以很好地与驼峰大小写代码配合使用。

    1Ringkasan pemalam VSCode biasa dan konfigurasi berguna yang mesti dibaca oleh orang baru bahagian hadapan pada tahun 2022

    1Ringkasan pemalam VSCode biasa dan konfigurasi berguna yang mesti dibaca oleh orang baru bahagian hadapan pada tahun 2022

    9.Better Comments

    • 写出更个性化的注释

    1Ringkasan pemalam VSCode biasa dan konfigurasi berguna yang mesti dibaca oleh orang baru bahagian hadapan pada tahun 2022

    1Ringkasan pemalam VSCode biasa dan konfigurasi berguna yang mesti dibaca oleh orang baru bahagian hadapan pada tahun 2022

    10.Easy LESS

    实时编译lesscss

    1Ringkasan pemalam VSCode biasa dan konfigurasi berguna yang mesti dibaca oleh orang baru bahagian hadapan pada tahun 2022

    11.Sass

    sass/scss文件必装的插件

    Ringkasan pemalam VSCode biasa dan konfigurasi berguna yang mesti dibaca oleh orang baru bahagian hadapan pada tahun 2022

    12.Live Sass Compiler

    实时编译sass/scsscss

    Ringkasan pemalam VSCode biasa dan konfigurasi berguna yang mesti dibaca oleh orang baru bahagian hadapan pada tahun 2022

    13.jQuery Code Snippets

    jquery代码提示

    2Ringkasan pemalam VSCode biasa dan konfigurasi berguna yang mesti dibaca oleh orang baru bahagian hadapan pada tahun 2022

    14.JavaScript (ES6) code snippets

    es6等代码块,语法提示

    2Ringkasan pemalam VSCode biasa dan konfigurasi berguna yang mesti dibaca oleh orang baru bahagian hadapan pada tahun 2022

    02-外观美化插件推荐

    1.主题插件

    • One Dark Pro  最受欢迎的暗黑主题

      Ringkasan pemalam VSCode biasa dan konfigurasi berguna yang mesti dibaca oleh orang baru bahagian hadapan pada tahun 2022

    • Material Theme  拥有非常多的主题,都很不错,也是有名的主题插件

      2Ringkasan pemalam VSCode biasa dan konfigurasi berguna yang mesti dibaca oleh orang baru bahagian hadapan pada tahun 2022

    • Tokyo Night     本人在用的一款主题,特别喜欢,不刺眼,色彩设计的很合理

      Ringkasan pemalam VSCode biasa dan konfigurasi berguna yang mesti dibaca oleh orang baru bahagian hadapan pada tahun 2022

    • ......

    2.文件图标

    • Material Icon Theme 拥有超多的文件图标,色彩饱和度高。

      2Ringkasan pemalam VSCode biasa dan konfigurasi berguna yang mesti dibaca oleh orang baru bahagian hadapan pada tahun 2022

    • vscode-icons   也是非常不错的文件图标,下载量很高

      2Ringkasan pemalam VSCode biasa dan konfigurasi berguna yang mesti dibaca oleh orang baru bahagian hadapan pada tahun 2022

    二、VSCode常用快捷键

    VSCode 内置很多快捷键,可以大大的提高我们的开发效率。注意:这个快捷键都是可以自定义的,这里我们主要说说一些好用的默认快捷键。

    这里推荐黑马前端pink老师 vscode快捷键-以及使用技巧  https://www.bilibili.com/read/cv9699783

    三、VSCode一些好用的配置

    01-彩虹括号

    以前我们实现彩虹括号可能会用上一个插件叫Bracket Pair Colorizer 2,但是会产生性能问题,着色慢。vscode在2021 年 8 月(1.60 版)开始内置了这个功能,随之到来的还有垂直连线,亲测,现在已经非常好用了,效果出色,并且所有颜色都是可主题化的,最多可以配置六种颜色。

    2Ringkasan pemalam VSCode biasa dan konfigurasi berguna yang mesti dibaca oleh orang baru bahagian hadapan pada tahun 2022

    在如下打开settings.json,记住放在最外层的大括号里。

    Ringkasan pemalam VSCode biasa dan konfigurasi berguna yang mesti dibaca oleh orang baru bahagian hadapan pada tahun 2022

    Ringkasan pemalam VSCode biasa dan konfigurasi berguna yang mesti dibaca oleh orang baru bahagian hadapan pada tahun 2022

    这是我认为比较好的配置,详细的配置可以参考vscode官方文档:

    https://code.visualstudio.com/updates/v1_60#_high-performance-bracket-pair-colorization

     "editor.bracketPairColorization.enabled": true,
     "editor.guides.bracketPairs": "active",

    02-javaScript参数名称提示

    vscode在2021 年 8 月(1.60 版)中加入**JavaScript/TypeScript 嵌入提示**- 参数名称和类型的内联提示等,此设置不会自动打开,也就是说也是需要我们手动去配置的。总所周知,javaScript是弱类型语言,这些提示可以简单的帮助我们做一些错误检查,同时也让代码更直观、好看。

    3Ringkasan pemalam VSCode biasa dan konfigurasi berguna yang mesti dibaca oleh orang baru bahagian hadapan pada tahun 2022

    这是我的一些配置,详细的配置说明可以参考vscode官方文档:

    https://code.visualstudio.com/updates/v1_60#_inlay-hints-for-javascript-and-typescript

      "javascript.inlayHints.parameterNames.enabled": "all",
      "javascript.inlayHints.variableTypes.enabled": false,

    至此,本文结束。创作不易,本人第一次写博客,如果本篇文章对你有所帮助,希望可以点个赞,给个关注。

    更多关于VSCode的相关知识,请访问:vscode教程!!

Atas ialah kandungan terperinci Ringkasan pemalam VSCode biasa dan konfigurasi berguna yang mesti dibaca oleh orang baru bahagian hadapan pada tahun 2022. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Artikel ini dikembalikan pada:juejin.cn. Jika ada pelanggaran, sila hubungi admin@php.cn Padam