VS Code settings that every front-end developer should know

In today's world of web development, Visual Studio Code (VS Code) is considered one of the most powerful and popular integrated development environments (IDEs) among developers. It is known for its great flexibility and support for a wide range of accessories that make the programming process an enjoyable and efficient experience. However, to get the most out of this powerful tool, developers need to customize its settings to suit their specific needs.
Whether you are a novice developer or an expert in front-end development, properly adjusting your VS Code settings can greatly improve your productivity and make the development process much smoother. In this article, we will review a set of optimal settings that will help you improve your programming experience, by using tools such as ESLint, Prettier, Live Server and others.
Get ready to discover how you can turn VS Code into an IDE that meets all your needs as a front-end developer.

Steps to open Visual Studio Code:

1 - Make sure you have Visual Studio Code installed on your machine. If you don't have it, you can download it from the official website.
2 - Open the Command Palette:
Press Ctrl+Shift+P (or Cmd+Shift+P on macOS) to open the command panel.
3 - Find JSON settings:
In the command panel, start typing “Preferences: Open Settings (JSON)” until the option appears in the drop-down menu.
Click this option to open the settings JSON file.
4 - Edit settings:
The settings.json file will open, you can now copy and paste the settings you want to add or modify.
Make sure to save the file after making your edits using Ctrl+S (or Cmd+S on macOS).

You can copy these settings

{
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "files.autoSave": "onFocusChange",
  "files.associations": {
    "*.js": "javascriptreact",
    "*.jsx": "javascriptreact"
  },
  "eslint.alwaysShowStatus": true,
  "prettier.singleQuote": true,
  "prettier.semi": false,
  "prettier.trailingComma": "es5",
  "liveServer.settings.port": 5500,
  "liveServer.settings.root": "/",
  "liveServer.settings.ignoreFiles": [
    ".vscode/**",
    "**/*.scss",
    "**/*.sass"
  ],
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "html": "html",
    "css": "css"
  },
  "editor.quickSuggestions": {
    "strings": true
  },
  "editor.suggestSelection": "first",
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  "workbench.colorTheme": "Default Light+",
  "workbench.iconTheme": "vscode-icons"
}

Explanation of settings:

editor.tabSize: Set the tab size to 2 spaces.
editor.insertSpaces: Use spaces instead of tabs.
editor.formatOnSave: Automatically format code on save.
editor.codeActionsOnSave: Automatically run ESLint fixes on save.
files.autoSave: Auto save when focus changes.
files.associations: Set .js and .jsx files as javascriptreact.
eslint.alwaysShowStatus: Always show ESLint status.
prettier.*: Prettier settings for code formatting.
liveServer.settings.*: Live Server settings to run the project locally.
emmet.includeLanguages: Include Emmet to support multiple languages.
editor.quickSuggestions: Enable quick text suggestions.
editor.suggestSelection: Selects the first suggestion by default.
explorer.confirmDelete: Disable confirmation of deletion.
explorer.confirmDragAndDrop: Disable drag-and-drop confirmation.
workbench.colorTheme: Set the default color theme.
workbench.iconTheme: Set the theme for the icons.