本篇文章只推荐看起来不错的插件,并不详细介绍插件的使用方法,插件的具体使用方法可以单独对其进行百度搜索。
当然,有啥问题也可以在下面评论,但我觉得可以百度的地方,尽量还是手动百度比较更容易解决问题...
——通用系列(适用于任何环境)——
1、Bracket Pair Colorizer:
给匹配的括号着色
2、Chinese (Simplified) Language Pack for Visual Studio Code:
适用于 VS Code 的中文(简体)语言包
3、Code Spell Checker
拼写检查器。比如 banana 单词写错成 banane ,会提示你是否修改成 banana ,也可以将 banane 添加至检查器的字典中。
4、Indent-Rainbow
让缩进带有颜色
5、Material Icon Theme
好看的文件图标
6、Path Intellisense
自动完成文件名
[图片上传失败...(image-61ba79-1689497201499)]
7、Power Mode
不多说,看图,非常炫酷,这会让你成为你公司最靓的程序仔。
注:若觉得卡顿,可以设置把抖动去掉就不卡了。
8、TODO Highlight
TODO高亮显示
9、Trailing Spaces
突出显示尾随空格,让你的“空格”型强迫症 显示呈现。
10、Todo Tree
在树状视图中显示TODO
11、Prettier - Code formatter
更优雅的代码格式化。vscode 里比较优秀的一个格式化插件。
12、JSON5 syntax
让json也能写注释。需要把文件格式改为 .json5 。
13、Code Runner
这个插件可以直接运行所选中的代码。
[图片上传失败...(image-beede9-1689497201499)]
假设要对某段代码片段进行test,我需要尝试当前环境下的语言(.dart)的输出语句是否是print("")
,无论你在 .dart 文件的哪个位置写、无论你的其他地方的代码是否出错,只要选中代码的范围,右键 Run Code ,都能给你执行。
例如:只要选中这些字符,右键run code
,就能直接输出结果。
void main(List<String> args) {
print("object");
}
[图片上传失败...(image-8cb97a-1689497201498)]
[图片上传失败...(image-a1061e-1689497201498)]
注意会每次执行run code
,都会生成一个新文件tempCodeRunnerFile.xxx
。
14、A-super-translate
划词翻译。鼠标停留选中几秒就会查看翻译内容。
15、filesize
在状态栏中显示当前文件大小。
[图片上传失败...(image-3872ed-1689497201498)]
16、TabNine
Al辅助代码补全神器。可以根据你写过的代码习惯,来给你匹配合适的字段。
例1:红色框框是当前代码的习惯,绿色框框则是自动匹配的。
[图片上传失败...(image-3e49db-1689497201498)]
例2:
[图片上传失败...(image-864b29-1689497201498)]
17、VS Code Counter
统计代码总行数、注释行数、空白行数,以及使用的语言。
使用方法:右键需要统计的文件夹—Count lines in directory
18、Rainbow Fart
官方概述:VSCode Rainbow Fart是一个在你编程时持续夸你写的牛逼的扩展,可以根据代码关键字播放贴近代码意义的真人语音。
使用方法(来自官方):
- 在 VSCode 的菜单栏中找到
查看 - 命令面板
,或使用快捷键Ctrl + Shift + P
(MacOSCommand + Shift + P
)呼出命令面板
。 - 在
命令面板
中输入> Enable Rainbow Fart
并回车。 - 此时应该会弹出一个消息通知,点击通知上的
Open
按钮。 - 在打开的页面上点击
授权
。 - 享受编程吧!请尝试在 VSCode 中输入
function
关键字。
注意:网页页面必须保持打开状态才能在写代码时播放语音。
19、Better Comments
通过添加彩色注释来改进您的代码并使其更具吸引力。
[图片上传失败...(image-4e7c7c-1689497201498)]
20、Error Lens
将编辑器诊断出的警告、错误、语法问题(提示的波浪线)等,以用颜色填充行背景的方式突出提示,并将诊断信息显示在尾部。
21、Markdown Preview Enhanced
非常好用的 Markdown 预览插件,预览窗口内置于 vscode 中。
[图片上传失败...(image-cee04-1689497201498)]
22、Peacock
给不同的工作区设置不同的颜色。
这对前后端分离项目,或多项目需求的人来说非常好用。
注:选择颜色的时候按键盘上下可以预览。
22、会了吧
没错,名字就是“会了吧”。
打开源码可以自动分析所有包含的英语单词,并显示解释结果,还可以添加已经会的单词。
23、open in browser
用浏览器打开当前脚本文件。
待续...
https://zhuanlan.zhihu.com/p/112016680?utm_id=0
====laravel====
1. Laravel Blade 片段
Laravel Blade 片段 扩展为你的 VS Code编辑器添加了对 Laravel Blade 的语法高亮支持。【推荐学习:vscode教程、编程教学】
此扩展的一些主要功能是:
- Blade 语法高亮
- Blade 片段
- Emmet 在 Blade 模板中工作
- Blade 格式
为了确保扩展按预期工作,需要进行一些额外的配置。在 File
-> Preferences
-> Settings
并将以下内容添加到你的 settings.json
:
`"emmet.triggerExpansionOnTab"``: true,``"blade.format.enable"``: true,``"[blade]"``: {`
`"editor.autoClosingBrackets"``:` `"always"``},`
这将启用 Emmet 标记的制表符完成,如果启用 blade 格式设置。
有关可用 Snippets 的更多信息,请务必查看文档:
laravel 的 VSCode 扩展
2. Laravel Snippets
这可能是我个人最喜欢的!这个 Laravel Snippets 扩展 为外观添加代码片段 Request::
, Route::
等。
一些受支持的片段前缀包括:
- 认证
- 广播
- 缓存
- 配置
- 控制台
- Cookie
- 加密
- 数据库
- 事件
- 视图
有关可用片段的更多信息,请务必查看此处的文档:
larave 的 VSCode 扩展
3. Laravel Blade 片段
当你试图在 Blade 视图中用 {{ }}
和你的整个行返回4个空格时,这不是很烦人吗?好吧,幸运的是, 这个 Laravel Blade 片段 解决了这个问题!
Laravel blade 片段扩展会自动为你的 blade 模板标记添加间距:
有关更多信息,请确保查看此处的文档:
laravel 的 VSCode 扩展
4. Laravel Artisan
我个人一直喜欢使用命令行,但我必须承认这个 Laravel Artisan 扩展太棒了!它允许你直接从 Visual Studio 代码中运行 Laravel Artisan 命令!
Some 的主要功能是:
- 创建控制器、迁移等文件。
- 运行你自己的自定义命令
- 管理你的数据库
- 清除缓存
- 生成密钥
- 查看所有应用程序路由
- 出于测试目的管理你的本地php服务器
有关详细信息,请务必查看此处的文档:
laravel 的 VSCode 扩展
5. Laravel 额外智能感知
这个 Laravel 额外智能感知 扩展为 VSCode 中的 Larave 提供自动补全。
这个扩展具有以下自动完成功能:
- 路由名称和路由参数
- 视图和变量
- 配置
- 翻译和转换参数
- Laravel Mix 函数
- 验证规则
- 查看部分和堆栈
- 环境
- 路由中间件
有关详细信息,请务必查看此处的文档:
laravel 的 VSCode 扩展
6. Laravel Goto 控制器
随着应用程序的增长,控制器的数量也在增长,因此在某些时候,你可能最终会拥有数百个控制器。汉斯找路可能会很乏味。
这正是Laravel-goto-controller VScode扩展所解决的问题。
这个扩展允许你按下 Alt
+ 点击路由文件中的控制器名称,而后它会引导你从路由到相应的控制器文件:
有关更多信息,请查看文档:
VSCode extensions for laravel
7. Laravel goto View
与 Laravel goto Controller extension 拓展很相似, Laravel goto View VScode extension 可以让你从 Controller (控制器)或者 Route (路由)前往 View (视图)文件。这可以节省你不少的时间!
你可以使用 Ctrl
或 Alt
+ 点击跳转到第一个匹配的 Blade 视图文件:
有关更多信息,请务必查看此处的文档:
laravel 的 VSCode 扩展
8. DotENV 语法高亮
这个很简单,但是很方便。这个 DotENV VS Code 扩展用于突出显示 .env
文件的语法,这对于发现一些问题非常方便.
有关更多信息,请务必查看此处的文档:
laravel 的 VSCode 扩展