Rumah alat pembangunan VSCode 8个顶级 VSCode 扩展插件

8个顶级 VSCode 扩展插件

Dec 09, 2019 am 09:47 AM
vscode pemalam

微软的 VS (Visual Studio) Code 是一个免费的开源代码编辑器,最近越来越受欢迎。它非常轻巧、灵活,同时也提供了很多强大的功能。它支持绝大多数流行的编程语言,包括PHP、JavaScript、C++ 等。

8个顶级 VSCode 扩展插件

VS Code 是跨平台的。它不仅能用于 Windows 平台,同时也提供 Linux 和 Mac 版本。下载地址:https://code.visualstudio.com/。

但也许最酷的是 VS Code 提供了规模超大的扩展插件,在扩展 商店 有大量的免费扩展可用于支持新语言、调试代码或添加各种其他自定义功能。你可以灵活的配置自己的编辑器,更好地满足日常开发的需要。

下面将给你介绍一些适合前端的顶级 VS Code 扩展插件。

Git增强:GitLens

1.png

虽然Git功能已内置于 VS Code 中,但 GitLens 能够提供更多的版本控制功能来“增强”你的编辑器。它提供了对代码的深入分析功能,可以向你显示更改时间以及更改后的代码。你甚至可以比较不同的分支、标签和提交。总的来说,这个扩展插件会让你拥有全新的视觉感受。

更多详情:https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

语法高亮:Beautify

2.png

你是否非常依赖语法高亮显示?如果是的话,Beautify 正是你需要的。它利用了 VS Code 中已有的 Online JavaScript Beautifier,允许你轻松更改其样式。这意味着你可以根据内容设置缩进、换行和其他细节。

更多详情:https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify

代码检查:ESLint

3.png

JavaScript 可能很难调试。但 ESLint 扩展可以使这个过程更容易。它能够在执行代码之前帮你指出其中潜在的问题。更强大的是它允许你创建自己的 linting 规则。

更多详情:https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

调试器:Debugger for Chrome

4.png

对于在运行时期间对代码进行调试的开发人员,Debugger for Chrome 将帮你更好的完成工作。它有许多方便的功能,包括在代码、watches 和控制台中设置断点的功能。另外你可以在 VS Code 中运行Chrome实例,或把调试器附加到单独运行的浏览器实例。

更多信息:https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

环境增强:React Native Tools

5.png

React  是最引人注目的JS库之一 —— 以至于新的 WordPress 块编辑器(又名 Gutenberg)是基于它建立的。如果你是众多的 React 程序员之一,那么React Native Tools是必不可少的扩展。它增加了运行 react-native 命令的功能,还能帮助你调试自己的代码。

更多信息:https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native

界面主题:One Dark Pro

6.png

在敲代码时,有一个醒目且养眼的界面主题会很有帮助。毕竟编码过程可以持续好几个小时。 One Dark Pro 把Atom 编辑器中流行的 “One Dark” 主题带到了 VS Code。

更多信息:https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme

代码增强:Bracket Pair Colorizer 2

7.png

Bracket Pair Colorizer 2 是一个简单的扩展,可以使代码更容易阅读。它可以对匹配括号的对代码着色,使你可以非常直观地确定函数的开始和结束位置。还可以选择要使用的颜色。

更多信息:https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

视觉增强:vscode-icons

8.png

也许 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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk melihat dokumen perkataan dalam vscode Bagaimana untuk melihat dokumen perkataan dalam vscode Bagaimana untuk melihat dokumen perkataan dalam vscode Bagaimana untuk melihat dokumen perkataan dalam vscode May 09, 2024 am 09:37 AM

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

Bagaimana untuk membolehkan kemas kini latar belakang dalam vscode Bagaimana untuk membolehkan kemas kini latar belakang dalam vscode Bagaimana untuk membolehkan kemas kini latar belakang dalam vscode Bagaimana untuk membolehkan kemas kini latar belakang dalam vscode May 09, 2024 am 09:52 AM

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.

Bagaimana untuk menambah fail ke vscode ruang kerja Bagaimana untuk menambah fail ke vscode ruang kerja Bagaimana untuk menambah fail ke vscode ruang kerja Bagaimana untuk menambah fail ke vscode ruang kerja May 09, 2024 am 09:43 AM

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

Bagaimana untuk melumpuhkan fail konfigurasi wsl dalam vscode Bagaimana untuk melumpuhkan fail konfigurasi wsl dalam vscode Bagaimana untuk melumpuhkan fail konfigurasi wsl dalam vscode Bagaimana untuk melumpuhkan fail konfigurasi wsl dalam vscode May 09, 2024 am 10:30 AM

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.

Bagaimana untuk menetapkan sisipan lancar animasi dalam tutorial VScode VScode untuk menetapkan sisipan lancar animasi Bagaimana untuk menetapkan sisipan lancar animasi dalam tutorial VScode VScode untuk menetapkan sisipan lancar animasi May 09, 2024 am 09:49 AM

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

Cara membuka kebenaran amanah ruang kerja dalam kaedah Vscode Vscode untuk membuka kebenaran amanah ruang kerja Cara membuka kebenaran amanah ruang kerja dalam kaedah Vscode Vscode untuk membuka kebenaran amanah ruang kerja May 09, 2024 am 10:34 AM

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

Cara membuka animasi dalam Vscode Pengenalan kepada kaedah membuka animasi dalam Vscode Cara membuka animasi dalam Vscode Pengenalan kepada kaedah membuka animasi dalam Vscode May 09, 2024 am 10:28 AM

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.

Bagaimana untuk menetapkan tema ikon fail dalam vscode_Cara untuk menetapkan tema ikon fail dalam vscode Bagaimana untuk menetapkan tema ikon fail dalam vscode_Cara untuk menetapkan tema ikon fail dalam vscode May 09, 2024 am 10:00 AM

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

See all articles