logo
WorkBlogsProjects

Setup

Complete guide to setting up VS Code with my preferred configuration, extensions, and fonts.

Step 1

Install Development Tools

Install Node.js (v18 or higher) from nodejs.org

Install Bun package manager from bun.sh

Install Visual Studio Code from code.visualstudio.com

Install Git from git-scm.com

Step 2

VS Code Extensions Setup

Install essential extensions for development:

  • ES7+ React/Redux/React-Native snippets
  • Prettier - Code formatter
  • ESLint
  • Auto Rename Tag
  • Bracket Pair Colorizer
  • GitLens
  • Thunder Client (for API testing)
  • Tailwind CSS IntelliSense
Step 3

Configure Development Environment

Configure VS Code settings for optimal development:

  • Set Prettier as default formatter
  • Configure ESLint for auto-fix on save
  • Set up Git configuration
  • Configure terminal integration
Step 4

AI Tools & Productivity

Set up AI-powered development tools:

  • ChatGPT for code assistance
  • Claude for debugging help
  • Perplexity for research
  • Cursor IDE for AI-assisted coding
  • Replit for quick prototyping

settings.json

settings.json
{
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },
    "tailwindCSS.includeLanguages": {
        "javascript": "javascriptreact",
        "typescript": "typescriptreact"
    }
}
Final

Complete Setup

Paste the code in the settings.json file in VS Code

Save the settings.json file

Cmd + S (Mac) / Ctrl + S (Windows)and restart VS Code
Done!🚀

Design & Developed by Anshul Chouhan
© 2026. All rights reserved.