美文网首页
vscode(通用+laravel)必备插件,美化、炫酷、实用-

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

作者: elileo | 来源:发表于2023-07-15 16:49 被阅读0次

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

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

    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 扩展

    相关文章

      网友评论

          本文标题:vscode(通用+laravel)必备插件,美化、炫酷、实用-

          本文链接:https://www.haomeiwen.com/subject/chxiudtx.html