Make coding a joy with these core VSCode extensions and settings

Visual Studio Code (VSCode) has rapidly become the favored editor/IDE for a huge swath of web developers. This is in no small part due to its robust extensions marketplace and the fact that you can change how pretty much every little aspect works.

I’ve been using it for the past few years of webdev work with a myriad of technologies (Node.js, Typescript, vanilla JavaScript, Vue.js, Svelte.js, HTML/CSS, Docker, and on and on), and it’s only let me down when I strayed too far from web technologies.

Below are the core extensions and settings I’ve settled on for general JavaScript/Node-centered web development, that have collectively made my work an absolute joy.

VSCode Extensions

  • ESLint is basically required. You’ll still have to install ESLint locally (npm i eslint) or globally (npm i -g eslint) via npm.
  • npm for validating your package.json file. It'll show you any obvious errors in VSCode when you have your package.json file open.
  • npm intellisense for autocompleting import/require statements.
  • Path Intellisense for autocompleting things that look like paths, making it much easier to correctly type out file/folder paths.
  • Better Comments for comment highlighting based on keywords.
  • Beautify for cleaning up janky-looking files of various types. Use with Ctrl+Shift+Pbeau and choose the option you want.
  • change-case for toggling between all the classic casing strategies. Particularly great for converting snake-cased JavaScript into kebab-cased HTML. Use with Ctrl+Shift+P and then starting typing the case name you want to convert to.
  • Prettify JSON to make JSON readable. Use with Ctrl+Shift+Pprett.

VSCode Settings

{
"editor.fontFamily": "'Fira Code', Consolas, 'Courier New', monospace",
"editor.fontLigatures": true,
"js/ts.implicitProjectConfig.checkJs": true,
"eslint.validate": ["javascript","html","vue","typescript"],
"git.autofetch": false,
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
"terminal.integrated.shellArgs.windows": ["-l"]
}

If you want to use the Fira Code font, you’ll need to first install it.

The terminal... fields are for setting Git Bash as the default terminal, if that's the sort of thing you're into.

--

--

CTO and Fullstack Webdev at Butterscotch Shenanigans

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store