Devslopes Web Academy Extension Pack

A curated collection of essential VS Code extensions for our coding bootcamp students. This extension pack provides all the tools our mentors expect you to have installed for a smooth development experience.

🚀 What's Included

Code Quality & Formatting

• Prettier - Code formatter - Automatically formats your code to maintain consistent style across all files
• Error Lens - Highlights errors and warnings directly in your code editor for immediate feedback
• Code Spell Checker - Catches typos in your code, comments, and strings

Development Workflow

• Live Server - Launch a local development server with live reload for instant preview of changes
• Better Comments - Create more human-friendly comments with colored annotations (TODO, FIXME, etc.)
• TODO Tree - Tracks all your TODO comments across your project in an organized tree view

Collaboration & Remote Development

• Live Share - Real-time collaborative editing and debugging with mentors and classmates
• Remote - WSL - Seamlessly develop in Windows Subsystem for Linux from VS Code

Code Validation

• Web Validator - Validates HTML, CSS, and accessibility directly in your editor

💡 Why These Extensions?

Our mentors have carefully selected these extensions because they:

• Prevent common mistakes through spell checking, error highlighting, and code validation
• Speed up development with live reloading and instant error feedback
• Improve code quality by enforcing consistent formatting standards
• Enhance collaboration with real-time sharing and better commenting tools
• Support diverse environments with WSL integration for cross-platform development

📦 Installation

1. Open VS Code
2. Go to the Extensions view (Ctrl+Shift+X or Cmd+Shift+X)
3. Search for "Devslopes Extension Pack"
4. Click Install

That's it! All extensions will be installed automatically.

⚙️ Recommended Settings

After installation, add these settings to your VS Code settings.json for the best experience:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "liveServer.settings.donotShowInfoMsg": true,
  "todo-tree.tree.showCountsInTree": true,
  "errorLens.enabledDiagnosticLevels": ["error", "warning", "info"],
  "cSpell.userWords": [],
  "better-comments.tags": [
    {
      "tag": "!",
      "color": "#FF2D00",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    },
    {
      "tag": "?",
      "color": "#3498DB",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    },
    {
      "tag": "//",
      "color": "#474747",
      "strikethrough": true,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    },
    {
      "tag": "todo",
      "color": "#FF8C00",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    }
     {
      "tag": "*",
      "color": "#98C379",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    },
      {
      "tag": "$",
      "color": "#FFBF00",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": true,
      "italic": false
    },
  ]
}

🎯 Getting Started

1. Set up your development environment - Use Live Server to preview your projects locally
2. Format your code - Prettier will automatically format your code on save
3. Track your TODOs - Use Better Comments (// TODO: Add error handling) and view them in the TODO Tree
4. Collaborate with mentors - Use Live Share to get real-time help during debugging sessions
5. Validate your markup - Web Validator will catch HTML and CSS issues as you code
6. Monitor errors - Error Lens shows problems directly in your editor without switching panels

🆘 Need Help?

• Extension issues? Ask your mentor during mentor sessions or schedule a 1 on 1
• Can't find a feature? Check the extension documentation in VS Code
• Want to customize? Most extensions have configurable settings

🔄 Updates

This extension pack is regularly updated with new tools and improvements. VS Code will notify you when updates are available.

Designed for students at Devslopes - Happy coding! 🎉