Top VS Code Extensions For Programmers

Top VS Code Extensions For Programmers

Prettier

Top VS Code Extensions For Programmers

                   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. Prettier is an opinionated code formatter.

Top VS Code Extensions For Programmers

Installation

* Install through VS Code extensions.

* Can also be installed in VS Code: Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

ext install esbenp.prettier-vscode

Default Formatter

This setting can be set for all languages or by a specific language. To ensure that this extension is used over other extensions you may have installed,

be sure to set it as the default formatter in your VS Code settings.

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Top VS Code Extensions For Programmers


Bracket Pair Colorizer

Top VS Code Extensions For Programmers

This neat little tool really helps you create a quick overview of what is what in your code. The extension will colorize matching brackets and parenthesis, thus highlight the scope that the brackets wrap.

Top VS Code Extensions For Programmers

HTML Configuration

  "bracketPairColorizer.consecutivePairColors": [
        ["<", "</"],
        ["<", "/>"],
        [
            "Gold",
            "Orchid",
            "LightSkyBlue"
        ],
        "Red"
    ]

Commands

These commands will expand/undo the cursor selection to the next scope

"bracket-pair-colorizer.expandBracketSelection"
"bracket-pair-colorizer.undoBracketSelection"

* Quick Start

	{
		"key": "shift+alt+right",
		"command": "bracket-pair-colorizer.expandBracketSelection",
		"when": "editorTextFocus"
	},
	{
		"key": "shift+alt+left",
		"command": "bracket-pair-colorizer.undoBracketSelection",
		"when": "editorTextFocus"
	}

Live Server

Makes your existing server live – this is a Web Extension that helps you to live to reload feature for dynamic content

(PHP, Node.js, ASPNET — Whatever, it doesn’t matter).

Top VS Code Extensions For Programmers

Installation

Open VSCode and type

ctrl+P, type ext install ritwickdey.liveserver

Features

  1. A Quick Development Live Server with live browser reload.
  2. Start or Stop the server with a single click from the status bar.
  3. Open an HTML file to the browser from the Explorer menu.
  4. Support for excluding files for change detection.
  5. Hot Key control.
  6. Customizable Port Number, Server Root, default browser.
  7. Support for any browser using advanced Command-Line.
  8. Support for Chrome Debugging Attachment.
  9. SVG Support.
  10. HTTPS Support.
  11. Support for proxy.
  12. CORS Enabled.
  13. Multi-root workspace supported.
  14. Support for any file even dynamic pages through Live Server Web Extension.
  15. Remote Connect through WLAN.
  16. Use the preferable hostname (Localhost or 127.0.0.1).
  17. Customizable Supporting Tag for Live Reload feature.

 

Also, Install Live Server From Here 

GitLens- Git Supercharged

                       GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.

Top VS Code Extensions For Programmers

# Git Code Lens 

*Recent Change — author and date of the most recent commit for the file or code block

Click the code lens to show a commit file details quick pick menu with commands for comparing, navigating, and exploring commits, and more (by default).

*Authors — number of authors of the file or code block and the most prominent author (if there is more than one)

Click the code lens to toggle the file Git blame annotations on and off of the whole file (by default)
Will be hidden if the author of the most recent commit is also the only author of the file or block, to avoid duplicate information and reduce visual noise.

# Status Bar Blame 

  • Adds a customizable Git blame annotation showing the commit and author who last modified the current line to the status bar (optional, on by default)*Contains the commit author and date (by default)
    *Click the status bar item to show a commit details quick pick menu with commands for comparing, navigating, and exploring commits, and more (by default)
    *Provides customizable click behavior — choose between one of the following
  1.  Toggle file blame annotations on and off
  2.  Toggle code lens on and off
  3.  Compare the line commit with the previous commit
  4.  Compare the line commit with the working tree
  5.  A quick pick menu with details and commands for the commit (default)
  6.  Quick pick menu with file details and commands for the commit
  7.  Show a quick pick menu with the commit history of the file
  8.  Pick menu with the commit history of the current branch
         Also, Install GitLense- Git Supercharged From Here

JavaScript (ES6) code snippets

                       This extension contains code snippets for JavaScript in ES6 syntax for Vs Code editor (supports both JavaScript and TypeScript).

Top VS Code Extensions For Programmers

Installation

           Search for JavaScript (ES6) code snippets and install it. In order to install an extension, you need to launch the Command Palette and type Extensions.

(Ctrl + Shift + P or Cmd + Shift + P)

There you have either the option to show the already installed snippets or install new ones.

Supported languages 

  1. JavaScript (.js)
  2. TypeScript (.ts)
  3. JavaScript React (.jsx)
  4. TypeScript React (.tsx)
  5. Html (.html)
  6. Vue (.vue).

Debugger for chrome

js debugging, and today we are taking the next step by introducing our Chrome Debugger for Visual Studio Code. We started out with. Our Chrome Debugger allows front-end developers to debug their client-side JavaScript code running inside Google Chrome directly from Visual Studio Code. NET and Node.

Top VS Code Extensions For Programmers

Getting Started

  1. Install the extension
  2. Open the folder containing the project you want to work on.

Supported features

  1. Setting breakpoints, including in source files when source maps are enabled
  2. Stepping, including with the buttons on the Chrome page
  3. The Locals pane
  4. Debugging eval scripts, script tags, and scripts that are added dynamically
  5. Watches
  6. Console

Unsupported scenarios

  1. Debugging web workers
  2. Debugging Chrome extensions
  3. Any features that don’t script debugging.

Launch

      Two example launch.json configs with “request”: “launch”. If you use a URL, set webRoot to the directory that files are served from. webRoot is used to resolve URLs (like “http://localhost/app.js”) to a file on disk (like /Users/me/project/app.js), so be careful that it’s set correctly. You must specify either file or URL to launch Chrome against a local file or a URL. This can be either an absolute path or a path using ${workspaceFolder} (the folder open in Code).

{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Launch localhost",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost/mypage.html",
            "webRoot": "${workspaceFolder}/wwwroot"
        },
        {
            "name": "Launch index.html",
            "type": "chrome",
            "request": "launch",
            "file": "${workspaceFolder}/index.html"
        },
    ]
}

Top VS Code Extensions For Programmers


VIM For Vs Code

Top VS Code Extensions For Programmers

Not only does it emulate nearly all of Vim’s core features, but it also adds in some of the most popular Vim plugins as well, including commentary, surround, easy motion, and many more. VSCode has a Vim extension.

Top VS Code Extensions For Programmers

Settings

    The settings documented here are a subset of the supported settings; the full list is described in the Contributions tab of VSCodeVim’s extension details page, which can be found in the extensions view of VS Code.

Quick Example

 

{
  "vim.easymotion": true,
  "vim.incsearch": true,
  "vim.useSystemClipboard": true,
  "vim.useCtrlKeys": true,
  "vim.hlsearch": true,
  "vim.insertModeKeyBindings": [
    {
      "before": ["j", "j"],
      "after": ["<Esc>"]
    }
  ],
  "vim.normalModeKeyBindingsNonRecursive": [
    {
      "before": ["<leader>", "d"],
      "after": ["d", "d"]
    },
    {
      "before": ["<C-n>"],
      "commands": [":nohl"]
    }
  ],
  "vim.leader": "<space>",
  "vim.handleKeys": {
    "<C-a>": false,
    "<C-f>": false
  }
}

Please also look at Top 10 Free Code Editors for Windows, Mac & Linux [2020], Keep Learning 🙂

1 thought on “Top VS Code Extensions For Programmers”

Leave a Comment