Visual Studio Code, or VS Code for short, is a powerful and versatile code editor developed by Microsoft. It is built on the Electron framework, which allows it to run on multiple platforms such as Windows, MacOS and Linux. It's completely open-source and actively maintained by a large community. One of the best things about VS Code is the wide range of extensions that are available to enhance its functionality.
Here are the top 10 extensions for Visual Studio Code that you should try:
1. CodeSnap📸
CodeSnap is a Visual Studio Code extension that allows you to take screenshots of your code and save them as image files. It can capture the entire editor or just the currently selected code. It's also allows you to customize the appearance of the screenshot by adjusting the font size, theme and other settings.
Features
- Quickly save screenshots of your code
- Copy screenshots to your clipboard
- Show line numbers
- Many other configuration options
Usage Instructions
- Open the command palette (Ctrl+Shift+P on Windows and Linux, Cmd+Shift+P on OS X) and search for CodeSnap.
- Select the code you'd like to screenshot.
- Adjust the width of the screenshot if desired.
- Click the shutter button to save the screenshot to your disk.
Example
2. GitLens
GitLens is a popular extension for Visual Studio Code that provides powerful Git features directly in the code editor. It is designed to make it easier for developers to collaborate and track changes in their codebase.
Some of the key features of GitLens include:
- Code Lens: Displays information about the current line of code such as the author, last commit date, and number of recent changes.
- Code reviews: Allows you to review and comment on code changes, making it easier to collaborate with other developers.
- Compare files: Allows you to compare different versions of a file, making it easy to see what changes were made and by whom.
- Git commands: Allows you to perform common Git commands such as commits, pushes, and pulls directly from the code editor.
3. Prettier - Code Formatter
Prettier is a code formatter for various programming languages that can automatically format your code to a consistent style. It aims to make your code look consistent and well-organized, no matter who wrote it.
Prettier can be used as a command-line tool, or as an extension for code editors like Visual Studio Code, Atom, and others. You can configure it to format your code on save, or you can run it manually by invoking the command from the command line or from your editor.
Usage
Using Command Palette (CMD/CTRL + Shift + P)
1. CMD + Shift + P -> Format Document
OR
1. Select the text you want to Prettify
2. CMD + Shift + P -> Format Selection
Features
One of the key features of Prettier is that it uses a set of rules to automatically format your code. These rules are opinionated and are designed to make your code look as consistent and clean as possible. For example, it ensures that all lines are no longer than a certain length and that all comments are properly indented.
Format On Save
With Respects to the editor.formatOnSave setting.
You can turn on format-on-save on a per-language basis by scoping the setting:
// Set the default
"editor.formatOnSave": false,
// Enable per-language
"[javascript]": {
"editor.formatOnSave": true
}
4. TabNine
TabNine is a code completion AI tool that uses machine learning to provide suggestions for code completion in various programming languages, such as C++, Python, and JavaScript.
Features
- Context-aware code completion: TabNine uses machine learning to analyze the context of the code and provide suggestions for the next line of code.
- Customizable: TabNine can learn from the developer's coding style and preferences, which allows it to generate more accurate and useful suggestions over time.
- Error Detection: TabNine can detect and highlight errors in the code and suggest fixes.
TabNine also has a feature called "Deep TabNine" which is a more powerful version of the tool that uses the company's deep learning model, it is available as a separate subscription.
5. EsLint
ESLint is a popular tool that allows developers to check and enforce coding conventions in their JavaScript code. It can help identify and prevent common coding errors and improve the overall quality of the code.
Some of the key features of ESLint include:
- Code linting: ESLint checks the code against a set of predefined rules, which can be customized to suit the specific coding conventions of a project or organization.
- Error detection: ESLint can identify and prevent common coding errors, such as syntax errors, and help ensure that the code adheres to best practices and conventions.
- Automated code fixing: ESLint can automatically fix certain issues, such as missing semicolons, without the need for manual intervention.
- Support for multiple languages: ESLint can be used to lint JavaScript, JSX, TypeScript, and more.
- Built-in formatters: ESLint includes several built-in formatters that can help developers understand and fix the issues found in their code.
6. ES7+ React/Redux/React Native snippets
ES7+ React/Redux/React Native snippets are code snippets or templates that can be used to quickly generate common code patterns in React, Redux, and React Native projects. These snippets can help developers write code faster and reduce the chances of making common mistakes.
7. Live Share
Live Share is an extension that allows developers to collaborate in real-time on the same codebase. It enables developers to share their code, terminal, and localhost web apps with others, and also allows them to make edits to the codebase in real-time. This extension allows developers to collaborate on coding projects, pair programming, and providing real-time feedback, it enables a live editing session where all the participants can see each other's cursor, and it also allows to share localhost web apps and servers.
8. Community Material Theme
Community Material Theme is a popular Visual Studio Code theme that is based on the Material Design guidelines. It provides a color scheme that is easy on the eyes and is designed to be easy to read and work with for long periods of time. The theme is highly customizable, and you can choose from several predefined color schemes or create your own.
9. Material Icon Theme
Material Icon Theme is a popular Visual Studio Code extension that provides a set of icons that follow the Material Design guidelines. The icons are designed to be easy to recognize and provide a consistent visual style across the entire codebase. This extension is highly customizable, and you can choose from several predefined icon sets or create your own.
10. Better Comments
"Better Comments" is a VS Code extension that allows for the creation of customizable, visual annotations in code. It allows you to distinguish comments by their type, such as:
- "TODO" comments, which can be used to mark code that needs to be completed or reviewed.
- "NOTE" comments, which can be used to provide additional information or clarification.
- "BUG" comments, which can be used to flag problematic code.
- "IMPROVE" comments, which can be used to indicate areas where the code could be improved.
Feel free to add more in the comment section😎
For dialy coding tips and tricks let's connect on LinkedIn.
Top comments (1)
I would really recommend _against _ using something like CodeSnap. I can't think of any legitimate use cases for it off the top of my head.
I wrote a post about why these things can be harmful:
Embedding code in posts
Ben Sinclair ・ May 31 '19 ・ 2 min read
Unless I'm misremembering, TabNine is proprietary software which phones your code home, which might not be what people are expecting, and might be against the rules where you work.