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

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 ( ritwickdey.LiveServer )

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

Prettier VS Code ( esbenp.prettier-vscode )

An opinionated code formatter, fast becoming an industry standard.

Spell Right ( ban.spellright )

Multilingual, Offline and Lightweight Spellchecker.

VS Code Dash ( deerawan.vscode-dash )

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

HTMLHint ( mkaufman.HTMLHint )

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

Stylelint ( shinnn.stylelint )

Modern CSS/SCSS/Less linter.

The Best VS Code Extensions for Javascript

VS Code ESLint ( 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 ( WallabyJs.quokka-vscode )

Live Scratchpad for JavaScript.

Debugger for Chrome ( 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 ( foxundermoon.shell-format )

A shell script format VS Code extension based on shfmt

Shellcheck ( 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 Comment

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