Full-Stack Engine

Recommended VSCode extensions for React

In two previous posts, I gave you my recommended extensions (packages) for Atom to work with Angular, and to work with React. Time has passed, and I decided to try Visual Studio Code, and I have to say that it has many good things, as Atom has too. One of the reasons has dragged me into VSCode is how light and fast it is in comparison to Atom. However, it has its drawbacks as well, I've found is not as good as Atom doing some tasks, like "Lint-ing" code or formatting it. Nevertheless, both have their pros and cons (This is a whole separate topic of discussion for another time ;) ).

This time I want to give my list of recommended extensions for VSCode that makes our life more comfortable when we work in React Projects, doing the usual tasks related to React code, like formatting JSX or formatting ES6 in a lint complaint way.

See also

Let's begin our tour through the list!.

Prettier

Prettier is a JavaScript, TypeScript and CSS formatting for VSCode with ESLint integration.

prettier

To enable ESLint integration, go to Preferences->Seetings and add the following configuration object:

{
    "prettier.eslintIntegration": true,
}

ESLint

As usual, when coding using React as our front-end framework, we're writing ES6 code, which is not strongly typed nor compiled ahead, so it's easy to introduce syntax errors that are not evident until execution time, so to solve these problems, eslint is a must have a tool, checking the most common types of errors as you write.

Auto Close Tag

Auto Close Tag is a simple extension that does a single task, closing tags in HTML markup. However, as simple as it sounds it's something missing in a plain VSCode installation and makes your life easier when writing web content. Auto Close Tag works with plain HTML code as well as with JSX.

usage

Auto Import - ES6,TS,JSX,TSX

This extension let us automatically find and code complete for all available import as we type. Very useful when creating a new component, module index or any other piece of JS code that needs an import from an external module. It works for JavaScript ES6 and TypeScript as well.

giphy

npm Intellisense

A perfect complement to Auto Import. This extension autocompletes npm modules in import statements.

auto_complete

Git History

Git history is one of those extensions we should have independently of the language we use as long as we handle source control with Git. Especially when we work in a large team and need to review the changes history for a file or branch.
Git History site is Market Place list the following features:

  • View and search git log along with the graph and details.
  • View a previous copy of the file.
  • View and search the history
    • View the history of one or all branches (git log)
    • View the history of a file
    • View the history of a line in a file (Git Blame).
    • View the history of an author
  • Compare:
    • Compare branches
    • Compare commits
    • Compare files across commits
  • Miscellaneous features:
    • Github avatars
    • Cherry-picking commits
    • Reverting commits
    • Create branches from a commits
    • View commit information in a treeview (snapshot of all changes)

gitLogv2

Git Lens

Another excellent extension for VSCode to work with Git. Similar to Git History, it provides the changes log for every file and branch we have in the project we're working on, but also offer other useful features, like current line blame at the end of each line of code.
Git Lens site in Market Place offers a list of some of the features:

  • a GitLens explorer to navigate and explore repositories or file histories
  • an on-demand GitLens Results view to explore committed searches, visualize comparisons between branches, tags, commits, and more
  • authorship code lens showing the most recent commit and # of authors to the top of files and/or on code blocks
  • an unobtrusive current line blame annotation at the end of the line
    on-demand gutter blame annotations, including a heat map, for the whole file
    detailed blame information accessible via hovers
  • on-demand recent changes annotations to highlight lines changed by the most recent commit
  • a status bar blame annotation showing author and date for the current line
  • commit search — by the message, author, filename, commit id, or code changes
  • many powerful commands for exploring commits and histories, comparing and navigating revisions, stash access, repository status, and others
  • and so much more

gitlens-preview

Thank you for reading these recommendations and enjoy coding!. Take care and see you next time!.

Author image
Costa Rica
Passionate Software Developer with full-stack development experience.