Here’s how to set up VS Code for a productive development experience.

Essential Configuration

1. Install Fira Code and set it as your Font Family
2. Set Tab Size to 2 (spaces, not tabs)
3. Add **/node_modules to the Excluded Files to prevent them from showing up in the file list
4. Enable Format on Paste and Format on Save
5. Enable font ligatures
6. Disable the Minimap
7. Enable Trim Trailing Whitespace

Recommended Themes

Switch between these based on your preference:

• Palenight Theme
• Nostromo
• Night Owl
• Ayu

Essential Extensions

• Prettier
• IntelliSense for CSS class names
• Intent 4-to-2
• ESLint
• Duplicate action
• Bracket Pair Colorizer 2
• Babel ES6/ES7
• ES7 React/Redux/GraphQL/React-Native snippets
• TODO Highlight

Sample settings.json

Here’s a complete configuration:

{
    "editor.fontFamily": "Fira Code",
    "editor.tabSize": 2,
    "editor.wordWrap": "bounded",
    "files.exclude": {
        "**/node_modules": true
    },
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
    "editor.minimap.enabled": false,
    "workbench.colorTheme": "Tomorrow Night Blue",
    "files.trimTrailingWhitespace": true,
    "workbench.activityBar.visible": false,
    "window.zoomLevel": 2,
    "editor.cursorBlinking": "smooth",
    "editor.fontLigatures": true,
    "prettier.jsxBracketSameLine": true,
    "prettier.jsxSingleQuote": true,
    "prettier.singleQuote": true,
    "prettier.semi": false,
    "[markdown]": {
        "editor.renderWhitespace": "all",
        "editor.acceptSuggestionOnEnter": "off",
        "editor.parameterHints.enabled": false,
        "editor.quickSuggestions": false,
        "editor.snippetSuggestions": "none"
    }
}

The [markdown] section adds Markdown-specific configuration to disable all the popups that distract while writing.

Installing the code Command

To open VS Code from the terminal, install the CLI command:

1. Open VS Code
2. Press cmd-option-P (or View -> Command Palette)
3. Search for Shell Command: Install 'code' command in PATH
4. Press enter

Now you can use:

• code foldername to open a folder
• code filename to open a file
• code . to open the current directory
• code -n to create a new window
• code --diff file1.js file2.js to quickly compare two files

Hiding Tailwind Classes

If you use Tailwind CSS, install the Tailwind Fold extension.

This extension hides all classes by default in your JSX and HTML files, and only shows the classes when you click on them. This gives you a cleaner look when you don’t need to see all the class names.

Keep this extension inactive by default, and use a shortcut to hide all classes when you want a “clean look”.

Solving High CPU Usage

If you experience high CPU usage with projects containing many files under node_modules, add this to your configuration:

{
  "files.exclude": {
    "/.git": true,
    "/.DS_Store": true,
    "/node_modules": true,
    "/node_modules/": true
  },
  "search.exclude": {
    "/node_modules": true
  },
  "files.watcherExclude": {
    "/node_modules/": true
  }
}

Lessons in this unit:

0:	Introduction
1:	▶︎ Setup and Configuration Tips
2:	Terminal Tips
3:	Editing Tips
4:	Prettier and Auto-Formatting
5:	Language-Specific Settings
6:	Emmet for Faster HTML/CSS
7:	Debugging in VS Code
8:	Fix node modules import errors in VS Code
9:	Fixing TS issues in VS Code - Astro
10:	regex select entire line starting with..