webstorm自动补全,即HTML标签简写规则

本文主要介绍HTML简写,着重讲解Emmet简写规则。Emmet是一个插件,基本用法是简写形式加转化键,不同IDE转化键不同。文中列举了多种Emmet简写形式示例,如标签名、带ID或类名的标签等,还可进行排列组合。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

参考文章1
参考文章2

HTML简写,一种是在模板上改,一种是使用简写规则。

简写方法,主要是Emmet(常用项目)和Haml(ruby项目),本文主要介绍使用Emmet简写规则。

Emmet是一个插件,基本用法是简写形式+转化键。

  • 转化键,不同IDE不同,MAC OS的是“tab键”,Wins是"<Ctr+y>,"(ctrl键+y键+逗号键)
  • 简写形式举例(原理就是类似于css定位形式):
    标签名(使用p代替举例)
    1.p
    例:输入p 按Tab键,===>   <p></p>

    2.p#id
    例:p#addr 按Tab键,===>   <p id="attr"></p>

    3.p.class
    例:p.addr 按Tab键,===>   <p class="attr"></p>

    4.p[属性]
    例:p[a=attr] 按Tab键,===>   <p a="attr"></p>

    5.p{包含的内容}
    例:p{显示的内容} 按Tab键,===>   <p>显示的内容</p>

    6.标签>子标签
    例:div>p (代表p是div 的子元素)按Tab键,===>
    <div>
       <p></p>
    </div>
    7.标签+标签
    例:div+p (代表p和div 是同级元素)按Tab键,===>
    <div></div>
    <p></p>

    8.重复N个标签(块)*数字
    例:div>p*3   按Tab键,===>
    <div>
       <p></p>
       <p></p>
       <p></p>
    </div>

    9.标签属性自动编号,使用符号$
    例:div#id$.class$$*3  按Tab键,===>
    <div id="id1" class="class01"></div>
    <div id="id2" class="class02"></div>
    <div id="id3" class="class03"></div>
    10.以上进行排列组合

    例:html:5
    ul.menu>li*6>a[href=#]{显示内容$}

 

### 配置和使用 WebStorm 自动补全功能 #### 关闭或启用自动补全功能 在 WebStorm 中,可以通过设置选项来控制代码的自动补全行为。如果希望关闭某些特定类型的自动补全功能,可以调整 `Settings` 或 `Preferences` 中的相关选项。例如,要关闭 Tab 键触发的完整行建议 (`Enable Full Line Suggestion`),可以在以下路径找到该设置: - **Windows/Linux**: `File -> Settings -> Editor -> General -> Code Completion` - **macOS**: `WebStorm -> Preferences -> Editor -> General -> Code Completion` 在此界面中取消勾选 `Enable full code completion` 即可禁用完整的代码补全功能[^1]。 #### CSS 和 SCSS 的自动补全配置 对于 CSS 和 SCSS 文件,WebStorm 提供了强大的自动补全支持,并可通过安装插件进一步增强其功能。为了实现更高效的开发体验,推荐使用 Autoprefixer 插件处理浏览器兼容性前缀问题。具体步骤如下: 1. 确保项目中已集成 Autoprefixer 工具链。 2. 在 WebStorm 设置中启用相应的工具支持: - 路径同上,在 `Code Style -> CSS` 下选择合适的样式规则。 3. 如果需要手动管理补全项,则可在 `.editorconfig` 或其他配置文件中定义规则[^2]。 #### Node.js 开发环境下的自动补全 当涉及 Node.js 应用程序时,确保 WebStorm 正确识别项目的依赖关系至关重要。以下是几种常见的做法以优化 JavaScript/TypeScript 的上下文感知能力: 1. 安装必要的库版本到本地 node_modules 目录下; 2. 更新全局 npm 包至最新稳定版以便获取更好的元数据解析效果; 3. 利用 TypeScript Declaration Files (`.d.ts`) 来扩展静态分析范围[^3]。 此外还可以自定义 keymap 绑定常用命令加快工作流效率比如 Ctrl+Space 触发基础提示 Shift+Ctrl+Enter 执行快速修复等等这些都可以显著提升日常编码速度[^4]. 最后值得一提的是复杂嵌套结构也能通过组合语法轻松生成只需遵循一定模式即可如 ul>li.item$*5 表达五个带序号列表项[^5]: ```html <ul> <li class="item1"></li> <li class="item2"></li> ... </ul> ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值