While I’ve used (and enjoyed) a number of different coding environments and IDEs in the past (NetBeans, Atom, Brackets, Notepad++), these days, I’m really enjoying VS Code. The following is a list of what I’ve done to customize my WordPress development environment.

1. Customizing Visual Studio Code

Extensions (CTRL + SHIFT + X)

1. Beautify
2. Debugger for Chrome
3. EditorConfig
4. ES6 String HTML
5. ESLint
6. Express
7. GitLens
8. HTML CSS Support
9. IntelliSense for CSS
10. Live Server
11. Markdown All in One
12. PHP Debug
13. PHP DocBlocker
14. PHP IntelliSense
15. PHP Server
16. PHP Code Sniffer
17. Prettier – Code formatter
18. REST Client
19. Sass
20. Settings Sync (special note: Use this Extension to sync your Settings across multiple machines once you’ve got things the way you like)
21. SVN
22. Terminal

Snippets

1. HTML Snippets
2. JavaScript (ES6) code snippets
3. jQuery code snippets
4. React-Native/React/Redux snippets for ES6/ES7 Standard

Themes

1. Atom One Dark Theme
2. Fresh Material
3. Material Icon Theme
4. Material Theme
5. Palenight Theme
6. One Dark Pro
7. One Monokai Theme
8. VS Code Icons

Settings (CTRL + Comma)

Most of these Settings can be found and edited within the Settings interface of VS Code. But to do workbench.colorCustomizations, you’ll need to edit the JSON of your settings. So, it’s easiest to simply Search for that in the search bar, then copy-paste the following into the JSON Settings.

{ 
  "editor.fontFamily": "'Noto Mono', 'Fira Code', Hack", 
  "editor.fontSize": 16, 
  "editor.fontLigatures": true, 
  "editor.formatOnPaste": true, 
  "editor.tabSize": 2, 
  "workbench.iconTheme": "material-icon-theme", 
  "files.autoSave": "onWindowChange", 
  "workbench.colorTheme": "Palenight Italic",
  "workbench.colorCustomizations": {  
    "terminal.background": "#1F2330",  
    "activityBar.background": "#7e57c2" 
  },
}

Fonts

My preferred Settings above require some additional fonts. Here they are:

1. Fira Code
2. Noto Mono
3. Hack

Resources

For more tips on using VS Code, check out the following video lessons.

1. VS Code Power User by Ahmad Awais
2. Learning Visual Studio Code by Reynald Adolphe on LinkedIn
3. Visual Studio Code for Web Developers by Joe Marini on LinkedIn