IDEs and Text Editors

This section includes configuration and handy extensions for our most beloved IDEs/text editors. We do not enforce use of any single IDE but you should be intimately familiar with the one you choose. Good knowledge of the functionalities, shortcuts, extensions/plugins, etc. will improve your workflow and save time.

Visual Studio Code

Without a doubt VSCode, being super lightweight and available for every OS, is the editor of choice for so many. Main VSCode built-in features:

• IntelliSense
• Debugging
• Git
• Extensions

Extensions

Here is a list of extensions which make coding a more pleasant experience. Some are specific for certain languages/frameworks, others are more general. We recommend checking out the ones that apply to your use-case!

• ESLint
• Prettier - Code formatter
• Project Manager
• ES7 React/Redux/GraphQL/React-Native snippets
• React Native Tools
• Paste JSON as Code
• GitLens
• VS Live Share
• Remote Development
• Bracket Pair Colorizer 2
• Material Icon Theme
• Code Runner
• TODO Highlight
• DotENV
• Partial Diff

Keyboard shortcuts

• Navigation history (Ctrl + Tab)
• Multi cursor selection (Alt + Click)
• Column (box) selection (Shift + Alt)
• Fast scrolling (Alt + Scroll)
• Copy line up / down (Shift + Alt + Up/Down)
• Go to Symbol in File (Ctrl + Shift + O)
• IntelliSense (Ctrl + Space)

WebStorm

WebStorm would be the second favorite IDE among the web developers. Written in Java and a cross-platform, in some’s opinion it is faster than VS Code.

Advantages:

• Seems to be up to date fairly quickly with releases of a new version of React or Angular.
• Has the same shortcuts as Resharper (if you ever developed in C#).
• From the experience of those who use, it has a much better code completion than VS Code.
• Also looking for TypeScript definition is easier (since WebStorm caches whole node_modules).

Disadvantages:

• Not free software.