整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
Pug聽起來或許比較陌生，但是如果說起她的前生，相信各位多少會(huì)有耳聞：Jade。
每當(dāng)你不停的敲打`<></>`的時(shí)候，可曾想過，這該死的箭頭是不是可以拿掉？這不單單是看著不舒服，有時(shí)候還會(huì)因?yàn)樾袛?shù)過多，而導(dǎo)致你頭暈眼花。
或許你知道，有個(gè)東西叫emmet，它是解決了你寫的時(shí)候多寫的那些內(nèi)容，但是并沒有解決冗余的代碼行數(shù)，更不要提在你沒有完全熟練使用emmet前，腦子里面需要進(jìn)行大量的預(yù)翻譯！
那么是否有一種既能減少代碼量，又能不做預(yù)翻譯的方案呢，吶吶吶，Jade這個(gè)后端模板出現(xiàn)了，然后改名叫Pug了，現(xiàn)在Vue也支持這個(gè)語法，具體請(qǐng)往下看。
本人喜歡使用Pug、CoffeeScript、Sass，前兩者有共有的哲學(xué)，CoffeeScript說自己就是JavaScript，同樣的，Pug也就是HTML，你可以理解成語法糖。
95個(gè)字符，5行，3個(gè)結(jié)束標(biāo)簽
整成Pug
label input(type="checkbox") span 記住密碼 .show-box
54個(gè)字符，4行，沒有結(jié)束標(biāo)簽
差別有了，驚不驚喜？再來！
15行，671個(gè)字符，9個(gè)結(jié)束標(biāo)簽
.container .ver.seller input.storeId(type='number' v-model='storeId' placeholder='輸入店號(hào)' @focus='passwordShow=false') .nav button.go(@click='clickGo(0)') 我是賣家 button.little(@click='clickRegist') 注冊(cè)賣家 button.go(@click='clickGo(1)') 我是買家 .ver.password(v-if='passwordShow') input.storeId(type='password' v-model='password' placeholder='輸入你的6位密碼') button.go(@click='login') 點(diǎn)擊登錄 span.buyer-show(v-if='passwordShow' @click='passwordShow=false') 重置
11行，481個(gè)字符，沒有結(jié)束標(biāo)簽（這里我個(gè)人書寫習(xí)慣是回車切割，為了統(tǒng)一對(duì)比采用這種寫法）
簡(jiǎn)單推算
大約代碼量節(jié)省30%，行數(shù)節(jié)省20%。如果公司績效算行數(shù)或代碼量的千萬別用- -
span i span.red love | you // 這里沒必要再用一個(gè)span，使用“|”即可
Pug是后端模板起家，所以功能肯定不單單是簡(jiǎn)化語法這么簡(jiǎn)單，她也有變量、混合、過濾等等等等功能（實(shí)用性遠(yuǎn)超Ejs等），但是實(shí)際上這些功能在使用中跟Vue功能重復(fù)，我們搭建項(xiàng)目主要還是Vue，所以能用Vue的就用Vue的，Pug對(duì)于我們項(xiàng)目來說，最大的功能就是精簡(jiǎn)和整理代碼。
如需了解其他功能，請(qǐng)前往官網(wǎng)查閱：Pug官網(wǎng)「鏈接」
PS：以上內(nèi)容為一年前內(nèi)容，現(xiàn)在個(gè)人已經(jīng)不建議使用CoffeeS與Sass了，尤其Sass在不同終端系統(tǒng)的包差異化導(dǎo)致系列問題。只有Coffee，恐怕只是不想再擔(dān)任人肉翻譯機(jī)了。壯哉我大Ruby啊。。。
一、vs code 的常用快捷鍵
1、注釋：
a) 單行注釋：[ctrl+k,ctrl+c] 或 ctrl+/
b) 取消單行注釋：[ctrl+k,ctrl+u] (按下ctrl不放，再按k + u)
c) 多行注釋：[alt+shift+A]
d) 多行注釋：/**
2、移動(dòng)行：alt+up/down
3、顯示/隱藏左側(cè)目錄欄 ctrl + b
4、復(fù)制當(dāng)前行：shift + alt +up/down
5、刪除當(dāng)前行：shift + ctrl + k
6、控制臺(tái)終端顯示與隱藏：ctrl + ~
7、查找文件/安裝vs code 插件地址：ctrl + p
8、代碼格式化：shift + alt +f
9、新建一個(gè)窗口 : ctrl + shift + n
10、行增加縮進(jìn): ctrl + [
11、行減少縮進(jìn): ctrl + ]
12、裁剪尾隨空格(去掉一行的末尾那些沒用的空格) : ctrl + shift + x
13、字體放大/縮小: ctrl + ( + 或 - )
14、拆分編輯器 : ctrl + 1/2/3
15、切換窗口 : ctrl + shift + left/right
16、關(guān)閉編輯器窗口 : ctrl + w
17、關(guān)閉所有窗口 : ctrl + k + w
18、切換全屏 : F11
19、自動(dòng)換行 : alt + z
20、顯示git : ctrl + shift + g
21、全局查找文件：ctrl + shift + f
22、顯示相關(guān)插件的命令(如：git log)：ctrl + shift + p
23、選中文字：shift + left / right / up / down
24、折疊代碼： ctrl + k + 0-9 (0是完全折疊)
25、展開代碼： ctrl + k + j (完全展開代碼)
26、刪除行 ： ctrl + shift + k
27、快速切換主題：ctrl + k / ctrl + t
28、快速回到頂部 ： ctrl + home
29、快速回到底部 : ctrl + end
30、格式化選定代碼 ：ctrl + k / ctrl +f
31、選中代碼 ： shift + 鼠標(biāo)左鍵
32、多行同時(shí)添加內(nèi)容（光標(biāo)） ：ctrl + alt + up/down
33、全局替換：ctrl + shift + h
34、當(dāng)前文件替換：ctrl + h
35、打開最近打開的文件：ctrl + r
36、打開新的命令窗：ctrl + shift + c
二、vs code 的常用插件
1、Auto Rename Tag 修改html標(biāo)簽，自動(dòng)幫你完成尾部閉合標(biāo)簽的同步修改，和webstorm一樣。
2、Auto Close Tag 自動(dòng)閉合HTML標(biāo)簽
4、Beautiful 格式化代碼的工具
5、Dash Dash是MacOS的API文檔瀏覽器和代碼段管理器
6、Ejs Snippets ejs 代碼提示
7、ESLint 檢查javascript語法錯(cuò)誤與提示
8、File Navigator 快速查找文件
9、Git History(git log) 查看git log
10、Gulp Snippets 寫gulp時(shí)用到，gulp語法提示。
11、HTML CSS Support 在HTML標(biāo)簽上寫class智能提示當(dāng)前項(xiàng)目所支持的樣式
12、HTML Snippets 超級(jí)好用且初級(jí)的H5代碼片段以及提示
13、Debug for Chrome 讓vs code映射chrome的debug功能，靜態(tài)頁面都可以用vscode來打斷點(diǎn)調(diào)試、配飾稍微復(fù)雜一點(diǎn)
14、Document this Js的注釋模板
15、jQuery Code Snippets jquery提示工具
16、Html2jade html模板轉(zhuǎn)pug模板
17、JS-CSS-HTML Formatter 格式化
18、Npm intellisense require 時(shí)的包提示工具
19、Open in browser 打開默認(rèn)瀏覽器
20、One Dark Theme 一個(gè)vs code的主題
21、Path Intellisense 自動(dòng)路徑補(bǔ)全、默認(rèn)不帶這個(gè)功能
22、Project Manager 多個(gè)項(xiàng)目之間快速切換的工具
23、Pug(Jade) snippets pug語法提示
24、React Components 根據(jù)文件名創(chuàng)建反應(yīng)組件代碼。
25、React Native Tools reactNative工具類為React Native項(xiàng)目提供了開發(fā)環(huán)境。
26、Stylelint css/sass代碼審查
27、Typings auto installer 安裝vscode 的代碼提示依賴庫，基于typtings的
28、View In Browser 默認(rèn)瀏覽器查看HTML文件（快捷鍵Ctrl+F1可以修改）
29、Vscode-icons 讓vscode資源目錄加上圖標(biāo)、必備
30、VueHelper Vue2代碼段（包括Vue2 api、vue-router2、vuex2）
31、Vue 2 Snippets vue必備vue代碼提示
32、Vue-color vue語法高亮主題
33、Auto-Open Markdown Preview markdown文件自動(dòng)開啟預(yù)覽
34、EverMonkey 印象筆記
35、atom one dark atom的一個(gè)高亮主題(個(gè)人推薦)
三、常用的電腦快捷鍵
1、ctrl + shift + delete 快速清除瀏覽器緩存
2、ctrl + alt + delete 快速進(jìn)入任務(wù)管理器頁面
3、window + L 快速鎖定電腦
4、window + d 所有窗口最小化
5、 window + e 打開我的資源管理器(我的電腦)
6、 window + f 快速打開搜索窗口
7、 alt + tab 快速查看打開的應(yīng)用與窗口
數(shù)字程序代碼
日，Pug 3.0.0 正式發(fā)布，Pug 原名 Jade，是由 TJHolowaychuk 開發(fā)的一款模板引擎，也是 Haml 的 JavaScript 實(shí)現(xiàn)版本。Pug 3.0.0 增加了一些新功能，除此之外新版本將不再支持 Node.js 6 和 Node.js 8。
例如：
復(fù)制代碼
// options.jsexports.filters = {png: {// instead of a function, specify an object with a "renderBuffer" property// whose value is a function that takes a Buffer instead of a stringrenderBuffer: function(buffer, options) {var data = Buffer.from(buffer).toString('base64');return '<img src="data:image/png;base64, ' + data + '"/>'; } }};然后就可以使用該過濾器了：
復(fù)制代碼
// foo.puginclude:png my-small-image.png作者表示，自從他將 Pug 的單獨(dú)的軟件包合并到“mono repo”中以來，發(fā)行的難度增加了，后經(jīng)一位 ThreadsStyling 的同事介紹了解到了語義釋放，進(jìn)而廣泛地使用它，不過仍有一些限制：
作者一直認(rèn)為解決此問題的方法是將更改日志附加到拉取請(qǐng)求，而不是提交請(qǐng)求。所以在過去的 6 個(gè)月中，他一直在探索這個(gè)問題的解決方案。此次的 Rolling 版本提供了一個(gè)簡(jiǎn)單的用戶界面，可以將更改日志附加到請(qǐng)求中的特定軟件包。然后，它會(huì)提供一個(gè) CLI 來發(fā)布軟件包，開發(fā)者可以在持續(xù)集成服務(wù)上運(yùn)行該軟件包。
Pug 采用簡(jiǎn)化語法的方式，將原本臃腫的 HTML 標(biāo)記精簡(jiǎn)化，同時(shí)還有很多優(yōu)點(diǎn)：超強(qiáng)的可讀性、靈活易用的縮進(jìn)、塊擴(kuò)展、代碼默認(rèn)經(jīng)過代碼處理以增加安全性、擁有編譯和運(yùn)行時(shí)的上下文錯(cuò)誤報(bào)告、命令行編譯支持、HTML5 模式、可選的內(nèi)存緩存、聯(lián)合動(dòng)態(tài)的靜態(tài)標(biāo)記類、利用過濾器解析樹的處理…
因?yàn)檫@些優(yōu)點(diǎn)，Pug 收獲了很多開發(fā)者的好評(píng)。開發(fā)者表示，Pug 和 Vue 簡(jiǎn)直是天作之合，大幅度提高了編碼效率，不過 Pug 似乎不太適合與 React 一起使用，因?yàn)殛P(guān)閉標(biāo)簽會(huì)浪費(fèi)太多行代碼。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
