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