Workspace: Visual Code setup
initializing the space where you will edit your web app code
Photo by Mohammad Rahmani on Unsplash
Setting up essential software
For now, we only need a code editor like Visual Studio Code (aka VS Code):
- code.visualstudio.com (download link)
(We could also use others like Atom or Sublime but we will use VS Code on this page!)
Starting a new project
- File > New Window
Project folder setup
In the Welcome screen, let's create a project folder:
- Click on "Open..." and create a new folder anywhere
Working on the project
We should now see something like this:
We can divide this interface into three main parts:
Left "sidebar" (a bird's eye view of our project + dev enhancements)
Search: complex functionality for finding-and-replacing!
Open editors: what files we have open
Timeline: what steps we've taken
"Code-editing space" (allows splitting to work on more than one file!)
Bottom "command space"
- Terminal: (we will explain below)
NOTE: We can fully customize VS Code so that the sidebar can also appear on the right; VS Code is very flexible!
Command-line view
In addition to using the Finder (or File Explorer), we can have a command-line (aka Terminal) interface, that will help us navigate through folders and files:
On the top VS Code application bar, let's try View > Terminal
At the bottom of VS Code, a Terminal panel will appear
Here we can enter commands like
lsto list the folders and files of our project
Saving the workspace
We will continue working on the project later but let's save the "workspace":
File > Save Workspace as...
Let's actually save this file outside of our project folder
When we open this workspace file later, it will tell VS Code what files to re-open!
Other things to do
As we become comfortable with VS Code, we can also enhance our "developer experience" via:
Extensions (optional language-specific helper plug-ins)
Configurations (e.g. keyboard shortcuts)
For now, have fun coding and enjoy!