当前位置: 首页>后端>正文

vscode(通用+laravel)必备插件,美化、炫酷、实用-留着防丢

本篇文章只推荐看起来不错的插件,并不详细介绍插件的使用方法,插件的具体使用方法可以单独对其进行百度搜索。
当然,有啥问题也可以在下面评论,但我觉得可以百度的地方,尽量还是手动百度比较更容易解决问题...

——通用系列(适用于任何环境)——

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是一个在你编程时持续夸你写的牛逼的扩展,可以根据代码关键字播放贴近代码意义的真人语音。

使用方法(来自官方):

  1. 在 VSCode 的菜单栏中找到 查看 - 命令面板,或使用快捷键 Ctrl + Shift + P(MacOS Command + Shift + P)呼出 命令面板
  2. 命令面板 中输入 > Enable Rainbow Fart 并回车。
  3. 此时应该会弹出一个消息通知,点击通知上的 Open 按钮。
  4. 在打开的页面上点击 授权
  5. 享受编程吧!请尝试在 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 (视图)文件。这可以节省你不少的时间!

你可以使用 CtrlAlt + 点击跳转到第一个匹配的 Blade 视图文件:

有关更多信息,请务必查看此处的文档:

laravel 的 VSCode 扩展

8. DotENV 语法高亮

这个很简单,但是很方便。这个 DotENV VS Code 扩展用于突出显示 .env 文件的语法,这对于发现一些问题非常方便.

有关更多信息,请务必查看此处的文档:

laravel 的 VSCode 扩展


https://www.xamrdz.com/backend/35r1938405.html

相关文章: