由于经常需要写一些重复的代码,比较繁琐,所以就尝试了下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
下图的 灰色部分就是他给出的代码建议
参考链接: