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
)
- Beautify
- Debugger for Chrome
- EditorConfig
- ES6 String HTML
- ESLint
- Express
- GitLens
- HTML CSS Support
- IntelliSense for CSS
- Live Server
- Markdown All in One
- PHP Debug
- PHP DocBlocker
- PHP IntelliSense
- PHP Server
- PHP Code Sniffer
- Prettier – Code formatter
- REST Client
- Sass
- Settings Sync (special note: Use this Extension to sync your Settings across multiple machines once you’ve got things the way you like)
- SVN
- Terminal
Snippets
- HTML Snippets
- JavaScript (ES6) code snippets
- jQuery code snippets
- React-Native/React/Redux snippets for ES6/ES7 Standard
Themes
- Atom One Dark Theme
- Fresh Material
- Material Icon Theme
- Material Theme
- Palenight Theme
- One Dark Pro
- One Monokai Theme
- 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:
Resources
For more tips on using VS Code, check out the following video lessons.
- VS Code Power User by Ahmad Awais
- Learning Visual Studio Code by Reynald Adolphe on LinkedIn
- Visual Studio Code for Web Developers by Joe Marini on LinkedIn