Visual Studio Code Extensions

Code Editor

Extensions	Description
Error Lens	Improve highlighting of errors, warnings and other language diagnostics
indent-rainbow	Makes indentation easier to read
Material Icon Theme	Material Design Icons for Visual Studio Code
One Dark Pro	Atom‘s iconic One Dark theme for Visual Studio Code
Path Intellisense	Visual Studio Code plugin that autocompletes filenames
Prettier - Code formatter	Code formatter using prettier
Sort lines	Sorts lines of text
TODO Highlight	highlight TODOs, FIXMEs, and any keywords, annotations
Todo Tree	Show TODO, FIXME, etc. comment tags in a tree view

HTML + CSS

Extensions	Description
Auto Close Tag	Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text
Auto Rename Tag	Auto rename paired HTML/XML tag
CSS Peek	Allow peeking to css ID and class strings as definitions from html files to respective CSS. Allows peek and goto definition
HTML CSS Support	CSS Intellisense for HTML
IntelliSense for CSS class names in HTML	CSS class name completion for the HTML class attribute based on the definitions found in your workspace

PHP + Laravel

Extensions	Description
Better PHPUnit	A better PHPUnit test runner
Laravel Artisan	Run Laravel Artisan commands within Visual Studio Code
Laravel Blade formatter	Laravel Blade formatter for VSCode
Laravel Blade Snippets	Laravel blade snippets and syntax highlight support
Laravel Blade Spacer	Automatically add spaces in Laravel Blade template tags
Laravel Extra Intellisense	better intellisense for laravel projects
Laravel goto view	Quick jump to view
Laravel Snippets	Laravel snippets for Visual Studio Code (Support Laravel 5 and above)
PHP Constructor	Initialize php constructor properties
php cs fixer	PHP CS Fixer extension for VS Code, php formatter, php code beautify tool, format html
PHP DocBlocker	A simple, dependency free PHP specific DocBlocking package
PHP Getters & Setters	Create PHP getters and setters from class properties
PHP Intelephense	PHP code intelligence for Visual Studio Code
PHP Namespace Resolver	Import and expand php namespaces

JavaScript + Node.js

Extensions	Description
Auto Import	Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX
ESLint	Integrates ESLint JavaScript into VS Code
JavaScript (ES6) code snippets	Code snippets for JavaScript in ES6 syntax
JavaScript Booster	Boost your productivity with advanced JavaScript/TypeScript refactorings and commands
jQuery Code Snippets	Over 130 jQuery Code Snippets
Node.js Exec	Execute the current file or your selected code with node.js
npm intellisense	Visual Studio Code plugin that autocompletes npm modules in import statements
Quokka.js	JavaScript and TypeScript playground in your editor
Search node_modules	Quickly search the node_modules folder

Optional

Extensions	Description
DotENV	Support for dotenv file syntax
Git Graph	View a Git Graph of your repository, and perform Git actions from the graph
GitHub Copilot	Your AI pair programmer
Live Server	Launch a development local Server with live reload feature for static & dynamic pages
Markdown Preview Enhanced	Markdown Preview Enhanced ported to vscode
markdownlint	Markdown linting and style checking for Visual Studio Code
Version Lens	Shows the latest version for each package using code lens

User Settings (JSON)

{
  // Clean and Minimalistic
  "breadcrumbs.enabled": false,
  "diffEditor.ignoreTrimWhitespace": true,
  "editor.formatOnSave": true,
  "editor.guides.bracketPairs": "active",
  "editor.inlineSuggest.enabled": true,
  "editor.linkedEditing": true,
  "editor.mouseWheelZoom": true,
  "editor.quickSuggestions": {
    "strings": "on"
  },
  "editor.renderWhitespace": "none",
  "editor.scrollBeyondLastLine": false,
  "editor.smoothScrolling": true,
  "editor.wordWrap": "on",
  "files.autoSave": "afterDelay",
  "files.insertFinalNewline": true,
  "files.trimFinalNewlines": true,
  "files.trimTrailingWhitespace": true,

  // Optional
  "diffEditor.renderSideBySide": false,
  "editor.copyWithSyntaxHighlighting": false,
  "editor.fontFamily": "'Fira Code'",
  "editor.fontLigatures": true,
  "editor.minimap.enabled": false,
  "git.autofetch": true,
  "git.confirmSync": false,
  "terminal.integrated.defaultProfile.windows": "Git Bash",
  "workbench.startupEditor": "none",

  // Extension: DotENV
  "files.associations": {
    "*.env": "dotenv"
  },

  // Extension: markdownlint
  "markdownlint.config": {
    "MD033": false,
    "MD041": false
  },

  // Extension: Material Icon Theme
  "workbench.iconTheme": "material-icon-theme",

  // Extension: One Dark Pro
  "workbench.colorTheme": "One Dark Pro Flat",

  // Extension: php cs fixer
  "php-cs-fixer.executablePath": "${extensionPath}/php-cs-fixer.phar",
  "php-cs-fixer.executablePathWindows": "php-cs-fixer.bat",
  "php-cs-fixer.rules": "@PSR2",
  "[php]": {
    "editor.defaultFormatter": "junstyle.php-cs-fixer"
  },

  // Extension: Prettier - Code formatter
  "prettier.printWidth": 2000,
  "prettier.singleQuote": true,
  "prettier.tabWidth": 2,
  "[css][html][javascript][json][jsonc][markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2
  },

  // Extension: TODO Highlight
  "todohighlight.keywords": [
    {
      "text": "BUG:",
      "color": "white",
      "backgroundColor": "red",
      "overviewRulerColor": "red"
    }
  ],

  // Extension: Todo Tree
  "todo-tree.highlights.enabled": false
}