Code Editor Setup
We recommend using Visual Studio Code (vscode). It's easy to use and configure and it's currently the most popular editor, which means you can find help easily if something goes wrong.
There are a lot of fancy features you'll pick up as you go. Here are the important ones:
Open the folder you're working on (not individual files)
File -> Open- Select a folder to open (not a file)
Turn on auto save
This will save files automatically without you having to save them manually. Turn this on it will save you from thinking your code is broken when actually you just haven't saved it!
Quickly find a file by starting to type the name of the file
If you open a folder, you can quickly navigate to files
- First press:
- Windows
Ctrl + porCtrl + e - macOS
Cmd ⌘ + p - Linux
Ctrl + porCtrl + e
- Windows
- Start typing the name of the file: e.g.
indeto findindex.html. - Press
enterto open the file.
Install Prettier
Prettier is a tool which formats your (Javascript and HTML) code perfectly every time, try it and see. It's insanely good, you should use it whilst you're learning.
Visual Studio Code has a a prettier plugin you can install.
- Install the prettier plugin
- Open Visual Studio Code's settings:
- On Windows/Linux - File > Preferences > Settings
- On macOS - Code > Preferences > Settings
- Search for 'formatter' in the search box at the top of the settings
- Set
Editor: Format on saveas true (if you want to format whenever your code is saved) - Set
Editor: Format on pasteas true (if you want to format whenever code is pasted in) - Search for 'prettier' in the search box at the top of the settings
- Set
Prettier: Print Widthas120 - Set
Prettier: Semito false (no semi-colons for us!)
Properly formatted code helps you spot mistakes more easily, so this will help you a lot.
Learn your keyboard shortcuts
This isn't super important, but probably worth a quick look at the keyboard shortcuts.
Other editors
If you prefer to use your own editor, that's completely fine! There are a bunch of great editors.
