VSCode Settings

This guide will help you customise the appearance of Visual Studio Code.

---

Customization Extensions:

• Aura Theme
• Material Icon Theme

---

Instructions:

1. Install the Extensions

   • Install all the extensions listed above from the VS Code marketplace.

2. Modify settings.json

   • Add the configuration from the settings.json file to the main VS Code settings.json file. Make sure to back up your current settings as this may overwrite them.

3. Reload the Window

   • After making changes to the configuration file, restart the editor from the command palette by selecting "Reload Window".

4. Keyboard shortcuts

   • In addition, you can use key combinations from the keybindings.json file.

---

Extensions I use

• Better Comments
• Better Google Fonts for VS Code
• Code Spell Checker
• CodeSnap
• Color Highlight
• Convert CSS Units
• CSS Peek
• CSS Responsive
• eCSStractor for VSCode
• Error Lens
• Excel Viever
• filesize
• Highlight Matching Tag
• HTML CSS Support
• HTML to CSS autocompletion
• Image preview
• Import Cost
• IntelliPHP - AI Autocomplete for PHP
• Live Sass Compiler
• Live Server
• MDX
• Path Intellisense
• PHP
• PHP Debug
• PHP Intelephense
• PHP Profiler
• PHP Server
• Prettier - Code formatter
• Project Manager
• px-to-units
• Rainbow CSV
• Sass (.sass only)
• SCSS Formatter
• SCSS IntelliSense
• Txt Syntax
• Vscode Google Translate

---

Extensions you might like

• Alien Dark
• Catppuccin Perfect Icons
• cdnjs
• change-case
• Composer
• Console Ninja
• CSS Flexbox Cheatsheet
• CSS-in-JS
• Dot Log
• Dracula Theme Official
• ESLint
• GitHub Theme
• Iceberg
• Icon Fonts
• jsflowchart
• JSON Crack
• Kanagawa
• Monokai Pro
• Multiple cursor case preserve
• Night Owl
• Paste JSON as Code
• Peacock
• px to rem
• Quokka.js
• Snipped
• Soft Colors
• Stylelint
• Todo Tree
• Version Lens
• vscode-faker
• Xcode Theme

---

Feel free to explore and make Visual Studio Code look exactly the way you want it!