极速下载站 —— 提供优质软件下载服务,感受全新的极速下载体验!

最近更新 | 软件专题 | 软件分类 | 软件排行

您的位置:极速下载站资讯首页软件教程电脑软件教程 → vscode中Tasks及Emmet的应用教程

vscode中Tasks及Emmet的应用教程

时间:2019-08-17 15:09:24  作者:无名  浏览量:21

vscode中Tasks及Emmet的应用教程

进入下载
Visual Studio Code
Visual Studio Code 1.31.0 官方版
大小:38.6 MB
日期:2019/8/17 15:23:08
环境:WinXP, Win7, Win8, Win10, WinAll

大家好,随着人们对生活的质量要求越来越高,电脑已经成为人们生活和工作中的必需品,电脑是有很多软件系统程序组成,如果想要学好电脑,我们必须对这些软件系统程序有所了解,今天小编就带领大家学习vscode中Tasks及Emmet的应用.欧洲五大联赛即将开始啦!

图:vscode中Tasks及Emmet的注意事项

vscode中Tasks及Emmet的应用教程图1

接上一篇,今天再来介绍2个vscode的使用技巧,一个是tasks,相当于脚本命令,一个是Emmet,emmet其实前面在我介绍sublime的时候写过。这篇文章是基于vscode,写下如何配置自定义代码片段。欧洲五大联赛即将开始啦!

vscode的Tasks的应用

为什么要用tasks?

图:vscode中Tasks及Emmet的注意事项

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的注意事项

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>",

""

]

}

Visual Studio Code 1.31.0 官方版

Visual Studio Code图片
  • 软件性质:国产软件
  • 授权方式:免费版
  • 软件语言:简体中文
  • 软件大小:39531 KB
  • 下载次数:636 次
  • 更新时间:2019/8/17 15:08:15
  • 运行平台:WinAll...
  • 软件描述:Visual Studio Code是一个轻量但功能强大的源代码编辑器,可在桌面... [立即下载]

相关资讯