JianHao 的代码片段
剑豪日常开发中常用的代码片段
支持的语言类型
- Vue (.vue)
- JavaScript (.js)
- TypeScript (.ts)
- JavaScript React (.jsx)
- TypeScript React (.tsx)
- CSS/Less/SCSS (.css/.less/.scss)
一、基础代码片段
clg
- 打印日志
console.log("$0");
imd
- import 导入整个模块
import ${2:moduleName} from ${1:module};
imf
- 解构形式 import 导入
import { $2 } from "${1:module}";
const
- 定义常量
const $1 = $2;
let
- 定义变量
let $1 = $2;
if
- 条件语句
if ($1) {
$0;
}
interface
- 定义接口
interface $ {
1: Props;
}
{
$0;
}
keyof
- 定义对象 key 的类型
type ${2:Type} = keyof typeof ${1:Object};
options
- 创建枚举数组
export const $1 = [
{ label: ${2:""}, value: $3 }
];
map
- 创建枚举对象
export const $1 = {
$0,
} as const;
todo
- TODO 注释
// TODO: 待完善
fixme
- FIXME 注释
// FIXME: 待修复
tr
- try-catch 语句
try {
${0:handle}()
} catch (e) {
console.error(e);
}
handle
- 创建箭头函数
const handle${1} = ($2) => {
${3}
};
二、Vue 代码片段
ref
- 创建 ref
const $1 = ref<$2>($3);
reactive
- 创建 reactive
const $1 = reactive<$2>({
$3,
});
computed
- 创建计算属性
const $1 = computed(() => {
$2;
});
watch
- 创建监听器
watch(
() => $1,
(newVal, oldVal) => {
$2;
},
{ deep: true }
);
watchEffect
- 创建副作用监听
watchEffect(() => {
$1;
});
mounted
- 创建 onMounted 钩子
onMounted(() => {
$1;
});
props
- 定义 Props
const props = defineProps<{
${1:propName}: ${2:type}
}>();
emits
- 定义 Emits
const emit = defineEmits<{
${1:eventName}: [$2]
}>();
setup
- 创建 setup script
<script setup lang="ts">
$0;
</script>
style
- 创建样式块
<style scoped lang="less">
$1
</style>
v-for
- 循环指令
v-for="(item, index) in $1" :key="${2:index}"
validate
- 表单验证
await formRef.value?.validate();
message.success("操作成功!");
$1;
submit
- 表单提交
const handleSubmit = async () => {
await formRef.value?.validate();
message.success("操作成功!");
$1;
};
三、React 代码片段
useState
- 创建状态
const [$1, set${1/(.*)/${1:/capitalize}/}] = useState<$2>($3);
useMemo
- 创建记忆值
const $1 = useMemo(() => {
$2;
}, [$3]);
useRef
- 创建引用
const $1 = useRef<$2>();
useEffect
- 创建副作用
useEffect(() => {
$1;
}, [$2]);
ims
- 引入样式
import styles from "./index.less";
class
- 定义类名
className={styles.$1}
useRequest
- 创建请求
const { data: ${1:data}, loading, run: ${2:runFetch} } = useRequest(${3:api}, {
manual: true,
onSuccess: (res) => {
$4
}
});
col
- 创建表格列
const columns: ColumnsType<${1:type}>[] = [
{
title: "${2:标题}",
dataIndex: "${3:key}"
}
];
form.validateFields().then((values) => {
$1;
});
useQueryParam
- URL 参数管理
import { useQueryParam } from "hooks";
const { query, updateQuery } = useQueryParam<${1:IQuery}>(${2:initQuery});
四、CSS 代码片段
flex-center
- Flex 居中布局
display: flex;
align-items: center;
justify-content: center;
vertical-center
- 垂直居中
position: absolute;
top: 50%;
transform: translate(0, -50%);
horizontal-center
- 水平居中
position: absolute;
left: 50%;
transform: translate(-50%, 0);
ell1
- 单行文本溢出
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
ell2
- 多行文本溢出
display: -webkit-box;
width: $ {
1: 100%;
}
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: $ {
2: 2;
}
-webkit-box-orient: vertical;
word-wrap: break-word;
word-break: break-all;
border1px
- 1px 边框实现
position: relative;
&::before {
position: absolute;
top: $ {
1: 0;
}
left: $ {
2: 0;
}
box-sizing: border-box;
width: 100%;
height: 100%;
border-color: $ {
3: @color;
}
border-style: solid;
border-width: $ {
4: 0 0 1px 0;
}
border-radius: $ {
5: 0;
}
transform-origin: left top;
content: "";
pointer-events: none;
}
五、其他
mss
- 成功提示信息
message.success("$1");
msr
- 错误提示信息
message.error("$1");
ell
- 文本省略组件
<Ellipsis value={${1:""}} lineClamp={${2:1}} />