WebStorm使用记巧记录——解决Emmet语法，行内标签和块级标签在一行的问题

最新推荐文章于 2024-06-19 11:41:19 发布

Alert.GoSt

最新推荐文章于 2024-06-19 11:41:19 发布

阅读量1.1k

点赞数

分类专栏： WebStorm 文章标签： webstorm html

本文链接：https://blog.csdn.net/qq_42168187/article/details/116357172

版权

WebStorm 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、引言
在使用WebStorm写HTML时，你可能会使用Emmet语法来快速生成标签元素。但是苦于WebStorm对于Emmet语法有自动格式化的功能，他认为一些行内元素应该是在一行上的。比如下面几类，其它的请自己举一反三哦。
1. 比如写一个div里面包含3个a标签，但是使用Emmet语法后变成这样：
1.1
1.2
2. 比如写一个div里面有一个p标签，p标签内再有2个a标签，但是按了Tab键后：
2.1
在这里插入图片描述
3. 比如写两个div，每个div里面有2个p标签，每个p标签内又有3个span标签，按了Tab键后：
3.1
3.2
4. 比如写两个div，每个div里面有2个p标签，每个p标签内又有3个span标签和2个a标签，按下Tab键后：

4.1
4.2
二、设置方案
1. 打开WebStorm，在设置里面依次选择Editor > Code Style > HTML，然后在右侧找到Other。
2. 然后在下图这个位置将你需要对齐的标签给删掉，我将常用的，比如a、span、i、b、label等标签删掉了，这里根据自己需求。然后点击Apply。注意：如果点了Apply之后还是不对齐，建议试试重启下WebStorm。
在这里插入图片描述
三、设置后效果
1. 一个div里面包含3个a标签。
1.3
2. 一个div里面有一个p标签，p标签内再有2个a标签。
2.3
3. 两个div，每个div里面有2个p标签，每个p标签内又有3个span标签。
3.3
4. 两个div，每个div里面有2个p标签，每个p标签内又有3个span标签和2个a标签。
4.3