Tag: local development environment

Personalize VS Code

I’ve really been enjoying VS Code for development these days. Here are some of the things I’ve done to customize my new favorite code editor.

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