稍加总结就不难看出,这些问题都能通过一些代码片段去解决
问题又来了:如何在项目中共享自定义的代码片段?
编辑器以VS Code
为例,引入自定义代码片段的常见方案有如下几种:
当前项目
目前最适合当前场景的方案2-2
.vscode
文件夹.code-snippets
结尾的文件如:
如何编写?
first.code-snippets
{ "Print to console": { // 代码片段名称 "scope": "javascript,typescript", // 生效的语言 // (在文件中敲入prefix即可生成body中的内容) "prefix": "lg", // 片段缩写 "body": [ // string[] 片段的完整内容,每个string代表一行 "console.log('$1');", "$2" ], // 在文件中输入完prefix时候,弹出此内容 "description": "Log output to console" } } 复制代码
保存后就可以在工作区生效
$1
,$2
,$3
Tab
切换$0
用于设置光标最终的位置${1|op1,op2|}
${1:default}
使用 {name:default} 可以插入变量的值。如果未设置变量,则会插入其默认值或空字符串。当变量未知(未定义其名称)时,会将插入的变量名称转换为占位符。
VS Code内置了许多变量这里就不赘述了,
变量文档英/掘金翻译
通过在VS Code中创建.vscode
文件夹写入x.code-snippets
配置文件即可实现自定义代码块的共享
局限
.vscode
目录生效深度只能为1.vscode
目录中部分库(组件/方法/语言)等提供了Snippets插件,但还有一些库没有提供,想把自己的代码块共享给其它人,开发插件的学习成本较高
有没有一种办法能够:
我的设想:
Snippets文件以npm包的形式发布到npm仓库,本地通过一个VS Code插件自动扫描node_modules中的代码片段文件,然后使其在编辑器中生效
接下来去调研看看是否有现成的这种插件,没有的话自己搞个23333
参考文章: