10 Practices in VSCode to Hasten Your React Development Flow
Tags: node, webdev, javascript, react
Published: 2020-01-11 16:48:03

Find me on [medium](https://medium.com/@jsmanifest)


If you're a Visual Studio Code user and love to develop projects in react, then you've probably been experiencing plenty of annoying repetitive code like `React.useState`, `React.useContext`, `React.useReducer(reducer, initialState)`, and so on.

These individual keys are _scattered in all different directions on the keyboard_ and it can become irritating having our poor little fingers write these characters over and over in all of our react projects.

If you type `React.useState` on your keyboard, your finger tips will go in these directions:

![keyboard react.usestate finger tips flow](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/10-vscode-practices-to-hasten-your-react-development-process/keyboard.png)

I may be acting overdramatically to this simple issue, but my point for this post is not about keystrokes. It's about keystrokes _and lots of other things_ when we develop apps with react today. I've learned that we should take advantage of all the opportunities available to us as much as we can to mitigate unnecessary stress because our health and time are precious.

With that being said, I wanted to take the time to write this post to help react developers like you and I find ways to preserve as much time and energy as possible by informing you of useful ways you can use to hasten your react development flow!

## 1. Extension: User Snippets

I've seen many great things happen as react developers in the history of its existence, and [User Snippets](https://code.visualstudio.com/docs/editor/userdefinedsnippets) is one of them.

This handy VSCode extension allows you to define your own custom snippets that you can reuse an infinite number of times throughout your projects _just by pressing a couple of letters_.

I work at a company that is having their platform built with react, and to my surprise there were some people who were developing in react react without knowing that this feature even existed.

So what does it do?

This feature lets you create any custom snippet that you can generate right on top of your code just by typing a couple of letters (which you declare with a custom prefix).

For example, when we create a new component that is going to use the `React.useReducer` API, we'd probably have to declare an initial state , a reducer function, and something like `[state, dispatch] = React.useReducer(reducer, initialState)` _at minimum_ to make it happen:

```tsx
const initialState = {
  //
}

function reducer(state = initialState, action) {
  switch (action.type) {
    default:
      return state
  }
}

function MyComponent() {
  const [state, dispatch] = React.useReducer(reducer, initialState)

  return <div />
}
```

You can save precious time and energy by putting this into your user snippets like below:

```json
{
  "my React.useReducer snippet": {
    "prefix": "rsr",
    "body": [
      "const initialState = {",
      "  //$1",
      "}",
      "",
      "function reducer(state = initialState, action) {",
      "  switch (action.type) {",
      "    default:",
      "      return state",
      "  }",
      "}",
      "",
      "function MyComponent() {",
      "  const [state, dispatch] = React.useReducer(reducer, initialState)",
      "  ",
      "  return <div />",
      "}"
    ]
  }
}
```

_All you have to do_ is press `rsr` and this code will automatically be written out for you:

![react usereducer user snippets auto generated snippet]()

Here are _some_ common snippets I like to use throughout my react projects:

Quickly testing CSS elements to see if they look right by giving them temporary borders:

```json
{
  "border test": {
    "prefix": "b1",
    "body": "border: 1px solid red;"
  },
  "border test2": {
    "prefix": "b2",
    "body": "border: 1px solid green;"
  },
  "border test3": {
    "prefix": "b3",
    "body": "border: 1px solid magenta;"
  },
  "border test4": {
    "prefix": "b4",
    "body": "border: 1px solid blue;"
  },
  "border test5": {
    "prefix": "b5",
    "body": "border: 1px solid #fe7200;"
  }
}
```

I usually have a `components` folder with generic primitive components like `Button` for example, in every project:

```json
{
  "import Button from 'components/Button'": {
    "prefix": "btt",
    "body": "import Button from 'components/Button'"
  }
}
```

Setting up / cleanup something before each test:

```json
{
  "beforeEach(() => {})": {
    "prefix": "bfe",
    "body": ["beforeEach(() => {", "  $1", "})"]
  }
}
```

Some quick line disablers:

```json
{
  "// @ts-ignore": {
    "prefix": "tsg",
    "body": "// @ts-ignore"
  },
  "eslint disable line": {
    "prefix": "eds",
    "body": "// eslint-disable-line"
  }
}
```

Importing react:

```json
{
  "import react": {
    "prefix": "reaa",
    "body": "import React from 'react'"
  }
}
```

This isn't a full list of snippets I use but I hope it makes you understand how much time and energy you can save by taking advantage of User Snippets.

> Bonus: Take it up to the next level with [Project Snippets](https://marketplace.visualstudio.com/items?itemName=rebornix.project-snippets), a VSCode that provide the same functionality except in the _workspace level_.

## 2. Extension: Prettier

If you aren't using prettier, then please, I am begging you to drop everything and [use it](https://prettier.io/).

## 3. Extension + Package: TypeScript + ESLint

Approximately four years ago when Promises oficially made its way into the [ECMAScript 2015 Specification](http://www.ecma-international.org/ecma-262/6.0/), the react ecosystem was _booming_ of revolutionary technology that changed how we develop web apps today.

TypeScript at this time was among them as it was making its way into the react ecosystem and gradually became widely adopted in the community to this day--and for good reasons!

TypeScript is such a powerful tool that allows you to save plenty of time and energy _before_ potential bugs even have a chance to happen.

In addition to the features it [normally provides](https://www.typescriptlang.org/index.html), it helps document your react components, prevent future bugs from happening and teaches you a lot about the JavaScript language itself without you having to spend a single dime on an ebook to learn weird stuff in the language.

Adopting TypeScript with ESLint into your react projects will help you in situations where we become oblivious to how react works:

![react hooks typescript lint](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/10-vscode-practices-to-hasten-your-react-development-process/react+hooks+typescript+lint.png)

## 4. Shortcut: Duplicate Line Up/Down

`Ctrl + D` will save a lot of your time.

## 5. Shortcut: Find All Occurrences in the Current File

Highlighting a keyword of your choice in a file and pressing `Ctrl + Shift + L` will select all occurrences of the keyword.

This is useful when you want to rename a component because apparently we always have _at least_ three occurrences when a component has children:

```jsx
import React from 'react'

function App() {
  return <h2>Useful content</h2>
}

function Root() {
  return (
    <App>
      <p>Will I even be rendered?</p>
    </App>
  )
}
```

If we want to rename `App` to something else we have to select the component declaration as well as the two occurrences in the `Root` render block.

## 6. Shortcut: Find a File in Your Project

It can easily become frustrating having to use the File Explorer all the time when you're looking for a specific file. This becomes a huge issue when you want to analyze a file in the _node_modules_ directory because VSCode does this to you:

![file explorer node_modules enlargement](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/10-vscode-practices-to-hasten-your-react-development-process/open+file+by+name+search.png)

The red line indicates how much content you have left to scroll over, and the blue indiciates the size of the scroll bar that shrinks the more content there is. This impacts performance when expanded.

You can easily find and open a file that is located _anywhere_ in the project by searching its name without having to move a single millimeter from your mouse.

Simply press `Ctrl + T`, type in the file name and you're done.

## 7. Extension: Custom TODO highlights

This is an extension that may seem valuable for fun use, but it has become such a powerful tool to me over time in serious environments.

First of all, it is _incredibly important_ to write down todos somewhere as long as you're able to be reminded of something. It can be on the Evernote app, your composition book, a ripped piece of paper, and so on. If you use [TODO Highlights](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight) like I do, you're putting todos right on top of code you're writing on in comments. It's incredibly useful with the _TODO Highlights_ extension used in conjunction because they become color coded on the screen when you prefix a line with `TODO:` like below:

![todo default highlight](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/10-vscode-practices-to-hasten-your-react-development-process/todo+highlight1.png)

But the power of _TODO Highlights_ begins to shine more as you begin creating your own custom keywords and color effects to them:

![todo highlights2 note](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/10-vscode-practices-to-hasten-your-react-development-process/todo+highlight2+note.png)

This has become a valuable feature because I'm able to quickly regain focus as well as an understanding of what is going on in each file no matter where I turn back to.

My favorite _todohighlight_ keyword is `BUG:` since it's red. We normally associate red with errors or something dangerous so this easily catches my attention on critical parts of my code:

![todo highlights3 bug](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/10-vscode-practices-to-hasten-your-react-development-process/todo+highlight2+bug.png)

## 8. Extension: (Any cool theme in the Visual Studio Marketplace)

Developing react apps in conjunction with a cool VSCode color theme has been a critical asset in keeping me entertained resulting in better quality code.

It's incredibly important to use a theme you like because the color codes of your react components have a certain _"look"_ or _"feel"_ to them which will help you have a easier time developing your react apps, as we can see below:

> Non-components

![something non react components](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/10-vscode-practices-to-hasten-your-react-development-process/something-non+react+components.jpg)

> Components

![something react components](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/10-vscode-practices-to-hasten-your-react-development-process/something+react+components.JPG)

## 9. Extension: [ES7 React/Redux/GraphQL/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)

This will be very helpful to you.

I personally don't use this anymore because I use my own snippets. But in the past it made an immense positive impact on my development workflow.

## 10. Feature: Breadcrumbs

Boy, time sure does fly by fast! It feels like yesterday when [breadcrumbs](https://code.visualstudio.com/updates/v1_26) was released in VScode.

This continues to give me an easier time when developing in react, in times I least expect it to.

Given the nature of react's component children/parent hierarchy, this just so happens to go along well when developing in react (as long as you built your directory structure according to a hierarchy) because it basically _shows_ you that a component file was derived from the parent directory (which in most of my cases is always a component that is default exported from an `index.tsx` file):

![breadcrumbs](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/10-vscode-practices-to-hasten-your-react-development-process/breadcrumbs.jpg)

The breadcrumbs above shows me that `Add` is a child of `Birthdays` which is a child of `Birthdays` which is a route in the `Admin` component.

Breadcrumbs are enabled by default. But the point is to not take the breadcrumbs feature for granted. It silently becomes helpful in unexpected ways, so put more of your attention to it!

_Bonus_: Some [breadcrumbs tips and tricks](https://vscode.pro/tip/16/) for the interested.

## Conclusion

And that concludes the end of this post! I hope you found this to be valuable and look out for more in the future!

Find me on [medium](https://medium.com/@jsmanifest)