vscode中Tasks及Emmet的应用

文章介绍了VSCode的Tasks功能,允许在编辑器内直接运行npm脚本,提高开发效率。同时提到了Emmet的便捷性,特别是如何快速配置Vue组件模板。通过自定义代码片段,开发者可以更高效地创建Vue页面。
摘要由CSDN通过智能技术生成

WEB前端工具vscode中Tasks及Emmet的应用

前端开发工具

vscodeTasks 的应用

为什么要用tasks?

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

vscode 能自动检测出 npm scripts,并把这些命令当成 task。接下来,我们可以通过 task 来执行某个 npm 脚本了。

类似如下代码: 

“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中内置的,这里就不多阐述了

下面说一下如何快速生成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>”,

        “”

    ]

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值