您的位置：極速下載站→ 資訊首頁(yè) → 軟件教程 → 電腦軟件教程 → vscode中Tasks及Emmet的應(yīng)用教程

vscode中Tasks及Emmet的應(yīng)用教程

時(shí)間：2019-08-17 15:09:24 作者：無(wú)名瀏覽量：21

vscode中Tasks及Emmet的應(yīng)用教程

Visual Studio Code 1.31.0 官方版
大小：38.6 MB
日期：2019/8/17 15:23:08
環(huán)境：WinXP, Win7, Win8, Win10, WinAll

大家好，隨著人們對(duì)生活的質(zhì)量要求越來(lái)越高，電腦已經(jīng)成為人們生活和工作中的必需品，電腦是有很多軟件系統(tǒng)程序組成，如果想要學(xué)好電腦，我們必須對(duì)這些軟件系統(tǒng)程序有所了解，今天小編就帶領(lǐng)大家學(xué)習(xí)vscode中Tasks及Emmet的應(yīng)用.歐洲五大聯(lián)賽即將開(kāi)始啦！

圖：vscode中Tasks及Emmet的注意事項(xiàng)

vscode中Tasks及Emmet的應(yīng)用教程圖1

接上一篇，今天再來(lái)介紹2個(gè)vscode的使用技巧，一個(gè)是tasks，相當(dāng)于腳本命令，一個(gè)是Emmet，emmet其實(shí)前面在我介紹sublime的時(shí)候?qū)戇^(guò)。這篇文章是基于vscode，寫(xiě)下如何配置自定義代碼片段。歐洲五大聯(lián)賽即將開(kāi)始啦！

vscode的Tasks的應(yīng)用

為什么要用tasks?

圖：vscode中Tasks及Emmet的注意事項(xiàng)

vscode中Tasks及Emmet的應(yīng)用教程圖2

當(dāng)我們需要運(yùn)行命令的時(shí)候，需要調(diào)出命令行工具，然后再執(zhí)行某個(gè)命令操作。但是有了tasks之后，我們可以直接在編輯器中運(yùn)行。歐洲五大聯(lián)賽即將開(kāi)始啦！

類似如下代碼：

[JavaScript]純文本查看復(fù)制代碼

"scripts": {

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"，

"start": "npm run dev"，

"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run"，

"e2e": "node test/e2e/runner.js"，

"test": "npm run unit && npm run e2e"，

"build": "node build/build.js"

}，

啟用tasks任務(wù)步驟如下：

[JavaScript]純文本查看復(fù)制代碼歐洲五大聯(lián)賽即將開(kāi)始啦！

1、mac下面輸入 cmd p ，window下面輸入 ctrl p

2、輸入 task（task 后有空格）

3、選擇命令運(yùn)行npm:dev

4、選擇繼續(xù)而不掃描任務(wù)輸出等

如果你需要訂制自己的task，可以參考文檔。不過(guò)，自己定義的task只是在本項(xiàng)目中使用。對(duì)于前端開(kāi)發(fā)者來(lái)說(shuō)，經(jīng)常使用的命令可以添加到package.json中。所以這里我們只是把Tasks當(dāng)作快速啟動(dòng)命令的工具。

圖：vscode中Tasks及Emmet的注意事項(xiàng)

vscode中Tasks及Emmet的應(yīng)用教程圖3

vscode中使用Emmet歐洲五大聯(lián)賽即將開(kāi)始啦！

關(guān)于Emmet，我們已經(jīng)很熟悉了，vscode中內(nèi)置的，這里就不多闡述了，emmet更多用法可以看：https://docs.emmet.io/cheat-sheet/

下面說(shuō)一下如何快速生成vue模板頁(yè)配置，步驟如下：

打開(kāi)vsocde的首選項(xiàng)>用戶代碼片段，輸入vue，選擇代碼片段文件為vue.json。輸入以下內(nèi)容。

[JavaScript]純文本查看復(fù)制代碼

"Vue component": {

"prefix": "vuec"，

"body": [

"<template>"，

"t$1"，

"</template>"，

"<script>"，

"export default {"，

"t"，

"}"，

"</script>"，

"<style rel="stylesheet/scss" lang="scss" scoped>"，

"</style>"，

]

}

Visual Studio Code 1.31.0 官方版

軟件性質(zhì)：國(guó)產(chǎn)軟件
授權(quán)方式：免費(fèi)版
軟件語(yǔ)言：簡(jiǎn)體中文
軟件大�。�39531 KB
下載次數(shù)：636 次
更新時(shí)間：2019/8/17 15:08:15
運(yùn)行平臺(tái)：WinAll...
軟件描述：Visual Studio Code是一個(gè)輕量但功能強(qiáng)大的源代碼編輯器，可在桌面... [立即下載]

vscode中Tasks及Emmet的應(yīng)用教程

Visual Studio Code 1.31.0 官方版

相關(guān)資訊

更多常用電腦軟件