使用“用户代码片段”提高vscode 开发效率

由于经常需要写一些重复的代码,比较繁琐,所以就尝试了下vscode的用户代码片段,发现很适合这种场景。

先看一个例子

  • react中 使用useState,可以自动补全set后的信息,并且是小驼峰。

使用步骤

1. 打开VScode ,按 cmd + shift + p,找到 配置用户代码片段

2. 新建或者使用现有的代码片段都可,选择一种方式进入

3. 然后配置好自己的代码片段

配置好下面的片段即可完成 开头代码useState的自动补全

bash 复制代码
{
    "React useStateAutoCompelte": {
      "prefix": "useStateAutoCompelte",
      "body": [
            "const [${1/(.*)/${1:/camelcase}/}, set${1/(.*)/${1:/capitalize}/}] = useState($0);"
      ],
      "description": "Create a useState hook with useStateAutoCompelte"
    },
          
}

Snippets

推荐一个 sinippets 在线转化,可以很清晰对应上

snippet-generator.app/?descriptio...

如果还有更多自定义比较强的需求,需要看下 下面的链接,还是比较灵活的。code.visualstudio.com/docs/editor...

最后配几个常见的例子

css居中

swift 复制代码
{
	"center by centerAbsolute": {
	  "prefix": "centerAbsolute",
	  "body": [
		"position: absolute;\nleft: 50%;\ntop: 50%;\ntransform: translate(-50%, -50%);"
	  ],
	  "description": "set x center  by absolute"
	},
	"center by centerFlex": {
	  "prefix": "centerFlex",
	  "body": ["display: flex;\njustify-content: center;\n align-items: center;"],
	  "description": "set x center  by flex"
	}
}

react FC组件demo

swift 复制代码
{
    "react functional Compoent": {
      "prefix": "reactFunctionDemo",
      "body": [
            "import React, { useState, useEffect } from \"react\";",
            "",
            "export default () => {",
            "  return <h1>hello</h1>;",
            "};",
            ""
      ],
      "description": "react functional Compoent"
    },
}

最后

"通义灵码" 也能实时分析代码上下文,给出有用的代码推荐,感兴趣的可以尝试下,tongyi.aliyun.com/lingma

下图的 灰色部分就是他给出的代码建议

参考链接:

相关推荐
烛阴4 分钟前
简单入门Python装饰器
前端·python
袁煦丞1 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作
天天扭码1 小时前
从图片到语音:我是如何用两大模型API打造沉浸式英语学习工具的
前端·人工智能·github
鱼樱前端2 小时前
今天介绍下最新更新的Vite7
前端·vue.js
coder_pig3 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
万少3 小时前
01-自然壁纸实战教程-免费开放啦
前端
独立开阀者_FwtCoder3 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
yuki_uix3 小时前
AI辅助网页设计:从图片到代码的实践探索
前端
我想说一句3 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
陈随易3 小时前
MoonBit助力前端开发,加密&性能两不误,斐波那契测试提高3-4倍
前端·后端·程序员