The VSCode Checklist
The updated 2021 guide now with mac suppport
I get directed many questions that have to do with VSCode, and I get it you like it too! There are a few differences in how things are and what you should keep in mind when using this.
The Terminal
The Terminal is NOT a VScode terminal it's a Terminal plain and simple. It's like you open the terminal on your machine. This means if you are on a Mac or Unix system, commands might differ from if you are on Windows.
Now shall we get going... Great π ! So there are a few sections into this. If you are a student at Code Institute and got referred here, then GREAT. π¦Ί π Do give me a shoutout if this guide helped you on Slack! π
Pre-requirements
Windows
- Install Git (Link) (Windows)
- Install Python (Link) Make sure you Add to Path (See Screenshot below)
- It's advised to install this into a folder like
C:\Tools\Python
Mac
Let's set up code and install developer dependencies to supercharge your mac.
xcode-select --install
Install HomeBrew
Homebrew is the lost package manager in mac, and as a developer, it's one of those things you will have to get used to working with. You can mostly install any packages from the terminal So to install it, it's as simple as open your terminal and paste in the code below π
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Once this is completed, welcome to the world of homebrew. So to install git and python, we can do
brew install git
brew install python@3.9
Voila simple and easy. (Note that you might see --cask
when installing with homebrew. Cask is a flag we use to install it as a program, and not just a tool, Think of a tool as CLI and CASK as an actual GUI app)
Well done π
Both
- Install NodeJS (Trust me, it will be better later.)
Before we begin, there are a few requirements we need, so if you have NOT installed these, please do so before reading.
Please Note: The screenshots etc., here are mostly for Windows users. If you are on Mac or any Linux distro, please follow the guides for the same according to their specs.
So you all done now? π€£ Or maybe you already had it all installed and was like, "yeah yeah"... Anyways, installing VSCode is quite straightforward.
Installing VSCode
Note: There are two versions of VScode. Insiders and Normal, Normal is updated once a month, and insiders is updated once a day. Personally, for the past 4 years, I have been using insiders and I have had 2 bugs that have stopped me over the past 3 years, and those were fixed an hour later π , so I'm fine with using insiders.
TLDR - What to choose?
- Insiders if you want the bleeding edge and the newest version
- Normal if you want the most stable and tested version
Installing Vscode
Windows
- Pick your poison π and download Visual Studio Code
- Install it by following the steps but do note the ADD TO PATH
Add all checkboxes The checkbox for the desktop you can pick yourself, but the others will give you a right-click function on files and folders + adding it to the path.
Mac
- If you are on a MAC, we can use
HomeBrew
again
VSCode
brew install --cask visual-studio-code
VSCode Insiders
visual-studio-code-insiders
VScode And You
Now that we have installed it let's get into a developer's mindset and how Vscode can help you. If you are coming from Cloud9 / Gitpod, you need to reset your mind on things.
VSCode is NOT running in your browser, so a terminal is on your machine. How do you download a file? Just like you download any file. These are files physically on your machine. Treat them as such. π
VSCode, in simple terms, is like a notepad with Super Powers π¦Έββ , so in the barebone, VSCode is just a text editor, but we can expand on this with plugins or extensions as it's called. Note that this doesn't add things like MySQL** or MongoDB** etc. it adds the ability to read things in a better way, think of it as HTML, give the colours, and report if you have errors in your syntax etc. Now below, I generated up a list of plugins you should have. These are in no particular order, but I will explain briefly what they do in each part.
Front End
User-Centric & Interactive Frontend (Portfolio 1-2)
Live Server (Link)
This gives you a live server, so it will automatically refresh when you develop and save. Now, normally, you can open the file but not when you deal with javascript. So this is your go-to tool. You install it, open an HTML file, and right-click and hit
open with a live server.
Live Sass Compiler (Link)
Same author as above, this is for people that like to write
SASS
/SCSS
. You can configure this per workspace or global settings to your liking. (More details further down on snippets).Bootstrap 4 CDN Snippet (Link)(Self Promo)
I made this plugin after been working with VSCode for a while. It is meant to help with the boilerplate of Bootstrap. No more do you need to find the CSS and JS to make it match. You can use
!bcdn
and voila ready to go! This now supports Bootstrap 4 and 5, but also all the bootswatch themes
PS feel free to give it 5 stars and a review π π
Error Lens Link
ErrorLens turbo-charges language diagnostic features by making diagnostics stand out more prominently, highlighting the entire line wherever a diagnostic is generated by the language and prints the message inline. In plain English, it will highlight all lines and nag you to fix them. Making it easy to spot your errors instead of small squiggly lines.
ESLint Link
Integrates ESLint into VS Code. If you are new to ESLint, check the documentation. Highlighting errors in your javascript code etc., and making sure you are using best practices.
Backend
Data Centric Development & Full Stack Development (Portfolio 3-5)
- Python Extension for VScode (Link)
- For Flask, see Flask snippets for minor tweaks and setup
- For Django, see Django snippets for minor tweaks and setup
Databases
You can either install them locally on your machine by downloading them or use a cloud service. (If it's wanted, let me know, and I can set up a guide on how to use docker π³
MongoDB
- Download and install Locally (Link).
This requires setting it up etc. so read the Windows Docs or Mac Docs
Use Mongo Atlas - This will require you to add a
Connection String
MySQL
Download and install Locally (Windows)
Install Locally with mac using Homebrew
brew install MariaDB
PS: MariaDB is an openSource drop-in replacement for Mysql, so it's the same.
Use Heroku Postgres
The Terminal and you
This is where people get thrown off A LOT, so I'm going to try to explain this as in simple terms as I can. π€·ββοΈ
So in the world of computers, there are loads of terminals. Most UNIX computers (Like Cloud9 / Gitpod / AWS) using ubuntu which is Linux.
These machines use Bash, so any BASH command work.
Windows is using their Powershell
or Command Line
aka CMD
. Still, you can install git bash
, a stripped-down bash
version on windows, not really recommended as it can be a pain to set up things. In simple terms, it's not Recommended you want a propper Linux experience either install Linux on dual boot. OR if you really feel tech-savvy, you can use WSL(Requires windows 10). Read more under the WSL section below.
WSL
WSL is Windows Subsystem Linux
, which gives you a full-blown Linux environment under the hood in windows, great to execute ANY terminal commands on.
A quick setup can be found here
This means you can now execute commands like in Gitpod / Cloud9 as a pro π©βπ»
After setting it up and want to use WSL inside VScode, you can use some advanced settings.
CMD
This the Windows type equivalent of bash
now I say type as it's really not its windows version of a terminal. You can type commands, except that windows found out not all commands should be needed, so think of it as a stripped-down version of bash.
When working in windows, this is the simplest thing to use and most recommended.
Note that many commands except python
git
are different, and you might have to google the differences.
PowerShell
It works just like CMD but is more modern. I don't really recommend it as it has some other quirks to it. Feel free to use it, though.
Windows Terminal
If you are on Windows 10, then this is for you. It's a developer terminal that is quite powerful with some nice customization. It's just a wrapper around all terminals, but you can read more about it here
Python and Virtual Environments
So to not pollute your machine, a virtual environment is recommended strongly. Think of this as an isolated box per project. So the best thing you can do is create this inside your project.
I would strongly recommend having 1 folder and inside have a folder per project. So when you want to work on a project, open that folder
.
Windows:
An example would be in a Let's say C:\
for windows users you would have it like this.
-C:\
--Code
---Project1
---Project2
---Project3
This means you can access any project by going to C:\Code\YourProject
Mac note
~
in Unix is the same as the home folder, so for mac, it's /Users/YOURUSERNAME
instead of the path that we can say ~
-~
--/Code/
---Project1
---Project2
---Project3
To use a virtual environment, you need first to install
it and then activate it
.
For this, we can use pipenv
, which package we can install
Windows
pip install pipenv
- Close the terminal
Mac
pip3 install pipenv
All doneπ now, let's tell PIPENV to use the .venv folder in the project by default.
Windows
SET PIPENV_VENV_IN_PROJECT="enabled"
Mac
- Open your terminal and paste the following code π
nano ~/.bash-profile
Then paste in π
SET PIPENV_VENV_IN_PROJECT="enabled"
Note: Press Control X then Y + ENTER to save
source ~/.bash-profile
Testing it all out
Let's now try to test this out and make a Flask application.
- Open your Project folder (for argument's sake I'm using Project1) as above
cd ~/Code\Project1
- Create a folder called
.venv
- Open the terminal and execute the following command
The additional packages are used for lining and errors.pipenv install Flask pep8 autopep8 pylint pylint-flask
Once installed, it should have populated the .venv
folder you have with some files. If not, scroll up and make sure you have set the PIPENV_VENV_IN_PROJECT="enabled"
correctly. Make sure you also close the terminal.
Workspace Settings
Workspace settings are settings per folder or project if you want. You can override global ones or set special ones like the one below to set up a virtualenv.
Windows
{
"python.pythonPath": "${workspaceFolder}\\.venv\\Scripts\\python.exe",
"python.terminal.activateEnvironment": true,
"python.linting.enabled": true,
"files.autoSave": "onFocusChange",
"terminal.integrated.env.windows" : {
"SECRET_KEY": "my secret key here",
"DEV": "1",
"FLASK_DEBUG": "1",
"MONGO_URI": "my uri here",
"FLASK_APP": "app.py"
"FLASK_ENV":"development"
},
}
Mac*
{
"python.pythonPath": ".venv/bin/python",
"python.terminal.activateEnvInCurrentTerminal": true
"python.linting.enabled": true,
"files.autoSave": "onFocusChange",
"terminal.integrated.env.osx" : {
"SECRET_KEY": "my secret key here",
"DEV": "1",
"FLASK_DEBUG": "1",
"MONGO_URI": "my uri here",
"FLASK_APP": "app.py"
"FLASK_ENV":"development"
},
}
NOTE: Make sure you reload vscode - Pro tip here is you can press CMD + SHIFT + P (Mac) or CTRL + SHIFT + P on windows. This will open the command palette where you have access to all settings (if it's prefixed with > if it's not, it's all files and fussy searching. π Anyways, type > Reload and find > Developer: Reload Window
All done? π Nice, let's finish off our Flask app.
Note: It should say (.venv)
at the left side of the terminal, or vscode should have asked you if you want read environmental variables which you should say yes to.
If this is not the case, you can enable the virtual environment yourself by executing
pipenv shell
Create an app.py
file and paste the following content below into it.
from flask import Flask
app = Flask(__name__)
@app.route('/')
def hello_world():
return 'Hello, World!'
And in the terminal, we can now run
flask run
Now you should have auto reload
on save and a flask server running on port 5000 ready to develop like a pro. π©βπ»
Now that should be it, and you are ready to code in any language that Code Institute provides, please note that we do have a channel run by students #vscode
If you got questions, leave a comment below. π