天天看點

WebStorm使用記巧記錄——解決Emmet文法,行内标簽和塊級标簽在一行的問題

一、引言

在使用WebStorm寫HTML時,你可能會使用Emmet文法來快速生成标簽元素。但是苦于WebStorm對于Emmet文法有自動格式化的功能,他認為一些行内元素應該是在一行上的。比如下面幾類,其它的請自己舉一反三哦。

1. 比如寫一個div裡面包含3個a标簽,但是使用Emmet文法後變成這樣:

WebStorm使用記巧記錄——解決Emmet文法,行内标簽和塊級标簽在一行的問題
WebStorm使用記巧記錄——解決Emmet文法,行内标簽和塊級标簽在一行的問題

2. 比如寫一個div裡面有一個p标簽,p标簽内再有2個a标簽,但是按了Tab鍵後:

WebStorm使用記巧記錄——解決Emmet文法,行内标簽和塊級标簽在一行的問題
WebStorm使用記巧記錄——解決Emmet文法,行内标簽和塊級标簽在一行的問題

3. 比如寫兩個div,每個div裡面有2個p标簽,每個p标簽内又有3個span标簽,按了Tab鍵後:

WebStorm使用記巧記錄——解決Emmet文法,行内标簽和塊級标簽在一行的問題
WebStorm使用記巧記錄——解決Emmet文法,行内标簽和塊級标簽在一行的問題

4. 比如寫兩個div,每個div裡面有2個p标簽,每個p标簽内又有3個span标簽和2個a标簽,按下Tab鍵後:

WebStorm使用記巧記錄——解決Emmet文法,行内标簽和塊級标簽在一行的問題
WebStorm使用記巧記錄——解決Emmet文法,行内标簽和塊級标簽在一行的問題

二、設定方案

1. 打開WebStorm,在設定裡面依次選擇Editor > Code Style > HTML,然後在右側找到Other。

2. 然後在下圖這個位置将你需要對齊的标簽給删掉,我将常用的,比如a、span、i、b、label等标簽删掉了,這裡根據自己需求。然後點選Apply。注意:如果點了Apply之後還是不對齊,建議試試重新開機下WebStorm。

WebStorm使用記巧記錄——解決Emmet文法,行内标簽和塊級标簽在一行的問題

三、設定後效果

1. 一個div裡面包含3個a标簽。

WebStorm使用記巧記錄——解決Emmet文法,行内标簽和塊級标簽在一行的問題

2. 一個div裡面有一個p标簽,p标簽内再有2個a标簽。

WebStorm使用記巧記錄——解決Emmet文法,行内标簽和塊級标簽在一行的問題

3. 兩個div,每個div裡面有2個p标簽,每個p标簽内又有3個span标簽。

WebStorm使用記巧記錄——解決Emmet文法,行内标簽和塊級标簽在一行的問題

4. 兩個div,每個div裡面有2個p标簽,每個p标簽内又有3個span标簽和2個a标簽。

WebStorm使用記巧記錄——解決Emmet文法,行内标簽和塊級标簽在一行的問題
最後給一個小技巧,按tab鍵可以跳到下一個光标處哦,不懂的可以試試看

(o゜▽゜)o☆[BINGO!]