首页 开发工具 VSCode 推荐二十七个vscode有用插件,一起安装吧!

推荐二十七个vscode有用插件,一起安装吧!

Apr 21, 2021 pm 06:26 PM
vscode

本篇文章给大家介绍一下vscode中有用的插件。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

推荐二十七个vscode有用插件,一起安装吧!

Python

提供了代码分析,高亮,规范化等很多基本功能

python

vscode-icons

各种漂亮图标

vscode-icons
点击这里设置图标

点击这里设置图标
然后选vscode-icons

选择 vscode-icons

 filesize

左下角显示文件大小的插件

filesize
filesize显示效果

Bracket Pair Colorizer

成对的彩色括号彩色括号

Settings Sync

可以同步 VS Code设置同步到 GitHub 账号,包括 setting 文件和插件设置等等,重新配置VS Code的时候只需同步一下即可。安装完成后,只需要新增一个Github token,添加后,剩下的根据个人喜好进行配置,其他的插件自动帮你完成。
Settings Sync
这里需要说一下的是很多不负责任的博文在选择 token权限的时候说让全选,其实是很危险的行为。我一开始也感觉哪里怪怪的,因为要安装的插件很多,也没有太细究,直到我需要在另一台电脑上同步VS Code 设置的时候,点开了 Setting Sync 的官网看了看才发现,哪里需要那么多权限,只需要一个权限就好。如下图
Setting Sync

Atom-Material
一款安卓风的颜色主题,推荐使用推荐的字体设置。

"editor.fontSize": 16, "editor.fontWeight": "400", "editor.lineHeight": 24, "editor.letterSpacing": 0.5

 Atom-Material
推荐设置的显示效果

设置后的显示效果

Path Autocomplete

自动感知目录下的文件,自己选择就好。

注意: VSCode本身也支持路径的感知,需要配置好用系统自带的还是用这个插件,否则,每个路径下的条目都会有两份。
Path Autocomplete

8. Import Cost

在行尾显示导入的包的大小

这个好像只支持JavaScript。
Import Cost

Indent-Rainbow

带颜色的缩进

Indent-Rainbow
缩进效果

锁紧效果

GitLens

能显示每一行代码的作者以及提交时间。

GitLens
效果

GitLens使用效果

Git history

Git 历史

Git History

Color Highlight

直观显示在 css/web 中定义的颜色

Color Hightlight

Quokka.js

实时执行 JavaScript 代码(做快速的 demo 很有用)

Quokkia.js

Code Runner

立刻运行代码

Code Runner

Vetur

Vue 工具插件

Vetur

Live server

实时显示网页情况

Live server

Python indent

自动纠正 Python 缩进

Python Indent

vscode-fileheader

头部注释添加/更新插件

vscode-fileheader

TODO Highlight

高亮显示备注中的 TODO 事项,推荐配合 第19个插件, Todo Tree 使用

TODO Highlght

Todo Tree

点击左侧栏“树”的logo,显示 TODOList 条目,点击相应的条目,可以打开文件并定位到 TODO 行。

Auto Close Tag

自动写关闭标签的插件

在这里插入图片描述

Auto Rename Tag

自动重命名关闭标签

Auto Rename Tag

Polacode

代码段生成图片

Polacode

Guides

比 VS Code自带的更好的参考线,可自定义

Guides

 Color Info

显示css中的颜色属性信息

Color Info

Regex Previewer

正则结果预览插件

Regex Previewer

Mithril Emmet

注意:其实vscode 内置了Emmet插件
高效编写 HTML、CSS 代码的插件,能快速输入大部分内容
 Mithril Emmet

比如,在编辑 HTML 文件时,输入tr*2>td*3,然后回车,就能快速生成一个两行三列的表格标签。

在这里插入图片描述
在这里插入图片描述

推荐学习:《vscode教程

以上是推荐二十七个vscode有用插件,一起安装吧!的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

vscode怎么定义头文件 vscode怎么定义头文件 Apr 15, 2025 pm 09:09 PM

如何使用 Visual Studio Code 定义头文件?创建头文件并使用 .h 或 .hpp 后缀命名在头文件中声明符号(例如类、函数、变量)使用 #include 指令在源文件中包含头文件编译程序,头文件将被包含并使声明的符号可用

vscode需要什么电脑配置 vscode需要什么电脑配置 Apr 15, 2025 pm 09:48 PM

VS Code 系统要求:操作系统:Windows 10 及以上、macOS 10.12 及以上、Linux 发行版处理器:最低 1.6 GHz,推荐 2.0 GHz 及以上内存:最低 512 MB,推荐 4 GB 及以上存储空间:最低 250 MB,推荐 1 GB 及以上其他要求:稳定网络连接,Xorg/Wayland(Linux)

vscode中文注释变成问号怎么解决 vscode中文注释变成问号怎么解决 Apr 15, 2025 pm 11:36 PM

解决 Visual Studio Code 中中文注释变为问号的方法:检查文件编码,确保为“UTF-8 without BOM”。更改字体为支持中文字符的字体,如“宋体”或“微软雅黑”。重新安装字体。启用 Unicode 支持。升级 VSCode,重启计算机,重新创建源文件。

VSCode怎么用 VSCode怎么用 Apr 15, 2025 pm 11:21 PM

Visual Studio Code (VSCode) 是一款跨平台、开源且免费的代码编辑器,由微软开发。它以轻量、可扩展性和对众多编程语言的支持而著称。要安装 VSCode,请访问官方网站下载并运行安装程序。使用 VSCode 时,可以创建新项目、编辑代码、调试代码、导航项目、扩展 VSCode 和管理设置。VSCode 适用于 Windows、macOS 和 Linux,支持多种编程语言,并通过 Marketplace 提供各种扩展。它的优势包括轻量、可扩展性、广泛的语言支持、丰富的功能和版

vscode终端常用命令 vscode终端常用命令 Apr 15, 2025 pm 10:06 PM

VS Code 终端常用命令包括:清除终端屏幕(clear)列出当前目录文件(ls)更改当前工作目录(cd)打印当前工作目录路径(pwd)创建新目录(mkdir)删除空目录(rmdir)创建新文件(touch)删除文件或目录(rm)复制文件或目录(cp)移动或重命名文件或目录(mv)显示文件内容(cat)查看文件内容并滚动(less)查看文件内容只能向下滚动(more)显示文件前几行(head)

vscode终端使用教程 vscode终端使用教程 Apr 15, 2025 pm 10:09 PM

vscode 内置终端是一个开发工具,允许在编辑器内运行命令和脚本,以简化开发流程。如何使用 vscode 终端:通过快捷键 (Ctrl/Cmd ) 打开终端。输入命令或运行脚本。使用热键 (如 Ctrl L 清除终端)。更改工作目录 (如 cd 命令)。高级功能包括调试模式、代码片段自动补全和交互式命令历史。

vscode上一步下一步快捷键 vscode上一步下一步快捷键 Apr 15, 2025 pm 10:51 PM

VS Code 一步/下一步快捷键的使用方法:一步(向后):Windows/Linux:Ctrl ←;macOS:Cmd ←下一步(向前):Windows/Linux:Ctrl →;macOS:Cmd →

vscode怎么切换中文模式 vscode怎么切换中文模式 Apr 15, 2025 pm 11:39 PM

VS Code 切换中文模式的操作步骤:打开设置界面(Windows/Linux:Ctrl ,,macOS:Cmd ,)搜索 "Editor: Language" 设置在下拉菜单中选择 "中文"保存设置重启 VS Code

See all articles