首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >你还在一个字一个字敲代码吗?【vscode snippets 入门教程】

你还在一个字一个字敲代码吗?【vscode snippets 入门教程】

原创
作者头像
志航
发布2019-04-07 22:46:53
14K0
发布2019-04-07 22:46:53
举报
文章被收录于专栏:前端探索前端探索

如果你现在还在手动敲每一行代码,或者是使用 ctrl-c, ctrl-v 粘代码,那实在是太累了,其实你可以释放你自己。把省下的时间用来写更有趣的代码!🌝

可能你用过一些 snippets ,也就是我们平时说的代码片段,就是只要敲几个字母,自动生成一大段代码,例如 React 创建一个组件的 snippets(如下图),可以极大的减少自己敲代码的代码量,而且能很好的节约时间,看起来是不是很 cool,其实自己写一个来生成自己的代码也很简单,下面我们来实现一个。

两种方式创建 snippets

axios 是我们常用的用来发送请求的库,那么我们经常会这样写

import axios from 'axios';

那么我们如何通过 snippets 来减少这个代码量呢?

方式一:通过 vscode 客户端创建

我们可以像下面一样建立一个全局的snippets代码片段。

通过客户端创建snippets
通过客户端创建snippets

在打开的 json 文件中,我们可以看到有几行注释说明,告诉你把整个 vscode 全局的 snippets 放在这里,每个代码片段包含四个字段。

{
	// Example:
	// "Print to console": {
	// 	"scope": "javascript,typescript",
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
}
  • scope: 作用域,也就是该 snippets 生效的文件类型,例如 javascript, typescript等;
  • prefix: 前缀,就是在编辑器中敲下这个前缀以后就会出现的生成代码;
  • body: 就是通过 prefix 生成出来的代码,
  • description: 这个代码片段的描述

其实上面 🌰代码中, $1 、$2 是生成代码后按 tab 会停留给你输入的地方,而 $0 是生成代码后首先停留的光标的位置。后面还会遇到诸如 ${1:label}, ${2:another} 这样的占位符,其实还是一样的,但是占位符会有数字后面的英文名,例如上面的就是 label, another。

那继续说,我们要实现是一个 import axiossnippets 怎么写呢,其实很简单:

{
	"import axios":  {
		"scope": "javascript,typescript",
		"prefix": "ipax",
		"body": [
			"import axios from 'axios';"
		],
		"description": "import axios"
	}
}

效果如下:

axios 代码片段
axios 代码片段

输入 ipax 即可看到效果。

方式二: 通过 vsocde 脚手架生成一个 snippets vscode插件

如果你所做的项目是一个多人协作的项目,大家都希望共用你的 snippets 提高效率,那么你可以用过写一个 vscode snippets 插件的形式,写一个vscode snippets。

vsocde 的脚手架使用非常简单,因为官方给的工具( yo & generator-code )用起来实在是太好用了。

Step.1

$ npm install -g yo generator-code

Step.2

yo code, 生成 snippets vscode 插件的代码目录结构:

等待安装即可生成一份插件的脚手架代码即可

然后在生成的脚手架里面的 package.json 中添加下列代码:

"contributes": {
		"snippets": [
			{
				"language": "javascript",
				"path": "./snippets/snippets.json"
			}
		]
	},

意思是添加一个 javascript 的 snippets,然后在 "./snippets/snippets.json" 下建立 snippets 即可,语法就像上面的语法是一样的。

image.png
image.png

写好以后直接点击这里即可进入调试,非常方便。

vsoce 插件
vsoce 插件

打包发布的流程,可以点击这里查看,我这里简单引用一下文档的命令。

# 安装打包工具
$ npm install -g vsce

$ cd myExtension

# 打包
$ vsce package

# 发布
$ vsce publish
# <publisherID>.myExtension published to VS Code MarketPlace

发布后同事就可以使用你开发的插件啦。当然如果代码敏感,不能发布,可以打包 .vsix 文件,通过 vsix 文件安装。

总结

懒促使我们不停地优化工具,提高编码的效率,把更多的时间投入到书写更为优雅,效率更高的代码上,释放出来时间去做更多能释放时间的工具,是一个非常好的良性循环。 vscode 插件能做的事情非常多,大家可以继续探索! have fun!

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 两种方式创建 snippets
    • 方式一:通过 vscode 客户端创建
    • 方式二: 通过 vsocde 脚手架生成一个 snippets vscode插件
      • Step.1
        • Step.2
        • 总结
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档