前端工具 0 Emmet外掛程式

2021-09-13 10:34:37 字數 1592 閱讀 9830

介紹：emmet是許多流行文字編輯器的外掛程式，它極大地改進了html和css工作流程 、為大部分流行的編輯器都提供了安裝外掛程式，核心是縮寫語法+tab鍵(不同編輯器可自行設定)，以下是我整理的常用知識點。

1、支援定製：

新增新縮寫或更新現有縮寫，可修改snippets.json檔案


更改emmet過濾器和操作的行為，可修改preferences.json檔案


定義如何生成html或xml**，可修改syntaxprofiles.json檔案

sublime text 3/2


textmate 1.x


eclipse/aptana


coda 1.6 and 2.x


espresso


chocolat 


komodo edit/ide 


notepad++


pspad


codemirror2/3


brackets
1、後代：> 示例：div>ul>li>a
2、兄弟：+ 示例：h1+p
3、上級：^ ^^ 示例：div>ul>li>span+a^p div>ul>li>span+a^^p
4、分組：() 示例：div>(header>ul>li*2>a)+footer>div
3、縮寫：link

4、簡寫：style、script

1、值：p(%)、e(em)、x(ex) 、不寫預設px、 如w100

width：100px;
2、附加屬性：@f：

@font-face {

font-family:;


src:url();
3、模糊匹配：ov:h、ov-h、ovh、oh

overflow:hidden;
4、**商字首：trs

-webkit-transition: prop time;


-moz-transition: prop time;


-ms-transition: prop time;


-o-transition: prop time;


transition: prop time;
5、漸變：lg(left,yellow 50%,@pink)

background-image: -webkit-linear-gradient(left, yellow 50%, @pink);


background-image: -o-linear-gradient(left, yellow 50%, @pink);


background-image: linear-gradient(to right, yellow 50%, @pink);

前端工具安裝

安裝yeoman bower grunt 1 nodejs的安裝 安裝後驗證是否安裝成功 進入命令提示符，輸入 node verison 命令。安裝node.js，會自動安裝npm，驗證npm是否安裝成功 同樣在命令提示符中輸入 npm version。2 安裝git git 是 linus tor...

前端工具類

描述unbug.github.io codelf 變數命名智慧型推薦 支援中文 www.docschina.org web 前端開發人員提供優質中文文件 regexr.com 正規表示式驗證匹配 any rule 正規表示式庫，非常全，使用起來很方便 多張合成雪碧圖，並生成對應 css tool.l...

前端工具gulp

最近在寫乙個新的專案，用到了新框架，主要是 react webpack。裡面還用到了乙個前端工具 gulp。gulp在專案裡的作用是打包靜態資源。編譯less，壓縮css等。js並不在處理之列 不代表gulp不能處理，而是說在專案裡並沒有用gulp處理js 如果理解了webpack之類的前端工具，g...