vscode中Tasks及Emmet的应用

17721次浏览

前言

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

vscode的Tasks 的应用

为什么要用tasks?

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

vscode 能自动检测出 npm scripts,并把这些命令当成 task。接下来,我们可以通过 task 来执行某个 npm 脚本了。具体可以看:https://code.visualstudio.com/docs/editor/tasks#_task-autodetection

关于npm scripts,请看:https://docs.npmjs.com/misc/scripts

类似如下代码:

  "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任务步骤如下:

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/

这篇文章主要介绍自定义代码片段:

关于vscode自定义代码片段,可以看:https://code.visualstudio.com/docs/editor/userdefinedsnippets

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

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

"Vue component": {
    "prefix": "vuec",
    "body": [
        "<template>",
        "\t$1",
        "</template>",
        "<script>",
        "export default {",
        "\t",
        "}",
        "</script>",
        "<style rel=\"stylesheet/scss\"  lang=\"scss\" scoped>",
        "</style>",
        ""
    ]
}

这样就可以如下图:

enter image description here

Tags: vscodeemmet

相关文章: