Skip to content

striver-snippets

一个 vscode 代码片段插件，包含 js ts tsx css 的常用 snippets，便于平时开发工作。

🎯 使用方法

在 VSCode 中安装此插件
在相应的文件类型中输入上述代码片段的前缀
按下 Tab 键或 Enter 键即可插入对应的代码片段

🎯 支持的文件类型

JavaScript (.js)
TypeScript (.ts)
React TypeScript (.tsx)
CSS (.css)
Less (.less)
SCSS (.scss)

📋 代码片段使用指南

JavaScript/TypeScript/React 相关代码片段

日志相关

触发前缀	描述	代码示例
`clo==`	带分隔符的对象日志输出	`console.log('=======object=======', object);`
`clo=t`	带分隔符的文本日志输出	`console.log('=======object=======');`

导入导出相关

触发前缀	描述	代码示例
`im less`	导入 less 样式文件	`import styles from './index.module.less';`
`im classNames`	导入 classNames 库	`import classNames from 'classnames';`
`imr`	导入 React	`import React from 'react';`

React 组件相关

触发前缀	描述	代码示例
`rfcd`	创建默认导出的 React 函数组件	代码较长，请使用触发前缀查看
`rfc`	创建导出的 React 函数组件	代码较长，请使用触发前缀查看

Hooks 相关

触发前缀	描述	代码示例
`useStateSnippet`	React useState Hook	`const [first, setFirst] = useState(second)`
`useEffectSnippet`	React useEffect Hook	`useEffect(() => { first }, [second])`
`useContextSnippet`	React useContext Hook	`const first = useContext(second)`
`useMemoSnippet`	React useMemo Hook	`useMemo(() => first, [second])`
`useRefSnippet`	React useRef Hook	`const first = useRef(second)`
`useImperativeHandleSnippet`	React useImperativeHandle Hook	代码较长，请使用触发前缀查看
`useCallbackSnippet`	React useCallback Hook	`const first = useCallback(second, [third])`
`useLayoutEffectSnippet`	React useLayoutEffect Hook	`useLayoutEffect(() => { first }, [second])`
`useReducerSnippet`	React useReducer Hook	`const [state, dispatch] = useReducer(first, second, third)`
`useLockFnSnippet`	useLockFn Hook	`const first = useLockFn(async () => { second })`

CSS 相关代码片段

触发前缀	描述	代码示例
`t-ell`	单行文本超出省略	`overflow: hidden; text-overflow: ellipsis; white-space: nowrap;`
`t-ell-more`	多行文本超出省略	代码较长，请使用触发前缀查看
`f-center`	CSS Flex 居中	`display: flex; justify-content: center; align-items: center;`

公司专用代码片段

触发前缀	描述	代码示例
`ecUseColumns`	useColumns 报表配置	代码较长，请使用触发前缀查看
`baseReportPage`	报表组件 snippet	代码较长，请使用触发前缀查看