我們用字符串形式寫html模板時，或者向某標簽添加html內容時，如下，如果這個str更加的長，一旦裏面少了一個單引號，少了一個加號，基本報錯還看不懂，一臉懵逼。。。

//  假定後臺傳給我們的數據為
var dataJson = [{
        item.name = "china",
        item.id = "1",
        item.content = "哈哈",
        item.link="www.google.com"
    },   
    // 做個說明而已，就只寫一個咯
    ...
}]

var item = dataJson[0];
var
 
 str = ‘<li itemId="‘ + item.id + ‘"><h4 class="item_name">‘ + item.name + ‘</h4><p>‘ + item.content + ‘</p><p class="item.link">‘ + item.link + ‘</p></li>‘;

$(‘#box‘).text(str);

那麽，後來聰明了點，我就這麽寫了str

var str = ‘<li itemId="‘ + item.id + ‘">        <h4 class="item_name">
 
‘ + item.name + ‘</h4>        <p>‘ + item.content + ‘</p>        <p class="item.link">‘ + item.link + ‘</p></li>‘;

但是強迫癥可能要懵逼了，尼瑪不齊！於是，之前發現了webstorm的一個功能，效果如下

上半部分str變得很難看，但是格式化的地方（下半部分）顯示效果很好，一眼就清晰明了。這個功能叫做edit HTML Fragment（編輯html碎片）

操作步驟是：

　　1、對著str的html部分alt+enter

　　2、選擇Edit HTML Fragment，enter確定

當然，如圖，裏面有四個功能嘛，如果你不想要那個功能，就光標選中了向右按鈕,禁用它，然後它就再也不會出現了

禁用了你會後悔的，怎麽辦？去哪裏找回來它？google了一下，嗯，找到了，首先我們要知道它的名字叫做edit injected fragment，那麽，

　　File --> setting --> Editor --> Intentions，然後在右面我們看到了 Language Injection，把想要的那個被禁用的勾選上就是了。

以上便是說的全部內容，廢話有些多了，圖也太多了，嗯，希望能對各位有所幫助

webstorm html碎片整理功能