C/C++
狂野架构师
IP短视频
JavaEE
鸿蒙应用开发
HTML&JS+前端
Python+大数据开发
人工智能开发
AI+设计
软件测试
新媒体+短视频直播运营
产品经理
集成电路应用开发(含嵌入式)
Linux云计算+运维开发
C/C++
拍摄剪辑+短视频制作
PMP项目管理认证
电商运营
Go语言与区块链
大数据
PHP工程师
Android+物联网
iOS
.NET
前言
接上一篇，今天再来介绍2个vscode的使用技巧，一个是tasks，相当于脚本命令，一个是Emmet，emmet其实前面在我介绍sublime的时候写过。这篇文章是基于vscode，写下如何配置自定义代码片段。
vscode的Tasks 的应用
为什么要用tasks?
当我们需要运行命令的时候，需要调出命令行工具，然后再执行某个命令操作。但是有了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中使用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>", "" ] } |
本文转自：https://www.haorooms.com/post/vscode_task_emmet
公众号回复“领取资源01”