如何在PhpStorm/WebStorm的.php文件中通过Emmet或实时模板插入HTML5模板代码？

嘿，我之前也碰到过这个头疼的问题，给你几个亲测有效的解决办法，保证能让你快速插入HTML5模板还不影响PHP代码执行：

方法一：让Emmet直接在PHP文件里生效 #

这是最简单的办法，只要给Emmet开个权限让它管PHP文件就行：

• 打开设置（快捷键Ctrl+Alt+S，Mac是Cmd+,），找到Languages & Frameworks > Emmet > HTML
• 在「Enabled for these file types」的列表里，一定要把PHP勾选上
• 再去Languages & Frameworks > Emmet > Settings，确认「Enable Emmet」是开启状态
• 保存设置后回到你的PHP文件，把光标放在<?php ?>标签外的空白区域（就是你注释里想插模板的地方），直接敲!然后按Tab，标准的HTML5模板就出来了，完全不会干扰里面的PHP代码运行

方法二：自定义实时模板（用你想要的缩写，比如!html） #

如果Emmet的!缩写你用着不习惯，或者想整个专属的缩写，自己做个实时模板更灵活：

• 打开设置，找到Editor > Live Templates
• 点右上角的+，先建一个模板组（比如叫「MyHTMLTemplates」，方便管理自己的模板）
• 再在这个新组上点+，选「Live Template」
• 「Abbreviation」里填你想要的缩写，比如!html
• 「Template text」里直接粘贴标准的HTML5模板代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

• 然后在「Applicable in」里选择HTML（因为我们是在PHP文件的HTML区域用，选这个就够了）
• 记得勾选「Reformat according to style」，插入后代码会自动格式化，看着更舒服
• 保存设置后，回到PHP文件的空白HTML区域，敲!html按Tab，模板就插好了

小提醒 #

不管用哪种方法，一定要把光标放在<?php ?>标签外面的空白区域，要是不小心把HTML模板插到PHP代码块里，那肯定会报错的哈！要是想把现有的PHP代码嵌到模板里，直接把PHP代码移到模板的<body>标签里就行，完全不影响执行。

内容来源于stack exchange