Best vscode extensions for frontend Developers
#Bracket Pair Colorization Toggler
A VS Code extension that gives you a simple command to quickly toggle the global “Bracket Pair Colorization” setting added in VS Code v1.60.
The extension only toggles the global “Bracket Pair Colorization” setting. If you have set the setting in your workspace, the extension will not work.
#Figma for VS Code
Streamline your design to code workflow with Figma for VS Code
Figma for VS Code lets you navigate and inspect design files, collaborate with designers, track changes, and speed up implementation — all without leaving your text editor. Improve developer productivity by eliminating the context switching and busy work needed to turn designs into code.
#GitHub Copilot
Your AI pair programmer
Get Code Suggestions in real-time, right in your IDE
What’s GitHub Copilot
GitHub Copilot provides autocomplete-style suggestions from an AI pair programmer as you code. You can receive suggestions from GitHub Copilot either by starting to write the code you want to use, or by writing a natural language comment describing what you want the code to do.
Privacy
Your code is yours. We follow responsible practices in accordance with our Privacy Statement to ensure that your code snippets will not be used as suggested code for other users of GitHub Copilot.
Start a free trial with GitHub Copilot
What can you do with GitHub Copilot?
Convert comments to code GitHub Copilot uses a special version of GPT-3 that has been trained on a large body of public source code. It is as good at writing natural language as it is at writing code, so in fact it can complete your comments for you. In the example below, we first let it complete our explanation, and then, line by line, we tab through the code that does what we just said in English.
Create unit tests An important use case of GitHub Copilot is to take some of the drudgery out of writing unit tests. Below, we already have an implementation of a function that computes the common prefix of two lists, and we want to test that. To do so, we import the unit test package, and then we start writing a test function to let Copilot generate the asserts which we accept just by hitting the Tab key.
Create a SQL query What’s cooler than generating code in Go? Generating Go with embedded SQL! To make GitHub Copilot do that, just show it the schema as CREATE TABLE statements. And then, it nicely writes a query embedded in Go, converting the result to a Go class as you would have done yourself:
#GitHub Copilot Chat
GitHub Copilot — Your AI pair programmer
GitHub Copilot Chat is a companion extension to GitHub Copilot that provides conversational AI assistance throughout your software development journey in VS Code.
Whether you’re troubleshooting a bug or crafting a new feature, GitHub Copilot is here to assist when you encounter challenges — simply ask for guidance:
- Chat view: Ask Copilot for help with any task or question in the Chat view, bringing in code from your current files.
- Inline Chat: Apply Copilot’s AI suggestions directly to your code, staying in the flow.
- Quick Chat: Bring up a Chat-powered dropdown for quick questions and suggestions.
Learn Copilot Chat in less than 4 minutes with our quickstart video or read VS Code’s Copilot Chat documentation.
Getting Access to GitHub Copilot
Sign up for a 30 day free trial with GitHub Copilot today or request Copilot access from your enterprise admin. To access GitHub Copilot, an active GitHub Copilot license is required. You can read more about our business and individual offerings at github.com/features/copilot.
Supported languages and framework
GitHub Copilot works on any language, including Java, PHP, Python, JavaScript, Ruby, Go, C#, or C++. Because it’s been trained on languages in public repositories, it works for most popular languages, libraries and frameworks. It’s also integrated into your editor, and fast enough to use as you type.
What can you do with GitHub Copilot?
We have produced both video tutorials and blog posts to facilitate your learning about GitHub Copilot. Take a moment to check out these resources:
- Building a GPT-3 app using GitHub Copilot
- Write tests using GitHub Copilot
- Improve code performance using Github Copilot Chat
- Fixing errors using GitHub Copilot
- Getting help from GitHub Copilot Chat to make your code more accessible
Import Cost
Import Cost VSCode Extension
This extension will display inline in the editor the size of the imported package. The extension utilizes webpack in order to detect the imported size.
Features
Calculates the size of imports and requires. Currently supports:
- Default importing:
import Func from 'utils'; - Entire content importing:
import * as Utils from 'utils'; - Selective importing:
import {Func} from 'utils'; - Selective importing with alias:
import {orig as alias} from 'utils'; - Submodule importing:
import Func from 'utils/Func'; - Require:
const Func = require('utils').Func; - Supports both
JavascriptandTypescript
#JavaScript (ES6) code snippets
Installation
In order to install an extension you need to launch the Command Palette (Ctrl + Shift + P or Cmd + Shift + P) and type Extensions. There you have either the option to show the already installed snippets or install new ones. Search for JavaScript (ES6) code snippets and install it.
Supported languages (file extensions)
- JavaScript (.js)
- TypeScript (.ts)
- JavaScript React (.jsx)
- TypeScript React (.tsx)
- Html (.html)
- Vue (.vue)
Snippets
Below is a list of all available snippets and the triggers of each one. The ⇥ means the TAB key.
#Prettier — Code formatter
Prettier Formatter for Visual Studio Code
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.
JavaScript · TypeScript · Flow · JSX · JSON CSS · SCSS · Less HTML · Vue · Angular HANDLEBARS · Ember · Glimmer GraphQL · Markdown · YAML
#ES7+ React/Redux/React-Native snippets
VS Code ES7+ React/Redux/React-Native/JS snippets
JavaScript and React/Redux snippets in ES7+ with Babel plugin features for VS Code
Installation
Visual Studio Marketplace
Launch Quick Open:
Paste the following command and press Enter:
ext install dsznajder.es7-react-js-snippetsOptions
From version 4 extension provides options to customize the behavior of the snippets:
OptionDescriptionlanguageScopeslist of supported languages / files recognitionprettierEnableddetermines if snippets should be parsed with project prettier configimportReactOnTopIf disabled, snippets won’t contain import React on top. React 17+ supporttypescriptadds additional typescript snippets
