DEV Community

Cover image for Development Made Easy for Lazy and Productive Devs - Get Code Snippets for Full or Basic Props for Native or Expo Components
Stephen Omoregie
Stephen Omoregie

Posted on

Development Made Easy for Lazy and Productive Devs - Get Code Snippets for Full or Basic Props for Native or Expo Components

While building my project (Quotix), which I'm using to learn and apply my knowledge in Mobile Development using Expo (React Native Framework), I sometimes have to:

  1. Jump back again to the docs
  2. Search for a particular component
  3. Take note of the props that suit my needs
  4. Hop back to the IDE

Phew! I'm thrilled to share that I've just published my first VSCode extension on the Marketplace (React Native and Expo Code Snippets). 🎉

Motivation

As a newcomer to React Native with Expo, I found it tiring to constantly switch between my editor and the documentation to check component props. This inspired me to create an extension that streamlines this process.

The Game Changer for me!

With my extension, developers can simply type _exp or _rn to access a list of code snippets, including basic and full props for components (React Native or Expo-specific). It's a fantastic way to enhance productivity and keep the development flow uninterrupted. 💡💻

Image Example usage

With more than 70+ (and counting) snippets for many of the components, or implementations for (ContextApi, Location, Camera, Permissions), now you can speed up your development process. No need to try to remember the props; just type _rn or _exp for IntelliSense to trigger the component you want, and you pick out what you need and toss out what you don't.

Get the Extension Now and Try it out

https://marketplace.visualstudio.com/items?itemName=Cre8steveDev.react-native-and-expo-code-snippets&ssr=false#review-details

If you're a React Native or Expo Developer, you will find this extension useful, as I have too.

Wanna Try building your Own Extension?

If you're feeling adventurous and would like to create productivity-aiding tools for your development environment. It's quite easy.

  1. Install the Yeoman and VSCode Extension Generator
npm install -g yo generator-code
Enter fullscreen mode Exit fullscreen mode
  1. Generate the extension project
yo code 
Enter fullscreen mode Exit fullscreen mode

Follow the prompt to choose the type of project you want to work on.

  1. Define your snippets in the snippets.code-snippets file using the snippet language, kindda like json (you can look up the repository for the extension to get an idea of how it's done and the general project structure @ https://github.com/Cre8steveDev/React-Native-and-Expo-Code-Snippets

Learning Resource:

  1. https://code.visualstudio.com/api/language-extensions/snippet-guide
  2. https://code.visualstudio.com/api/working-with-extensions/publishing-extension

Top comments (1)

Collapse
 
john_muriithi_swe profile image
John Muriithi

Great Post