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

vs-code-logo-imageVS 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 *