如果你现在还在手动敲每一行代码,或者是使用
ctrl-c, ctrl-v
粘代码,那实在是太累了,其实你可以释放你自己。把省下的时间用来写更有趣的代码!🌝
可能你用过一些 snippets ,也就是我们平时说的代码片段,就是只要敲几个字母,自动生成一大段代码,例如 React
创建一个组件的 snippets(如下图),可以极大的减少自己敲代码的代码量,而且能很好的节约时间,看起来是不是很 cool,其实自己写一个来生成自己的代码也很简单,下面我们来实现一个。
axios 是我们常用的用来发送请求的库,那么我们经常会这样写
import axios from 'axios';
那么我们如何通过 snippets 来减少这个代码量呢?
我们可以像下面一样建立一个全局的snippets代码片段。
在打开的 json 文件中,我们可以看到有几行注释说明,告诉你把整个 vscode 全局的 snippets 放在这里,每个代码片段包含四个字段。
{
// Example:
// "Print to console": {
// "scope": "javascript,typescript",
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
}
javascript
, typescript
等;其实上面 🌰代码中, $1 、$2 是生成代码后按 tab 会停留给你输入的地方,而 $0 是生成代码后首先停留的光标的位置。后面还会遇到诸如 ${1:label}, ${2:another}
这样的占位符,其实还是一样的,但是占位符会有数字后面的英文名,例如上面的就是 label, another。
那继续说,我们要实现是一个 import axios
的 snippets
怎么写呢,其实很简单:
{
"import axios": {
"scope": "javascript,typescript",
"prefix": "ipax",
"body": [
"import axios from 'axios';"
],
"description": "import axios"
}
}
效果如下:
输入 ipax 即可看到效果。
如果你所做的项目是一个多人协作的项目,大家都希望共用你的 snippets 提高效率,那么你可以用过写一个 vscode snippets 插件的形式,写一个vscode snippets。
vsocde 的脚手架使用非常简单,因为官方给的工具( yo & generator-code )用起来实在是太好用了。
$ npm install -g yo generator-code
yo code, 生成 snippets vscode 插件的代码目录结构:
等待安装即可生成一份插件的脚手架代码即可
然后在生成的脚手架里面的 package.json
中添加下列代码:
"contributes": {
"snippets": [
{
"language": "javascript",
"path": "./snippets/snippets.json"
}
]
},
意思是添加一个 javascript
的 snippets,然后在 "./snippets/snippets.json"
下建立 snippets 即可,语法就像上面的语法是一样的。
写好以后直接点击这里即可进入调试,非常方便。
打包发布的流程,可以点击这里查看,我这里简单引用一下文档的命令。
# 安装打包工具
$ 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 删除。