I show how to set up VS Code with these themes, extensions and settings in the first section of the course, in lectures Setting Up Our Code Editor and Installing Additional VS Code Extensions. But for your convenience, here is a quick list of everything you need in order to set up VS Code to follow the course.
I use the One Monokai in all the course videos. This is a free theme, similar to my personal favourite Monokai Pro. Link →
Auto Close Tag to automatically close HTML tags. Link →
Auto Rename Tag to automatically update matching HTML tags. Link →
Color Highlight to highlight colors in CSS code. Link →
Image Preview to display an image preview next to the code Link →
Prettier to automatically format code. Link →
Live Server to create a live preview for the current project. Link →
Auto Save set to onFocusChange, to automatically save files
Default Formatter set to Prettier - Code formatter (esbnp.prettier-vscode), to enable the Prettier extension to format our code
Format on Save set to true, to have Prettier format our code each time we save it
Word Wrap set to on, to avoid vertical scrollbars for long content
Tab Size set to 2, for better code readability
https://www.appbrewery.co/p/web-development-course-resources
- Chrome
- Atom
- Atom Plugins https://docs.google.com/document/d/e/2PACX-1vQNuhDC5pFXEVVNGasvddKuDHEXnqR033lsSD5tLA9NiEdHrsYM4MXVEXja2RnBgsCxK6XEo6YkMOFI/pub
Atom Packages
atom-ternjs Adds code intelligence to Atom.
https://atom.io/packages/atom-ternjs
autoclose-html-plus Will help you automatically close HTML tags.
https://atom.io/packages/autoclose-html-plus
emmet Adds code expansion to Atom.
https://atom.io/packages/emmet
csslint Adds CSS error checking abilities to Atom.
https://atom.io/packages/csslint
pigments Adds the ability to display colour in Atom code files.
https://atom.io/packages/pigments
language-ejs Adds EJS language support to Atom.
https://atom.io/packages/language-ejs
atom-beautify Helps to automatically format your code in Atom.
https://atom.io/packages/atom-beautify
Optional Packages atom-html-preview Sublime-Style-Column-Selection linter-eslint
This extension inserts the Pesticide CSS into the current page, outlining each element to better see placement on the page. https://chrome.google.com/webstore/detail/pesticide-for-chrome/bakpbgckdnepkmkeaiomhmfcnejndkbi