Before we start 🟠
You can remember and find the right keys for these snippets on your keyboard with ease. Add this awesome set to 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 13
th of May.👋🎉
Overview
Snippet |
Description |
|
asy |
Arrow function named export |
ℹ️ |
asd |
Arrow function default export |
ℹ️ |
asfr |
File related function |
ℹ️ |
aswr |
Folder related function |
ℹ️ |
uas |
useActionState hook |
ℹ️ |
us |
useState hook |
ℹ️ |
uo |
useOptimistic hook |
ℹ️ |
uref |
useRef hook |
ℹ️ |
ue |
useEffect hook |
ℹ️ |
ule |
useLayoutEffect hook |
ℹ️ |
cctx |
Create Context |
ℹ️ |
fli |
FlatList |
ℹ️ |
ec |
Expo Component |
ℹ️ |
ss |
StyleSheet |
ℹ️ |
ssac |
StyleSheet align center |
ℹ️ |
ssrw |
StyleSheet row |
ℹ️ |
ess |
Export StyleSheet |
ℹ️ |
ersea |
useLocalSearchParams hook |
ℹ️ |
ers |
Expo Router Stack layout |
ℹ️ |
ert |
Expo Router Tabs layout |
ℹ️ |
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";
export const |Context = createContext(null);
export const |ContextProvider = ({ children }) => {
return (
<|Context value={{}}>
{children}
</|Context>
);
}
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'