webstorm html碎片整理功能

咱們用字符串形式寫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碎片）

操做步驟是：

　　一、對着str的html部分alt+enter

　　二、選擇Edit HTML Fragment，enter肯定

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

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

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

以上即是說的所有內容，廢話有些多了，圖也太多了，嗯，但願能對各位有所幫助