专栏首页前端探索你还在一个字一个字敲代码吗?【vscode snippets 入门教程】
原创

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

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

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

两种方式创建 snippets

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

import axios from 'axios';

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

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

我们可以像下面一样建立一个全局的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 代码片段

输入 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

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

vsoce 插件

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

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

$ cd myExtension

# 打包
$ vsce package

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

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

总结

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

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【开发指南】(二)Ionic3开发工具插件推荐

    ionic主要使用网页的开发方式,一般的web开发的IDE就可以了,有大型的也有轻量级的供考虑,每个开发人员都有自身喜爱和倾向的IDE,在此不一一列举了,个人推...

    IT晴天
  • 【告别复制粘贴】动态模板生成小技巧

    ? 这是第 75 篇不掺水的原创,想要了解更多,请戳上方蓝色字体:政采云前端团队 关注我们吧~

    政采云前端团队
  • VS code常用插件推荐(总结整理篇)

    vscode是微软开发的的一款代码编辑器,就如官网上说的一样,vscode重新定义(redefined)了代码编辑器。当前市面上常用的轻型代码编辑器主要是:su...

    孙叫兽
  • 将python用go写

    对于一个老鸟程序员来说,仅仅掌握一门语言是不够的。现在python感觉用烂了,连公司的HR,销售的美女们都在学。

    赵云龙龙
  • 编辑器VSCode使用心得

    工欲善其事必先利其器,趁手的工具会使我们开发事半功倍。 市面上的编辑器我用过许多,

    陌上寒
  • VSCode插件开发:LaTeX Snippets

    请注意,本文编写于 442 天前,最后修改于 126 天前,其中某些信息可能已经过时。

    gyro永不抽风
  • VS Code 折腾记 - (10) 你想发布自己捣鼓的snippets到VSCode插件市场!

    em..自认为英文不错和自学能力灰常好的大佬,到这里可以停止阅读了,省的浪费时间!

    CRPER
  • Vue.js小白速成手册01

    建议安装visual Studio Code,下载地址:https://code.visualstudio.com/

    剽悍一小兔
  • 利用 vscode snippets 和项目成员一起提高开发效率

    code snippets 是代码片段的意思,是 vscode 提供的根据某字符串快速补全一段代码的功能,可以提高写代码的效率。

    lingxiaoguang
  • 出炉了! 2021 年将火爆的 10款 VSCode 扩展插件

    VisualStudio Code是开发者社区最流行的一款编辑器。理由之一就是VSCode有许多扩展,可以提高开发的效率。

    编程文青李狗蛋
  • DIY VSCode 插件,让你的开发效率突飞猛进

    Visual Studio Code(简称 VSCode)凭借其占用内存小、文件加载快、稳定性好、插件丰富等等特点,从众多 IDE 中脱颖而出,受到了广大开发人...

    政采云前端团队
  • VSCode前端必备插件,有可能你装了却不知道如何使用?

    在前端开发中,有一个非常好用的工具,Visual Studio Code,简称VS code。

    桃翁
  • 用 VS Code 写 Python,这几个插件是必装的!

    空余时间整理了 2021 年里我认为 Python 编程必备的几个 VS Code 插件,分享一下

    AirPython
  • VScode编辑器神插件!让你入门前端轻松打怪升级!

    腾讯NEXT学位
  • 27 个提升开发幸福度的 VsCode 插件

    Visual Studio Code(也称为VSCode)是一种轻量级但功能强大的跨平台源代码编辑器, 借助对TypeScript 和Chrome调试器等开发...

    前端小智@大迁世界
  • Vscode十大实用插件

    下面是老袁的 VSCode 效果图,用起来6的飞起。大家先关注这个身高170体重170的程序员,然后看最新一期的视频中的效果

    疯狂的技术宅
  • AST in TypeScript 实践

      最近参与了一个 Node 项目脚手架的开发工作,为了提高编码效率,导师提议写一个 VSCode 的插件,功能上大体有点像 snippets 代码段,但比 s...

    JoviCheng
  • Visual Studio Code(CS code)你们都在用吗?或许你们需要看一下这篇博文

    在前端开发中,有一个非常好用的工具,Visual Studio Code,简称VS code。

    Dawnzhang
  • 前端学习的编辑器介绍

    学习前端,那么必要的编辑器是不可缺少的,在这里的话,我主要推荐三款编辑器(仅本人觉得好用哈),这三款编辑器分别是HBuilder、VScode、WebStome...

    守护最温柔的金木

扫码关注云+社区

领取腾讯云代金券