A vanilla code editor like Visual Studio Code (VS Code) gets you far in development. But if you want to write code faster and make fewer mistakes, then you need to make use of its vast library of extensions that are available in the marketplace.
Table of Contents
|fre→||forEach loop in ES6 syntax |
|fof→||for … of loop |
|fin→||for … in loop |
|anfn→||creates an anonymous function |
|nfn→||creates a named function |
|dob→||destructing object syntax |
|dar→||destructing array syntax |
|sti→||set interval helper method |
|sto→||set timeout helper method |
|prom→||creates a new Promise |
|thenc→||adds then and catch declaration to a promise |
ESLint is a linter that statically analyzes your code to find problems based on a set of pre-configured rules. Normally you run ESLint through your terminal to check your code, but now you get immediate feedback by running ESLint as a VS Code extension.
You can configure the extension to automatically fix the issues when you hit save in the VS Code editor. Here are the settings that I’m using for this extension, so it will automatically fix the ESLint findings:
The DotEnv VS Code extension adds syntax highlight to .env variables. In my projects, I make a lot of use of .env variables. So having syntax highlight on these files makes me less prone to mistakes and allows me to read the environment variables a lot quicker compared to a file with only grey text.
Enabling this extension adds 33 quick fixes for the most common issues like fixing declarations e.g. converting var/const to let or converting shorthand arrow functions to statements.
A quick fix can be triggered when hovering over the function and pressing:
CMD + . -> triger quick fix
Prettier is a code formatter and enforces a consistent style that you’ve preconfigured in your project. Having a consistent style can greatly benefit team productivity since PRs can focus on the code itself instead of discussion surrounding the code style.
To use Prettier in order to format your code, you can run the following commands
1. CMD + Shift + P -> Format Document OR 1. Select the text you want to Prettify 2. CMD + Shift + P -> Format Selection
You can also decide to use Prettier as the default formatter for a specific language. That means when you run the format command in VS Code, it will automatically use Prettier. To enable it, add the following to your VS Code settings:
6. Tailwind CSS IntelliSense
Another great extension that adds auto-complete, but this time for Tailwind CSS. If you’re doing front-end development, there is a big chance you’re using CSS. Tailwind is a popular framework amongst CSS developers and having this extension enabled improves your experiences by adding great features such as autocomplete, syntax highlighting, and linting.
As you can see in the demo, the extension will automatically try to autocomplete Tailwind utility classes for you.
7. Sort Lines
|Command||Sort lines functionality|
|sortLines||Ascending, case-sensitive (default)|
|sortLinesCaseInsensitiveUnique||Unique ascending, case-sensitive|
|sortLinesLineLength||Line length ascending|
|sortLinesLineLengthReverse||Line length descending|
|sortLinesNatural||Sorts alphabetically except groups with multi-digit numbers|
|sortLinesUnique||Regular character code keeping only unique items|
|removeDuplicateLines||Removes duplicate lines|
To invoke the Sort lines functionality type the following command
CMD + Shift + P -> Sort Lines
Natural which Sorts alphabetically but groups multi-digit numbers.
- git blame – shows who modified each line within a file
- git changes – highlights any local (unpublished) changes or lines changed by the most recent commit
- git revision navigation – shows the git history of a file and allows you to effortlessly navigate it
9. Git Graph
The Git Graph VS Code extension is unmissable if you’re a heavy git user. The extension allows you to view your git commit history as a graph. You’ll get an instant overview of all previous commits, branches, tags, and users who committed the changes.
Additionally, it grants the user the ability to perform git actions such as commit, merge, revert, checkout, rebase, rename and reset branches. Having the ability to do this from a single overview within VS Code improves productivity tremendously and doesn’t get you out of your flow.
10. GitHub Copilot
The GitHub Copilot VS Code extension couldn’t be left out on this list. This is essentially an AI pair programmer that gives suggestions on what it thinks you’re going to write in your code. It can even write complete methods and classes for you.
But how is the AI able to do that? GitHub Copilot has been trained on billions of lines of public code on GitHub using Open AI (machine learning). So it has been trained to recognize patterns and with that knowledge, it’s able to determine what the developer is going to create in code.
You’re daily productivity and focus will improve and next to that your code is less prone to bugs because of the guardrails and highlights that are present in these VS Code extensions.