Before we start 🟠

As the saying goes, "God helps those who help themselves". So I accumulated my efforts and did it. And now you, my colleague, as well as me, have enough fingers and toes to count all snippets I've created. In addition snippets' prefix is easy to remember and find the right keys on your keyboard. Add this awesome set, enjoy and boost your productivity.⚡

Note: kebab-case, snake_case, camelCase are formatted in PascalCase.
E.g. primary-btn.jsx + asfr turns into export default function PrimaryBtn() {} etc.

Finally, I dedicate this extension to my dad, who celebrates his birthday on 13th of May.👋🎉

Overview

React

Note: In examples below the vertical bar | is just a positioned cursor.

asy : 💡 Arrow function named export ⬆️

export const Example = () => {
    return (
        <>|</>
    )
}

asd : 💡 Arrow function default export ⬆️

const Example| = () => {
    return (
        <></>
    )
}

export default Example|;

asfr : 💡 Function name relates to file name ⬆️

export default function Example() {
    return (
        <>|</>
    )
}

aswr : 💡 Function name relates to folder (wrapper) name ⬆️

export default function FolderName() {
    return (
        <>|</>
    )
}

uas : 💡 useActionState hook ⬆️

const [error, action, isPending] = useActionState(fn, null);

us : 💡 useState hook ⬆️

const [|, set|] = useState("");
// press `Tab` after typing the value and let magic happen

uo : 💡 useOptimistic hook ⬆️

const [optimistic|, setOptimistic|] = useOptimistic(asyncRes, (state, action) => {});
// press `Tab` after typing the value and let magic happen

uref : 💡 useRef hook ⬆️

const |Ref = useRef(null);

ue : 💡 useEffect hook ⬆️

useEffect|(() => {
    
}, [])
// press `Ctrl`+`Space` to import useEffect

ule : 💡 useLayoutEffect hook ⬆️

useLayoutEffect|(() => {
    
}, [])
// press `Ctrl`+`Space` to import useLayoutEffect

cctx : 💡 Create React Context ⬆️

import { createContext, useContext } from "react";

const |Context = createContext(null);


export const |ContextProvider = ({ children }) => {
    

    return (
        <|Context.Provider value={{}}>
            {children}
        </|Context.Provider>
    );
}

export const use| = () => {
    const value = useContext(|Context);

    if (!value) {
        throw new Error(`use| must be wrapped inside |ContextProvider`);
    }

    return value;
}

React Native, Expo

fli : 💡 FlatList ⬆️

<FlatList|
    data={data|}
    keyExtractor={item => item.id}
    showsVerticalScrollIndicator={false}
    renderItem={({ item }) => (
        <RenderItem| />
    )}
/>

ec : 💡 Expo Component ⬆️

import { View, Text } from 'react-native';

export const Example = () => {
    return (
        <View>
            <Text>Example|</Text>
        </View>
    )
}

ss : 💡 StyleSheet ⬆️

const styles = StyleSheet|.create({
    
})

ssac : 💡 StyleSheet align center ⬆️

container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    gap: 16,|
},

ssrw : 💡 StyleSheet row ⬆️

rowContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    margin: 16,|
},

ess : 💡 Export StyleSheet ⬆️

import { StyleSheet } from "react-native";

export default StyleSheet.create({
    mainContainer: {
        flex: 1,
        backgroundColor: "#fff",|
    },
})

ersea : 💡 useLocalSearchParams hook ⬆️

const { } = useLocalSearchParams();

ers : 💡 Expo Router Stack layout ⬆️

import { Stack } from "expo-router";


export default function StackLayout() {
    return (
        <Stack>
            <Stack.Screen name="|" options={{ | }} />
        </Stack>
    )
}

ert : 💡 Expo Router Tabs layout ⬆️

import { Tabs } from "expo-router";


export default function TabsLayout() {
    return (
        <Tabs
            screenOptions={{|}}
        >
            <Tabs.Screen name="|" options={{ | }} />
        </Tabs>
    )
}

Demo

That's it! Install and happy coding!

Lastly

Just to make your work with this extension more comfortable, you can disable [abc] suggestion in VS Code using following steps:

Ctrl + , opens Settings⚙️ > type "show words" in the Search field > uncheck 'Editor>Suggest: Show Words'