VS Code – The Best Extensions For General Use, JavaScript and Shell

vs-code-logo-image

VS Code is not only the best free open source editor on the market, but also has the best Linux support I have found.

Microsoft's current strategy is to love all things Linux, and they are throwing their full support behind this amazing editor. It even has it’s own dedicated RHEL, Fedora and CentOS repository.

The pace of development on VS Code is amazing, they bring out a new version every month without fail. Just when you think it can't get any better, they add another feature that you soon won't be able to live without. It is much more responsive than Atom, even though it uses the same Electron framework. It has build in GIT version control tools, debugging, intelligent code completion, a task runner, and whatever is not built in, someone has made an extension for it.

Code has some awesome extensions, these are the ones I use and recommend:

The Best VS Code Extensions for General Use

Live Server

code --install-extension ritwickdey.LiveServer

Launch a development local Server with live reload feature for static & dynamic pages.

Prettier VS Code

code --install-extension esbenp.prettier-vscode

An opinionated code formatter, fast becoming an industry standard.

Spell Right

code --install-extension ban.spellright

Multilingual, Offline and Lightweight Spellchecker.

VS Code Dash

code --install-extension deerawan.vscode-dash

Search off-line documentation using Dash and Zeal integration in Visual Studio Code.

HTMLHint

code --install-extension mkaufman.HTMLHint

VS Code integration for HTMLHint - A Static Code Analysis Tool for HTML.

Stylelint

code --install-extension shinnn.stylelint

Modern CSS/SCSS/Less linter.

The Best VS Code Extensions for Javascript

VS Code ESLint

code --install-extension dbaeumer.vscode-eslint

Integrates ESLint JavaScript into VS Code.

You must install ESLint first using npm install -g eslint globally, or npm install -g eslint locally

Quokka

code --install-extension WallabyJs.quokka-vscode

Live Scratchpad for JavaScript.

Debugger for Chrome (and Chromium)

code --install-extension msjsdiag.debugger-for-chrome

Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol. Add these settings for Linux/Fedora and Chromium:

"liveServer.settings.donotShowInfoMsg": true,
      "liveServer.settings.ChromeDebuggingAttachment": true,
      "liveServer.settings.AdvanceCustomBrowserCmdLine":
      "/usr/bin/chromium-browser --remote-debugging-port=9222",

The Best VS Code Extensions for Shell

Shell Format

code --install-extension foxundermoon.shell-format

A shell script format VS Code extension based on shfmt

Shellcheck

code --install-extension timonwong.shellcheck

An extension to use shellcheck in VS Code. You need to install shellcheck first. I like these settings:

"shellformat.flag": "-i 4",

Or you can install them all at once with:

      code --install-extension WallabyJs.quokka-vscode
      code --install-extension ban.spellright
      code --install-extension dbaeumer.vscode-eslint
      code --install-extension deerawan.vscode-dash
      code --install-extension esbenp.prettier-vscode
      code --install-extension foxundermoon.shell-format
      code --install-extension mkaufman.HTMLHint
      code --install-extension msjsdiag.debugger-for-chrome
      code --install-extension ritwickdey.LiveServer
      code --install-extension shinnn.stylelint
      code --install-extension timonwong.shellcheck
Have fun!

Leave a Reply

Your email address will not be published. Required fields are marked *