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，把想要的那个被禁用的勾选上就是了。

以上即是说的所有内容，废话有些多了，图也太多了，嗯，但愿能对各位有所帮助