8个顶级 VSCode 扩展插件
微软的 VS (Visual Studio) Code 是一个免费的开源代码编辑器,最近越来越受欢迎。它非常轻巧、灵活,同时也提供了很多强大的功能。它支持绝大多数流行的编程语言,包括PHP、JavaScript、C++ 等。
VS Code 是跨平台的。它不仅能用于 Windows 平台,同时也提供 Linux 和 Mac 版本。下载地址:https://code.visualstudio.com/。
但也许最酷的是 VS Code 提供了规模超大的扩展插件,在扩展 商店 有大量的免费扩展可用于支持新语言、调试代码或添加各种其他自定义功能。你可以灵活的配置自己的编辑器,更好地满足日常开发的需要。
下面将给你介绍一些适合前端的顶级 VS Code 扩展插件。
Git增强:GitLens
虽然Git功能已内置于 VS Code 中,但 GitLens 能够提供更多的版本控制功能来“增强”你的编辑器。它提供了对代码的深入分析功能,可以向你显示更改时间以及更改后的代码。你甚至可以比较不同的分支、标签和提交。总的来说,这个扩展插件会让你拥有全新的视觉感受。
更多详情:https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
语法高亮:Beautify
你是否非常依赖语法高亮显示?如果是的话,Beautify 正是你需要的。它利用了 VS Code 中已有的 Online JavaScript Beautifier,允许你轻松更改其样式。这意味着你可以根据内容设置缩进、换行和其他细节。
更多详情:https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify
代码检查:ESLint
JavaScript 可能很难调试。但 ESLint 扩展可以使这个过程更容易。它能够在执行代码之前帮你指出其中潜在的问题。更强大的是它允许你创建自己的 linting 规则。
更多详情:https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
对于在运行时期间对代码进行调试的开发人员,Debugger for Chrome 将帮你更好的完成工作。它有许多方便的功能,包括在代码、watches 和控制台中设置断点的功能。另外你可以在 VS Code 中运行Chrome实例,或把调试器附加到单独运行的浏览器实例。
更多信息:https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
环境增强:React Native Tools
React 是最引人注目的JS库之一 —— 以至于新的 WordPress 块编辑器(又名 Gutenberg)是基于它建立的。如果你是众多的 React 程序员之一,那么React Native Tools是必不可少的扩展。它增加了运行 react-native
命令的功能,还能帮助你调试自己的代码。
更多信息:https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native
界面主题:One Dark Pro
在敲代码时,有一个醒目且养眼的界面主题会很有帮助。毕竟编码过程可以持续好几个小时。 One Dark Pro 把Atom 编辑器中流行的 “One Dark” 主题带到了 VS Code。
更多信息:https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme
Bracket Pair Colorizer 2 是一个简单的扩展,可以使代码更容易阅读。它可以对匹配括号的对代码着色,使你可以非常直观地确定函数的开始和结束位置。还可以选择要使用的颜色。
更多信息:https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2
视觉增强:vscode-icons
也许 vscode-icons 是 VS Code 最有效的视觉调整扩展之一。它能够处理你项目中平淡的文件列表,并添加丰富多彩、表示特定语言的图标。这样可以很容易地让你知道代码文件的类型。能够给工作区添加个性化设置是非常受欢迎的功能。
更多信息:https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons
按自己的方式编写代码
VS Code 提供的扩展插件数量惊人,这使其成极具吸引力的编辑器。你可以自由的进行设置,来匹配自己使用的语言和设置喜欢的工作区视觉效果。
此外,它还提供了企业和开源文化的有趣组合。 VS Code 得到了微软的支持,能够确保未来会得到更好的维护。开源社区围绕软件创建了一个欣欣向荣的生态系统,可以称作是企业与开源文化相结合的典范。
原文地址:https://1stwebdesigner.com/top-free-extensions-for-vs-code/
为了保证的可读性,本文采用意译而非直译。
推荐教程:vscode入门教程
Atas ialah kandungan terperinci 8个顶级 VSCode 扩展插件. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas



Mula-mula, buka perisian vscode pada komputer, klik ikon [Sambungan] di sebelah kiri, seperti yang ditunjukkan dalam ① dalam rajah Kemudian, masukkan [pemeriksa pejabat] dalam kotak carian antara muka sambungan, seperti yang ditunjukkan dalam ② dalam rajah . Kemudian, daripada carian Pilih [officeviewer] untuk memasang dalam hasil, seperti yang ditunjukkan dalam ③ dalam rajah Akhir sekali, buka fail, seperti docx, pdf, dsb., seperti yang ditunjukkan di bawah

1. Pertama, selepas membuka antara muka, klik menu fail di sudut kiri atas 2. Kemudian, klik butang tetapan dalam lajur pilihan 3. Kemudian, dalam halaman tetapan yang melompat, cari bahagian kemas kini. Akhir sekali, klik tetikus untuk menyemak dan mendayakannya Muat turun dan pasang butang versi VSCode baharu di latar belakang pada Windows dan mulakan semula program.

1. Mula-mula, buka perisian vscode, klik ikon explorer, dan cari tetingkap ruang kerja 2. Kemudian, klik menu fail di sudut kiri atas dan cari pilihan tambah folder ke ruang kerja 3. Akhir sekali, cari lokasi folder dalam cakera tempatan , klik butang tambah

1. Mula-mula, buka pilihan tetapan dalam menu tetapan 2. Kemudian, cari lajur terminal dalam halaman yang biasa digunakan 3. Akhir sekali, nyahtanda butang usewslprofiles di sebelah kanan lajur.

1. Mula-mula, selepas membuka antara muka, klik antara muka ruang kerja 2. Kemudian, dalam panel penyuntingan terbuka, klik menu Fail 3. Kemudian, klik butang Tetapan di bawah lajur Keutamaan 4. Akhir sekali, klik tetikus untuk menyemak CursorSmoothCaretAnimation butang dan simpan Hanya tetapkannya

1. Pertama, selepas membuka tetingkap penyuntingan, klik ikon konfigurasi di sudut kiri bawah 2. Kemudian, klik butang Urus Amanah Ruang Kerja dalam submenu yang terbuka 3. Kemudian, cari halaman dalam tetingkap penyuntingan. Akhir sekali, mengikut pejabat anda Hanya semak arahan yang berkaitan jika diperlukan

1. Pertama, klik untuk membuka pilihan tetapan dalam menu Lagi 2. Kemudian, cari lajur terminal di bawah bahagian Ciri 3. Akhir sekali, di sebelah kanan lajur, klik butang dayakan animasi dengan tetikus dan simpan tetapan.

1. Selepas membuka antara muka, klik butang sambungan di penjuru kiri sebelah bawah 2. Cari pemalam ikon vscode di gedung sambungan dan pasangkannya 3. Kemudian klik butang pilihan dalam menu fail di sudut kiri atas untuk mencari pilihan tema ikon fail 4. Cari yang baru dipasang Hanya tetapkan pemalam
