时间:2019-08-17 15:09:24 作者:无名 浏览量:21
vscode中Tasks及Emmet的应用教程
大家好,随着人们对生活的质量要求越来越高,电脑已经成为人们生活和工作中的必需品,电脑是有很多软件系统程序组成,如果想要学好电脑,我们必须对这些软件系统程序有所了解,今天小编就带领大家学习vscode中Tasks及Emmet的应用.欧洲五大联赛即将开始啦!
vscode中Tasks及Emmet的应用教程图1
接上一篇,今天再来介绍2个vscode的使用技巧,一个是tasks,相当于脚本命令,一个是Emmet,emmet其实前面在我介绍sublime的时候写过。这篇文章是基于vscode,写下如何配置自定义代码片段。欧洲五大联赛即将开始啦!
vscode的Tasks的应用
为什么要用tasks?
vscode中Tasks及Emmet的应用教程图2
当我们需要运行命令的时候,需要调出命令行工具,然后再执行某个命令操作。但是有了tasks之后,我们可以直接在编辑器中运行。欧洲五大联赛即将开始啦!
类似如下代码:
[JavaScript]纯文本查看复制代码
1 2 3 4 5 6 7 8 | "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任务步骤如下:
[JavaScript]纯文本查看复制代码欧洲五大联赛即将开始啦!
1 2 3 4 5 6 7 | 1、mac下面输入 cmd p ,window下面输入 ctrl p 2、输入 task(task 后有空格) 3、选择命令运行npm:dev 4、选择继续而不扫描任务输出等 |
如果你需要订制自己的task,可以参考文档。不过,自己定义的task只是在本项目中使用。对于前端开发者来说,经常使用的命令可以添加到package.json中。所以这里我们只是把Tasks当作快速启动命令的工具。
vscode中Tasks及Emmet的应用教程图3
vscode中使用Emmet欧洲五大联赛即将开始啦!
关于Emmet,我们已经很熟悉了,vscode中内置的,这里就不多阐述了,emmet更多用法可以看:https://docs.emmet.io/cheat-sheet/
下面说一下如何快速生成vue模板页配置,步骤如下:
打开vsocde的首选项>用户代码片段,输入vue,选择代码片段文件为vue.json。输入以下内容。
[JavaScript]纯文本查看复制代码
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 | "Vue component": { "prefix": "vuec", "body": [ "<template>", "t$1", "</template>", "<script>", "export default {", "t", "}", "</script>", "<style rel="stylesheet/scss" lang="scss" scoped>", "</style>", "" ] } |