Visual Studio Code (VSCode) is a lightweight but powerful cross-platform source code editor that runs on your desktop.
Thankfully extensions for VSCode are here to make our lives less stressful, but these extensions can help us be more productive, efficient, and even helps us to become better developers by learning practices that have been already used by earlier generations of developers.
This is the most popular snippet extension for Angular developers. It provides Angular snippets for TypeScript, RxJS, HTML and Docker files. At the time of writing, the extension has been updated to support Angular 9.
These snippets were built supercharge a workflow in the most seamless manner possible. This repo was built particularly for real world use. It doesn’t catalogue the API definitions, rather, it focuses on developer ergonomics from the point of Vue of real world use.
Included in this extension are the pieces that Sarah Drasner the publisher of this extension personally get sick of typing, and boilerplate that is helpful to stub out quickly and this extension supports Vue 2 and Vue 3.
Mocha snippets for Visual Studio Code using ES6 syntax. The focus is to keep the code dry leveraging arrow functions and omitting curlies by where possible. The snippets use the Mocha function names for ease of memory that way you don’t need to learn new names.
JS Refactor also supports many common snippets and associated actions for wrapping existing code in common block expressions. The only downfall of this plugin is the lack of support of ES6, but the publisher has mention that ES6 class support is still underway,
Formatting and Type Checking
Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
This extension allows matching brackets to be identified with colours. The user can define which tokens to match, and which colours to use.
This is the most useful plugins for Vue.js development. This extension is specific to vue.js development. It has Syntax-highlighting, Snippet support, Formatting, lots of Framework Support and more.
This VS Code extension provides a development environment for React Native projects. Using this extension, you can debug your code and quickly run react-native commands from the command palette.
The extension looks for a jshint module in the current directory and in the global package location. You can install jshint locally with npm install jshint or globally with npm install -g jshint. If your jshint module is in a different location, use the jshint.nodePath setting to specify the correct path. The jshint.packageManager setting can be used to specify which package manager you are using, npm or yarn.
ESLint is a smart-static code that can find out any problematic patterns, you can even make your own set of rules to check and reuse logic. ESLint is one of the tools that will ensure that the developers will have a good quality code format.
Visual Studio Code plugin that autocompletes npm modules in import statements.
Path Intellisense is a must-have VSCode extension, for those who are working on a large project, its main function is to autocomplete the path of the file you are trying to import, it will automatically show up as you type in.
Simple IntelliSense & Snippets for Alpine.js framework.
This extension will be responsible to help automatically reload the web-page whenever there’s a changes in your code through VSCode, without you having to reload your web-page over and over, it saves a lot of time, to use this you can just click the Open with Live Server.
Debug your web application or browser extension in Firefox
This NPM extension is here to helps you out whenever there’s an issues with the package is missing, mismatched versions, the npm extension will notify you via a clickable option to fix the certain issue.
This extension quickly searches (using ripgrep) your workspace for comment tags like TODO and FIXME, and displays them in a tree view in the explorer pane. Clicking a TODO within the tree will open the file and put the cursor on the line containing the TODO.
Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist.
This extension colourises the indentation in front of your text alternating four different colours on each step. Some may find this extension quite helpful while writing code for Nim or Python.
REST Client allows you to send HTTP request and view the response in Visual Studio Code directly.
View git log, file history, compare branches or commits