Make coding a joy with these core VSCode extensions and settings

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"]
}

--

--

--

CTO and Fullstack Webdev at Butterscotch Shenanigans

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Develop a chat application using React js, FastAPI and websocket

5 VS Code Keyboard Shortcuts that Will Save You Time While Creating a React/Rails Project

How to create an instance of a class?

JavaScript Core Concepts - Function and Comments

Using Dredd transactions to mock APIs in tests

Blog Article 03 — NodeJS

Why REACT Is The Best?

Canceling Requests within React Components

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
Adam Coster

Adam Coster

CTO and Fullstack Webdev at Butterscotch Shenanigans

More from Medium

Deploy a Strapi V4 App on Heroku also Connected into Google Cloud SQL (PostgreSQL)

Build dynamic breadcrumb routes and child routes with matchPath in React Router v6

Create and Publish your first npm package with me

How to Setup a Node.js App with a Custom Start and Build Script on Heroku