🚀 Frontend VS Code Starter

Welcome to my Frontend VS Code Starter – a fully customized Visual Studio Code setup tailored for frontend development study! 🎨✨ This setup includes all the essential settings, extensions, and tweaks to boost learning and productivity and create a seamless development experience.

---

📌 Features

✅ Pre-configured VS Code settings optimized for frontend devs.
✅ Essential extensions for HTML, CSS, and Git workflows.
✅ Linting & Formatting via ESLint & Prettier.
✅ Live Sass Compiler for automatic SCSS conversion.
✅ Accessibility tools to ensure inclusive designs.
✅ Git integration for streamlined version control.
✅ Beautiful UI enhancements for a clean coding experience.

---

📂 What's Included?

This repo contains the following configuration files:

• settings.json – Contains all the optimized settings for VS Code.
• extensions.txt – A list of recommended extensions for an enhanced frontend dev workflow.
• README.md – This file! Explains how to set up everything.

---

🔧 Installation Guide (Windows, Mac, & Linux)

1️⃣ Install VS Code

If you don’t already have it, download Visual Studio Code:
🔗 Download VS Code

2️⃣ Clone This Repo

Open a terminal or PowerShell and run:

git clone https://github.com/Paul-DK/frontend-vscode-starter.git

3️⃣ Install Extensions

🔹 Windows (PowerShell)

Get-Content extensions.txt | ForEach-Object { code --install-extension $_ }

🔹 Mac/Linux (Terminal)

xargs -n 1 code --install-extension < extensions.txt

4️⃣ Apply the VS Code Settings

Ensure you replace user with your actual system username in the paths below.

🔹 Windows (PowerShell)

copy settings.json $env:APPDATA\Code\User\settings.json

🔹 Mac

cp settings.json ~/Library/Application\ Support/Code/User/settings.json

🔹 Linux

cp settings.json ~/.config/Code/User/settings.json

5️⃣ Restart VS Code

Close and reopen VS Code for the settings to take effect. 🎉

---

🛠 Recommended Extensions

Extension	Description
Better Comments	Improves comment readability
Accessibility Snippets	Helps ensure accessible coding
CodeSnap	Take beautiful screenshots of code
ESLint	JavaScript/TypeScript linting
Axe Accessibility Linter	Finds accessibility issues in code
CSS Flexbox Cheatsheet	Quick flexbox reference
GitLens	Enhances Git integration
HTML CSS Support	Provides auto-completion for HTML & CSS
Material Theme	Aesthetic VS Code theme
Material Theme Icons	Icon pack for Material Theme
Prettier	Automatic code formatter
Auto Rename Tag	Auto-updates paired HTML tags
GitHub Copilot	AI-powered code suggestions
GitHub Copilot Chat	AI-powered chat for coding help
Live Sass Compiler	Compile SCSS/SASS automatically
Gutter Preview	Preview images in the gutter
Git Graph	Visual Git history
Live Share	Collaborative coding in VS Code
Color Highlight	Highlights color codes
Indent Rainbow	Colorizes indentation levels
Polacode	Create screenshots of code snippets
CSS Peek	Jump to CSS rules from HTML
Live Server	Run a live preview of your HTML/CSS changes
HTML5 Boilerplate	Quickly generate HTML5 templates
SVG Preview	Preview SVG images
Markdown All in One	Enhanced Markdown support

---

📜 License

This project is licensed under the MIT License, meaning you’re free to use, modify, and distribute it however you like! 😎

---

🎉 Happy Coding!