IDE
Important VS Code Extensions for React Developers in 2020.
If you like the appearance of your code, you would probably want to improve it more
Why do people pay more for a hotel with a good view? One of my friends asked when I searched for a hotel. Yeah, people’s minds are adept for good visuals. Good visuals trigger our mind and our mind will feel a fresh feel.
During my Internship at Sysco LABS, I got an excellent opportunity to work in the Visual Studio Code IDE. I used WebStorm before my internship and admired its features. After I started to use the Visual Studio Code, I stopped using WebStorm. In the beginning, I felt it was hard to use VS Code, but my mentor and Team Lead Nadun Indunil suggested some extensions to use in VS Code. Here I would like to describe those extensions. This is my 28th article.
Themes
As I told you before, the look is an important matter when we use things continuously. Themes give an excellent look to the VS code. I used Material Theme. Material Theme is a firm favourite among the VS Code community, and candidly, there’s little not to like. There are nine different options in the material theme. I especially like the ‘Ocean’ and ‘Palenight’ variants.
To make your icons pop and look very cool, you can use the material icon theme. Material icon theme generates charming and high contrast colourful looking icons.
Bracket Pair Colorizer
If you have a lot of parentheses, square brackets, and braces, it can be difficult to see where each block of code opens and closes. VS code already identifies the bracket pairs by highlight mechanism, but it is hard to identify the pair of the bracket. Now I used Bracket Pair Colorizer 2. Bracket Pair Colorizer has two versions, but version 2 increases the speed and accuracy than version 1.
Better Comments and TODO Highlight
Better Comments
“Don’t document your code. Code your documentation” is The most preferred approach in nowadays, but for some special situations, we need to comment on our code in a conventional way, especially in Business logic. Better comments extension helps to use different types of annotations for different types of comments. It helps to colourize the comments. There are various type of annotation like,
* for highlighting? for questions
!TODO for todos//// for line-through comments
TODO Highlight
Todo highlight is another small useful extension. This extension highlights any TODO style comments instead of your code. Therefore, there’re easy to see when you’re scrolling through your code. TODOs can be easily forgotten since they’re greyed out like most comments are, and you easily scroll past them when you are going through a file. Todo highlight avoids this kind of problem and highlights all TODO style comments.
Git Lense
Git Lense is the best powerful collaboration extensions for VS Code, without any doubt. It helps you to view code authorship at a glance through Git blame annotations and code lens, navigate and explore Git repositories easily, gain useful insights through powerful comparison commands, and so much more. Git Lense can replace Git Blame and Git History plugins with its functionality. In Git Lense, a subtle message displays to the right of the line on which you are currently working to inform you of who made the modification or creation when they made it, and the commit message associated with it. There are some extra pieces of information that pop up when you hover over this message, such as the code changing itself, the timestamp, etc. Showing file history, performing diffs with previous versions, open a specific revision, and more functionalities are provided by this extension
Project Manager
Sometimes switching between projects can be complicated if you are a developer. It can be time-consuming and very frustrating to open lots of different IDE windows, search the “Open Recent…” option or even open the file explorer each time you want to load a different folder into your editor. Project Manager allowing you to switch between projects very quickly. With this extension, you’ll be able to index your projects into Project Manager list.
Path Intellisense
If you are a react developer working with paths is hard; let alone remembering it. Therefore Path Intellisense comes to help. Path Intellisense auto-complete file names and paths, thereby saving time and feel comfortable. This extension supports working with relative and absolute paths to your file name. The remarkable feature of this extension is working with hidden files too. Moreover, We could avoid typo errors in paths by using this extension.
ESLint and Prettier
ESLint
You’ll want to use a linter in modern-day programming. Linter is a tool that analyzes the code and helps to find awkward structures/patterns and maintain good health in code. Linter is mainly essential for the dynamic and loosely-typed nature of languages such as JavaScript. ESLint is a linting tool for JavaScript and JSX. ESLint runs on Node, and It will quickly perform live code review. Luckily, VS Code already runs on Node in an Electron wrapper, which makes installing the ESLint extension in VS Code very easy. ESLint is entirely configurable by itself and rules can be omitted and added ina.eslintrc file. You could configure ESlint by learning from this link.
Using ESLint also a best practice, as I described in react best practices. Airbnb JavaScript Style guide and Airbnb React/JSX Style Guide are reasonable approaches to JavaScript and ReactJS. Airbnb style guides are an assertive set of rules for ESLint.
Prettier
Prettier has a very good formating based on config files as well as integrates very well VS code out-of-the-box. Prettier is super cool because you can use different config files such as the prettier config file you can use the editor config file or you can even use the built-in visual studio setting to change the different config for how you want prettier to format your code. You can then set it up to format on save if you’d like and you can also publish these different config files to your GitHub repo or to your project repo. So that anybody committing to your project will use the same extract formatting for all of their code.
Code spell checker
The Code Spell Checker is a nice extension that facilitates the maintenance of qualified codebases. If you are working on high-quality products, it’s a must to avoid spelling errors as much as possible. Having built this extension ensures you will never have to worry about screwing spellings in your comments, strings and plain text as you type. It displays possible spelling errors inside your comments, strings and plain text either in real-time or via an interactive tool window. It is convenient to enable or disable spell checking when typing words with different parameters. This extension can be configured in several levels and permits config options to be inherited /override.
Import Cost
Import cost is a handy extension if you are working with a large frontend project that involves requiring or importing many different node modules. This extension essentially gives you the size of the different pieces that you are importing into your project right next to your import or require statements. This is very useful for when you’re trying to optimize the size of your react application development project in order to create a faster user experience for the end-user.
Snippets
JavaScript (ES6) Code Snippets
If you are a modern-day React developer, you have to deal with various stacks of JavaScript. Whatever your frameworks choices are, typing the same generic codes in various projects will reduce your workflow. The JavaScript (ES6) code snippets is a helpful little library extension which gives some very useful snippets of JavaScript codes for the idle dev. It just binds generic JavaScript calls into hotkeys. This extension can also significantly increase current productivity.
ES7 React/Redux/GraphQL/React-Native snippets
This extension is simple and one of the best extension for React Developers. This extension offers React, Redux, Javascript, React-Native, GraphQL, snippets in ES7 syntax with Babel plugin features. It supports Javascript( .js), TypeScript (.ts), Javascript React (.jsx) and TypeScript React (.tsx) files. Tons of prefixes can be used to generate code snippets. You can find the prefix-list in here. You can type a prefix and press tab key to generate snippets code.
Conclusion
In just 5 years visual studio code has gone from being non-existent to the single most popular code editor among all the developers according to the StackOverflow 2019 survey. I hope this article helped you to find something new to add to your development kit!. Response your extension suggestions below.
Thank you for reading this far. If you enjoyed this post, please share, comment, and press that 👏 a few times (up to 50 times). . . Maybe it will help someone.
Follow me on Twitter and Medium if you’re interested in more in-depth and informative write-ups like these in the future!
📝 Save this story in Journal.
👩💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.
