mySnippet

• 前端常用的代码片段，直接输入前缀会车即可生成对应的代码片段，提高开发效率！

命令

React

rc(js)

import React, { Component } from 'react'

export default class Test extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  return (
    <div>
     test
    </div>
  )
}

rf(js)

import React from 'react'

export default function Test() {
  return <div>Test</div>
}

rfh(js)

import React, { useState, useEffect } from 'react'

export default (props) => {
  const [state, setState] = useState()

  useEffect(() => {}, [])

  return <div>test</div>
}

rnf

import { StyleSheet, Text, View } from 'react-native'
import React from 'react'

export default () => {
  return (
    <View style={styles.root}>
      <Text>test</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  root: {
    height: '100%',
    width: '100%',
    background: '#f5f5f5',
  },
})

rnfh

import { StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native'
import React, { useState, useEffect } from 'react'

export default () => {
  const [count, setCount] = useState(0)

  useEffect(() => {
    console.log('useEffect')
    return () => {
      console.log('useEffect return')
    }
  }, [count])
  return (
    <View style={styles.root}>
      <Text>test</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  root: {
    height: '100%',
    width: '100%',
    background: '#f5f5f5',
  },
})

tsfc(ts)

import React, { FC } from 'react'

type TestProps {

}

export const Test: FC<TestProps> = ({  }TestProps) => {
  return (
    <div>
     test
    </div>
  )
}

tsfce(ts)

import React from 'react'
type TestProps = {}

const Test: React.FC<TestProps> = ({}: TestProps) => {
  return (
    <div>
      <h1>test</h1>
    </div>
  )
}

export default Test

Vue

vbts(ts)

<template>
  <div>
    <span>test</span>
    <span>{{ count }}</span>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs } from 'vue'

const state = reactive({
  count: 0,
})

const { count } = toRefs(state)
</script>

<style lang="scss" scoped></style>

vbt(ts)

<template>
  <div>
    test
  </div>
</template>

<script lang="ts">
import { reactive, toRefs } from 'vue'

export default {
  setup () {
    const state = reactive({
      count: 0,
    })

    return {
      ...toRefs(state),
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

vbts(ts)

<template>
  <div>
    <span>test</span>
    <span>{{ count }}</span>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs } from 'vue'

const state = reactive({
  count: 0,
})

const { count } = toRefs(state)
</script>

<style lang="scss" scoped></style>

Egg.js

ec

const Controller = require('egg').Controller

class TestController extends Controller {
  async index() {
    const { ctx, app } = this
  }
}

module.exports = TestController

es

const Service = require('egg').Service

class TestService extends Service {
  async index() {
    const { app } = this
  }
}

module.exports = TestService