6 Best Chrome & VS Code Extensions For Developers

Extensions can make our life as a developer a little easier. Whether they are Visual Studio Code or browser extensions, they can help you manage your tasks, optimise your workflow, or improve your efficiency. Sometimes, an extension can aid you visually, such as JSON Formatter. This article shows you different extensions you can install in your Chrome or Firefox web browser or via Visual Studio Code. Many backend developers do not know about extensions or are reluctant to use them. Yet, developers often overlook the benefits of using these extensions. First, let’s take a look at Chrome extensions for developers. Chrome Extensions for Developers Here’s a list of three Chrome extensions for developers with possible alternatives for each one. 1. JSON Formatter - JSON Visualizer Users: 1,000,000+ Rating: 4.6/5 assists developers visually. Many developers have to deal with JSON data. It’s a popular format to structure, handle, store, and transfer data in backend applications such as RESTful APIs. However, when your browser prints an API response’s JSON object to your browser, you’ll get a flat string that is not very human-friendly to read. JSON Formatter For that reason, JSON Formatter formats raw JSON data to a human-readable tree-view of the JSON object. It’s a small Chrome extension, but it definitely makes a difference when reading raw JSON data in your browser. You can try out the extension yourself with the following API request to the in your browser. Facebook API Alternative extensions? : A highly customizable JSON and JSONP viewer : Browser-based JSON viewer and validator that uses a client-side JavaScript implementation of . JSON Viewer JSONView JSONLint 2. Daily.dev - Tech News Aggregator Users: 100,000+ Rating: 4.8/5 The extension won’t improve your work as a developer, however, it’s a great extension to stay up to date about developer news. Moreover, Daily.dev is a news aggregator for developer-focused news. Daily.dev Many developers spend quite some time reading tech websites to stay up-to-date with industry news and product releases. However, they don’t realise it’s a potential source of distraction. On top of that, you want to avoid reading low-quality developer content. This is where Daily.dev jumps in. The extension showcases a page full of news stories, developer blog posts, and other useful developer-related pages about subjects you pick. For instance, you can tell the Daily.dev aggregator to focus on JavaScript-related news. Whenever you open a new tab, the extension will show a handful of high-value posts for you to read. In short, Daily.dev is an excellent extension to cut through the noise and stay up to date with industry news. Alternative extensions? : This extension shows small nuggets of programming knowledge through code snippets each time you open a new tab. 30 Seconds of Knowledge 3. Octotree - GitHub on Steroids Users: 400,000+ Rating: 4.9/5 Many describe as GitHub on steroids. The free version allows you to quickly explore a project’s contents with an IDE-like file explorer view. Also, you can click through on or statements to inspect a dependency. Octotree import require Note that you can also use this extension for private repositories by entering your GitHub authentication token. By doing so, the extension can access your private repositories as well. The paid version has many more features, such as multi-tab view, project-wide search capabilities, and an enhanced code review view. If you want to learn more about the paid offering, you can check out the . Octotree website Alternative extensions? : Adds code intelligence to GitHub, GitLab, and other hosts: hovers, definitions, references. For 20+ languages. Sourcegraph : Displays repository size, file size, download link, and option to copy file contents. Enhanced GitHub Visual Studio Code Extensions for Developers Here’s a list of three Visual Studio Code extensions for Developers. 4. VS Code Remote Containers Users: 5,395,555 Rating: 4.8/5 The extension lets you use a Docker container as a full-featured development environment. Therefore, you can develop without having to worry about the impact on your local system. Do you want to experiment with some settings? You can safely do so using your container. Moreover, you can quickly change between development environments by switching containers. Remote Containers The extension lets you mount workspace files into the container from the local file system or copy them into it once the container is running. Extensions are installed and run inside the container to have full access to the tools, platform, and file system. You then work with Visual Studio Code as if everything were running locally on your machine, except now they are separated inside a container. 5. Code Spell Checker - Grammar Proofing for Code Users: 3,193,039 Rating: 4.5/5 does exactly what it promises; it will flag any spelling mistakes in your code. Code Spell Checker works best with camelCase code. Now, you might wonder why you need this? Code Spell Checker Let me insert a personal story here. Our developer team once had a significant bug that we couldn’t track down. After a lot of searching, the bug was caused due to a small spelling mistake. It shows how vital a spell checker can be for your code to avoid critical bugs. Some notes to consider when using this extension: • The spellchecker is case insensitive • The extension uses a local dictionary. Therefore, no code leaves your machine to enhance security for Closed Source code. • The spellchecker only validates words longer than three characters 6. Path Intellisense - Autocomplete Filenames Users: 5,395,555 Rating: 4.8/5 helps you to autocomplete filenames when importing files. The extension works for most programming languages and also HTML. The extension uses the in your editor configuration as a mapping. Path Intellisense ts.config.compilerOptions.baseUrl Furthermore, you can define custom mappings, as shown in the example below. You can set a mapping to the root of your workspace, or you can define an absolute path like the mapping. / global { "path-intellisense.mappings": { "/": "${workspaceFolder}", "lib": "${workspaceFolder}/lib", "global": "/Users/dummy/globalLibs" }, } This is a must-have extension for backend developers to avoid mistakes when importing files. Bonus: Track technical debt in your editor Try out the extension that our team is building! Stepsize is an issue tracker in your editor which you can use to: Stepsize VS Code create issues from your editor prioritise technical debt with your team add key issues to your sprints with Jira integration Hope you'll enjoy using it!