I've been using different IDE and text editors during my career as a Software Developer and that's definitely topic for another blog post but in today's article, I want to talk about VSCode extensions which I found helpful.
Must have VSCode extensions
All titles below are clickable so you'll be redirected to the official visual studio marketplace
Code Spell Checker
Package name: streetsidesoftware.code-spell-checker
Author: Street Side Software
I think everyone would agree that spending time fixing typos is not what we want to do as developers. That’s where Code Spell Checker comes in place. It highlights typos directly in your IDE and offers suggestions for fixes. Also, you can ignore in your settings some words which it can't recognize:
"cSpell.ignoreWords": [
"lifecycle",
"mixins"
],
Flow Language Support
Package name: flowtype.flow-for-vscode
Author: flowtype
Really helpful for React application with Flow to enforce Flow types. This extension helps to utilize full power on Flow, similar to ESLint it will highlight type errors in red. Also, I found this extension more suitable for bit projects than (vscode-flow-ide gcazaciuc.vscode-flow-ide) this extension was dramatically slowing down my IDE almost to the level when I can't type anymore.
ESLint
Package name: dbaeumer.vscode-eslint
Author: Dirk Baeumer
Integrates ESLint into VS Code. If you are new to ESLint check the documentation.
Must have when linting your projects. For example, it will highlight unused variables and imports. Also, it will pick up your ESLint config and enforce rules that you configured.
JavaScript (ES6) code snippets
Package name: xabikos.javascriptsnippets
Author: Charalampos Karypidis
Code snippets for JavaScript in ES6 syntax
I rarely use this for ES6 snippets. For example: quickly define a new class-based component for React. In general, I prefer custom snippets.
Material Icon Theme
Package name: pkief.material-icon-theme
Author: Philipp Kief
Rather a visual one. Makes it better to differentiate files by providing beautiful icons.
Prettier - Code formatter
Package name: esbenp.prettier-vscode
Author: Esben Petersen
VS Code package to format your JavaScript / TypeScript / CSS using Prettier
Formats your code on saving following pre-defined rules so you do not need to care about formatting issues anymore. Coding style is unified within a team and enforced by Prettier
Quokka.js
Package name: wallabyjs.quokka-vscode
Author: Wallaby.js
Live Scratchpad for JavaScript.
JavaScript playground. If you want to draft some solution to a problem or verify some idea you can code it in this interactive environment right in your IDE. It also supports imports from different libs (for example lodash).