Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>FHelperNew to Visual Studio Code? Get it now.
FHelper

FHelper

xjxiang

|
37 installs
| (1) | Free
front end common function expansion
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

FHelper

封装一些前端常用的代码

运行 npm script

可以直接呼出 vscode 命令面板 查询FHelper 并运行 running script 命令

可以使用快捷键 win:ctrl+shift+h , mac: cmd+shift+h

snippet 代码支持

css

指令作用:生成水平垂直居中

指令前缀: fgfcenter

display:flex;
justify-content:center;
align-items:center

指令作用:生成一个圆

指令前缀: fgcircle

width:$1;
height:$1;
border-radius:50%

javascript

指令作用:打印 console.log

指令前缀: cl

console.log($1)

指令作用:生成 new Prmoise

指令前缀: fnpromise

new Promise(function (resolve , reject){
   $1
})

指令作用:生成查询函数

指令前缀: fgsearch

function $1(value,array){
   return array.filter((item) => item$2 == value)
}

指令作用:生成去重函数

指令前缀: fgunique

function unique ( arr ) {
   return Array.from(new Set(arr))
}

指令作用:生成递归函数

指令前缀: fgrecursion

function $1 ( item ) {
   if(item.children.length) {
      for(let i = 0 ; i < item.children.length  ; i ++){
           $1(item.children[i])
      }
   }
}

指令作用:生成格式化时间函数

指令前缀: fgformatdate

function dateFormat (fmt , date ) {
   var o = { 
       'M+' : date.getMonth()+1,
       'd+' : date.getDate(),  
       'H+' : date.getHours(),
       'm+' : date.getMinutes(),
       's+' : date.getSeconds(),       
       'q+' : Math.floor((date.getMonth()+3)/3), 
       'S'  : date.getMilliseconds()            
   };
   if(/(y+)/.test(fmt)) {
       fmt=fmt.replace(RegExp.\$1, (date.getFullYear()+'').substr(4 - RegExp.\$1.length)); 
   }
   for(var k in o) {
       if(new RegExp('('+ k +')').test(fmt)){
           fmt = fmt.replace(RegExp.\$1, (RegExp.\$1.length==1) ? (o[k]) : (('00'+ o[k]).substr((''+ o[k]).length)));
       }
   }
   return fmt; 
} 

指令作用:生成 for 语句

指令前缀: fgfor

for(let i = 0; i < $1.length ; i ++) {
   $2
}

指令作用:生成 forEach 方法

指令前缀: fgforeach

$1.forEach(function (item) {
   $2
})

指令作用:导入 vue3

指令前缀: fivue3

import { $1 } from 'vue'

vue

指令作用:生成一个 defineComponent 组件

指令前缀: fvdefinec

<template>

</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
   $1
})
</script>

指令作用:生成一个 setup script 组件

指令前缀: fvsetups

<template>

</template>
<script setup>
import { $1 } from 'vue'
$2
</script>
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft