黑马程序员技术交流社区

标题: 【上海校区】vscode中Tasks及Emmet的应用 [打印本页]

---

作者: chennaiweng    时间: 2019-5-9 17:00
标题: 【上海校区】vscode中Tasks及Emmet的应用


前言

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

vscode的Tasks 的应用

为什么要用tasks?

当我们需要运行命令的时候，需要调出命令行工具，然后再执行某个命令操作。但是有了tasks之后，我们可以直接在编辑器中运行。

类似如下代码：

[JavaScript] 纯文本查看 复制代码

  "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、mac下面输入 cmd p ，window下面输入 ctrl p



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



3、选择命令运行npm:dev



4、选择继续而不扫描任务输出等

如果你需要订制自己的 task ，可以参考文档。不过，自己定义的 task 只是在本项目中使用。对于前端开发者来说，经常使用的命令可以添加到 package.json 中。所以这里我们只是把 Tasks 当作快速启动命令的工具。

vscode中使用Emmet

关于Emmet，我们已经很熟悉了，vscode中内置的，这里就不多阐述了，emmet更多用法可以看：https://docs.emmet.io/cheat-sheet/

下面说一下如何快速生成vue模板页配置，步骤如下：

打开 vsocde 的 首选项 > 用户代码片段 ，输入vue，选择代码片段文件为 vue.json。输入以下内容。

[JavaScript] 纯文本查看 复制代码

"Vue component": {

    "prefix": "vuec",

    "body": [

        "<template>",

        "\t$1",

        "</template>",

        "<script>",

        "export default {",

        "\t",

        "}",

        "</script>",

        "<style rel=\"stylesheet/scss\"  lang=\"scss\" scoped>",

        "</style>",

        ""

    ]

}

本文转自：https://www.haorooms.com/post/vscode_task_emmet

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2