Setup VSCode

VSCode Extensions

Visual Studio Code is a free code editor created by Microsoft Team, and is currently one of the most used IDE in the world. It has many built-in features and also has tons of third-party extensions.

Below is the list of extensions that we used at Glife:

ESLint: ESLint is an open-source project that helps developers find and fix problems when coding. This extension integrates ESLint into VSCode so if there are any problems in your code it will show up the errors. See ESLint Setup for more information
EditorConfig for VS Code: EditorConfig helps maintain consistent coding styles for multiple developers working on the same project. This extension will override the VSCode default settings with settings from .editorconfig file so that all developers working on the project will share the same coding styles.
Prettier - Code formatter: Prettier is a code formatter that will automatically format and make your code beautiful so you just need to think about the logic part, this also makes coding styles between developers even more consistent.
GitLens - Git supercharged: This extension allows you to control your projects Git version right inside VSCode without any third-party applications or command-line. This extension also shows the code last updater so you will know who to blame for the bugs.

Nice to have

ES7+React/Redux/React-Native snippets or similar: If you are a React developer then this is a should-have extension. Snippet is a piece of code that's used very often aliased by a short string so you can just use Tab key and the IDE will automatically fill in that code for you. This extension will create tons of React and Javascript snippets so you can increase your working sufficiency
GraphQL: This extension will highlight the code in an .gql file so you can see it better. This also works with gql tag
Tailwind CSS IntelliSense: at Glife, we use TailwindCSS for most of our project so this extension is really nice to have, it will hint you for all available Tailwind classnames so you don't have to look up on their website.
Path Intellisense and npm Intellisense: These extension will autocomplete filenames when you importing in your code in case you don't remember where the module is at.