👉 Cover Image by Jexo on Unsplash
A good text or code editor is an essential tool for every developer. Visual Studio Code (vscode) is a code editor packed with powerful developer tools like Intellisense, debugging support, and code completion. It is one of the most popular open-source code editors widely used by developers all around the globe. It is a must-have code editor for every developer.
Why use VsCode?
- Open-source
- Cross-platform
- Highly customizable(Theming and more)
- Extensions ecosystem
- Lightweight
- Major Programming Languages support (Javascript, Python, C#, etc.)
Looking at the merits of using vscode, in this article, I'm going to talk about my vscode setup which makes me more productive. I'm going to talk about extensions, themes, integrations that will make your life easier as a developer.
Theme
When it comes to theming your code editor, everyone has a different choice. I like to use the One Dark Pro Theme by binaryify. This theme gives a clean and elegant look to my code editor. One Dark Pro is also one of the widely installed vscode themes.
Font
I'm currently using Consolas font as the default font of my editor. Consolas comes pre-installed with windows. It is well designed and the characters are easy to distinguish. I also like Fira Code and Source code pro.
Icon Pack
Icons are useful to guide users when they are navigating through file explorer. They also make your code editor look beautiful. I'm using Material Icon Theme by Philipp Kief. These icons are descriptive.
Extensions
Extensions enable us to add new features, themes, and more. They are key components of every IDE or code editor. Some extensions I'm currently using are:
Live Server enables you to launch a development local Server with a single click and watch live changes with some extra functionality. This extension is useful when you are working with HTML, CSS, and Javascript. The live server watches all the HTML, CSS, Js files for changes after they are served into the browser and if there are any changes made it immediately reloads your browser page.
2.Prettier
Are you tired of formatting your code? You can take your code formatting standards to the next level with Prettier. Prettier is a code formatter with support for many languages, frameworks, and libraries like Javascript, JSX, JSON, Angular, Vue. You can manually format your code with prettier or create a save action for prettier. I would recommend you enable auto-formatting on save. In order to enable format on save action, Navigate to Settings -> Search-> Search "format on save" and enable the checkbox. This action requires a default formatter to be configured. You can register Prettier as the default formatter by editing the settings.json file and adding the following code:
"editor.defaultFormatter": "esbenp.prettier-vscode"
Brackets can be confusing and hard to distinguish. Bracket Pair Colorizer 2 allows matching brackets to be identified with colors. The user can define which tokens to match, and which colors to use.
If you are tired of launching different API testing tools from time to time and want an integrated REST directly into vscode? If yes, you should have REST Client installed. REST Client allows you to send HTTP requests and view the response in Visual Studio Code directly. It also has support for GraphQL. It is also enriched with features like syntax highlighting, authentication support, auto-save, or clear request history, group multiple requests under the same file, and many more. You can learn more about these features from the official link.
5.ES7 React/Redux/GraphQL/React-Native snippets
This extension provides you with JavaScript and React/Redux, GraphQL, and React-Nativesnippets in ES7 with Babel plugin features for VS Code. It helps me avoid writing all the boilerplate code when I'm working with react which ultimately saves a lot of time.
Thank you so much for reading this article, I hope you enjoyed reading it. Let me know about your productivity setup in the comments section.
Thank you. Happy learning! ❤