PhpStorm用div包裹代码怎么弄?快捷操作一览

秋瑶姑娘_6378

秋瑶姑娘_6378

2026-11-15

194人浏览

原创

PhpStorm中用div包裹选中代码的快捷方式是Ctrl+Alt+T(Windows/Linux)或Cmd+Alt+T(macOS),触发Surround With功能后按D键即可;需确保文件类型为HTML/PHP/Blade且光标位于纯HTML区域,否则菜单无div选项。

phpstorm用div包裹代码怎么弄?快捷操作一览

PhpStorm 里用 div 包裹选中代码的快捷方式是 Ctrl+Alt+T(Windows/Linux)或 Cmd+Alt+T(macOS)

这个快捷键触发的是「Surround With」功能,不是专为 div 设计,但默认选项里就包含 div。选中任意 HTML 或 PHP 混合代码(比如一段 p、几行 echo、甚至 Blade 表达式),按快捷键后弹出菜单,直接按 D 就能套上

。

  • 如果没看到 div 选项,说明当前文件类型未被识别为 HTML/PHP/Blade —— 检查右下角状态栏的文件类型标识,点击切换成 HTML 或 PHP
  • 在纯 PHP 文件里(.php 后缀但内容全是 PHP 逻辑),Ctrl+Alt+T 默认不显示 HTML 标签选项;此时需先选中要包裹的字符串字面量(比如 "

    hello

    "
    ),再触发
  • 菜单里还有 Tag、PHP: echo、Blade: @section 等,不同上下文选项不同

怎么自定义添加常用标签(比如 section、article)到 Surround With 菜单

PhpStorm 不允许直接编辑内置 HTML 标签列表,但可以通过「Live Template」+「Surround With」联动实现:

  • 打开 Settings → Editor → Live Templates

  • 点击右上角 + → Template Group,新建组(如叫 html-surround)

  • 在该组内点 + → Live Template,Abbreviation 填 sect,Template text 填:

    <section>$SELECTION$</section>
  • 勾选 Reformat according to style 和 Shorten FQ names

  • 点击 Define,勾选 HTML 和 PHP

  • 回到代码,选中文本 → Ctrl+Alt+T → 选择刚建的 sect 模板即可

    btpanel phpsite 宝塔面板PHP网站
    btpanel phpsite 宝塔面板PHP网站

    宝塔面板 PHP 网站管理:站点创建、删除、启停、PHP 版本切换、域名管理、SSL证书管理、伪静态管理、数据库管理

    下载
  • Live Template 的 $SELECTION$ 是关键占位符,缺了它就无法包裹

  • 不要用 div 这种已内置的 abbreviation 冲突命名,否则可能覆盖默认行为

  • 模板定义后不会自动出现在 Ctrl+Alt+T 首屏,首次使用需按方向键或鼠标点一下

在 Blade 文件里用 div 包裹却插入了双大括号怎么办

这是常见误操作:Blade 模板中直接按 Ctrl+Alt+T → D,结果生成了:

@{{ <div>...</div> }}

而不是纯 HTML。根本原因是 PhpStorm 把当前上下文识别成了「Blade 表达式区域」,而非 HTML 区域。

  • 光标必须落在纯 HTML 区域(比如已有

    标签之间),不能在 @if、{{ $var }} 或 @endphp 后紧挨着的位置
  • 若已错插成 @{{}},删掉外层 @{{}} 即可,内容本身是合法 HTML,不会报错
  • 更稳妥的做法:先用 Ctrl+Shift+V 粘贴纯文本(绕过智能粘贴),再选中 → Ctrl+Alt+T → D

为什么有时 Ctrl+Alt+T 没反应或弹出空菜单

本质是作用域识别失败,和光标位置强相关:

  • 光标在注释里(// 或 )→ 不触发
  • 光标在字符串内部但未选中任何内容 → 弹出 PHP 相关模板(如 try-catch),无 HTML 选项
  • 文件编码不是 UTF-8(尤其含中文路径时)→ 功能可能静默失效,检查 File → File Encoding
  • 使用了第三方插件(如 Laravel Idea)覆盖了快捷键 → 在 Keymap 中搜索 Surround With 确认绑定是否被改写

实际项目里最常被忽略的,是文件类型识别和光标所处的具体语法区域——同一个 .blade.php 文件,@section('content') 下面是 HTML,@endphp 后面紧跟的 PHP 代码块就进不了 HTML 包裹流程。

php免费学习视频:立即使用
踏上前端学习之旅,开启通往精通之路!从前端基础到项目实战,循序渐进,一步一个脚印,迈向巅峰!

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

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

相关专题

更多
phpstorm怎么导出项目
phpstorm怎么导出项目

phpstorm提供导出项目功能,步骤如下:打开phpstorm项目转到“项目”菜单选择“导出项目”选择导出格式指定导出位置选择导出范围勾选“包括依赖项”框(可选)单击“导出”完成导出。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.04.08

1548

7

phpStorm怎么运行
phpStorm怎么运行

本专题整合了phpstorm运行教程,阅读专题下面的文章了解更多相关内容。

2025.09.18

7298

13

phpstorm开发环境搭建教程
phpstorm开发环境搭建教程

本专题整合了phpstorm开发环境搭建和运行项目教程,阅读专题下面的文章了解更多详细教程。

2025.09.18

7176

18

phpstorm怎样运行php
phpstorm怎样运行php

本专题整合了phpstorm运行php相关教程,阅读专题下面的文章了解更多详细内容。

2025.09.18

2421

11

phpstorm相关教程大全
phpstorm相关教程大全

本专题整合了phpstorm相关教程汇总,阅读专题下面的文章了解更多详细内容。

2026.01.15

158

24

从环境搭建到代码调试:PHPstorm全流程开发配置指南
从环境搭建到代码调试:PHPstorm全流程开发配置指南

本文旨在为PHP开发者提供一份详尽的PhpStorm全流程开发配置指南。内容涵盖从IDE安装、PHP解释器配置、Xdebug调试环境搭建,到项目运行与断点调试的完整流程。通过本指南,读者将掌握搭建高效开发环境的核心技能,快速上手PhpStorm的强大功能,显著提升PHP开发效率。

2026.04.01

141

11

PHPstorm编辑器全系统安装与激活配置指南
PHPstorm编辑器全系统安装与激活配置指南

本文提供一份详尽的PHPstorm全系统安装与激活配置指南,覆盖Windows、macOS及Linux三大主流平台。内容从官方安装包的获取、安装过程中的路径与组件选择,到激活流程(包括正版激活与补丁替换法)均有详细图解。此外,指南还包含安装后的基础环境配置与中文语言包安装,旨在帮助开发者快速完成IDE部署,为PHP开发搭建一个稳定、高效的集成环境。

2026.04.01

296

9

ps软件新手入门教程合集
ps软件新手入门教程合集

PHP中文网精心打造了本PS新手入门教程合集。内容涵盖软件安装、界面认知、图层管理及抠图调色等核心技能,提供从零基础到精通的系统化学习路径。无论您是想快速上手修图还是进阶平面设计,都能在此找到实用指南与实战案例,助您轻松玩转Photoshop。

2026.06.11

1160

17

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
墨刀帮助中心
墨刀帮助中心

共0课时 | 0人学习

MyEclipse学习中心
MyEclipse学习中心

共0课时 | 0人学习

Apache Subversion 官方手册
Apache Subversion 官方手册

共0课时 | 0人学习