5 VSCode settings that frontend devs usually skip (but really should know)

Hey there,
I’m a frontend dev, and today I just wanna share some VSCode settings that helped me code faster and cleaner. Some of them are small, but trust me, they make a big difference. A lot of devs (even me before) didn’t care about these things, but now I can’t live without them.

Let’s go!

1. Prettier + ESLint auto format on save

This one is basic, but still many people don’t set it up properly. When you install Prettier and ESLint extensions, don’t forget to add this to your settings.json:

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "prettier.requireConfig": true
}

Why? Because it helps format and fix code automatically when you save. You don’t have to press Shift + Alt + F anymore.

2. Use path alias instead of long relative paths

This is super useful when your project has many folders. Don’t write like this:

import Button from '../../../components/Button'

Instead, create alias like:

import Button from '@/components/Button'

Just edit your jsconfig.json or tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

And then install this VSCode extension: "Path Intellisense".

3. Enable Emmet for JSX (or Tailwind lovers)

If you use Tailwind or write a lot of JSX/HTML in React, Emmet can help you write faster. But sometimes Emmet doesn’t work in JSX. Here’s how to fix:

"emmet.includeLanguages": {
  "javascript": "javascriptreact",
  "typescript": "typescriptreact"
}

Now you can type things like div.container>ul>li*3 and press Tab → boom!

4. Auto import & suggestions faster

Sometimes VSCode takes too long to show auto import. You can speed it up a bit with:

"typescript.preferences.importModuleSpecifier": "non-relative",
"javascript.suggest.autoImports": true

And also disable some suggestions if you feel VSCode too “talkative”:

"editor.suggest.showKeywords": false

5. Use extensions that actually help

There are millions of extensions, but here are 3 that I think every frontend dev should have:

ESLint – for fixing code style
Prettier – for formatting
Tailwind CSS IntelliSense – if you use Tailwind
(Optional) Import Cost – shows file size when you import something

Don’t install too many extensions. Keep it clean and fast ?.

? Final tip

Sometimes, small tweaks in your editor help save minutes every day → becomes hours every month.
Try to customize your VSCode for your style. You don’t have to copy exactly mine. Just find what makes you faster and more comfortable.

Thanks for reading! ❤️