整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
開始寫這篇文章的時(shí)候；
其實(shí)我是拒絕的；
因?yàn)樵?前端自動(dòng)化系列(二)之less、scss、sass、stylus css預(yù)處理器 中；
我已經(jīng)表明了我的態(tài)度；
我是不喜歡那種靠縮進(jìn)來體現(xiàn)等級(jí)層次感的語法；
但是考慮到css、js都有了現(xiàn)代化的寫法；
單單把html落下不好；或者有童鞋喜歡呢？
畢竟jade還是有一大堆的追隨者的；
于是；我還是決定講一下 Jade ；
老規(guī)矩；先安裝；
cnpm install -g jade
然后創(chuàng)建 test.jade 文件；輸入如下內(nèi)容；
doctype html
html
head
meta(charset="UTF-8")
title 尊氪博客
body
h2 這里是尊氪的博客
a#blog.blog() 點(diǎn)擊go
script.
function test() {
alert(1);
}
test();
命令行運(yùn)行：
jade test.jade -P
生成 test.html 文件；內(nèi)容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>尊氪博客</title>
</head>
<body>
<h2>這里是尊氪的博客</h2>
<a id="blog" class="blog">點(diǎn)擊go</a>
<script>
function test() {
alert(1);
}
test();
</script>
</body>
</html>
好了；又是一個(gè)看一眼就學(xué)會(huì)了的東西；
那接著寫點(diǎn)稍微高級(jí)點(diǎn)的用法；
<!-- 引入其他文件 -->
include test2.jade
include 都有了；那定義變量 、循環(huán)呢？
- var data = ['尊氪', '一訊'];
ul
each val, index in data
li= index + ': ' + val
生成：
<ul>
<li>0: 尊氪</li>
<li>1: 一訊</li>
</ul>
那 extends 、 if 、else 等等自然一個(gè)都不能少；
好了；介紹到這；有興趣的；官網(wǎng)在這： https://pugjs.org
-------------------------------------------------------------------------------------------------------
程序員交流QQ群：374604838
云服務(wù)器提供商：http://www.zunse.net
小編微信：woshiyixun
少win7和win10系統(tǒng)的用戶在安裝完JADE軟件后，就會(huì)提示注冊(cè)文件缺失，5.0和6.5版本都會(huì)出現(xiàn)這個(gè)問題。一般都是打開后出現(xiàn)錯(cuò)誤，顯示為runtime erro339， components MSCOMCT2.OCX 出錯(cuò)等之類的問題，這個(gè)就是缺少了相應(yīng)的文件。這里給大家?guī)砹?/span>jade6.5缺失文件下載，可以幫助用戶快速解決這個(gè)問題。下面還有詳細(xì)的使用教程，需要的不要錯(cuò)過。
來源：http://www.3h3.com/soft/263877.html
解壓后，把OCX文件夾放到D盤根目錄（不要放到子文件夾里），然后運(yùn)行“注冊(cè)ocx.bat”（win7/vista下需要右鍵–管理員權(quán)限運(yùn)行），按照提示點(diǎn)擊確定，結(jié)束后即可運(yùn)行Jade軟件。
這里有兩個(gè)注意事項(xiàng)：
1、ocx文件夾不可以刪除
2、如果想把它放到其它地方，右鍵編輯“注冊(cè)ocx.bat”，第二行就是存放ocx文件的路徑，修改為想要的路徑即可。
、注釋：
· 單行注釋：ctrl+/， 注釋后再按取消
· 取消單行注釋：alt+shift+A 注釋后再按取消
2、移動(dòng)行
· 向上移動(dòng)一行：alt+up
· 向下移動(dòng)一行：alt+down
3、顯示/隱藏左側(cè)目錄欄
· ctrl + b
4、復(fù)制當(dāng)前行
· 向上復(fù)制一行：shift+alt+up
· 向下復(fù)制一行：shift+alt+down
5、刪除當(dāng)前行
· shift + ctrl + k
6、控制臺(tái)顯示隱藏
· ctrl + ~
7、查找文件
· ctrl + p
8、代碼格式化
· shift + alt +f
9、新建窗口
· ctrl + shift + n
10、行增加縮進(jìn)
· ctrl + [
11、行減少縮進(jìn)
· ctrl + ]
12、關(guān)閉編輯窗口
· ctrl + w
13、關(guān)閉所有窗口
· ctrl + k + w
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 使用到，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 來打斷點(diǎn)調(diào)試
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è)人推薦)
知識(shí)在線，共同探討，一起搬磚，快樂生活，苦了頭發(fā)。
喜歡我就關(guān)注我！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
