The VSCode Checklist

The VSCode Checklist

The updated 2021 guide now with mac suppport

Subscribe to my newsletter and never miss my upcoming articles

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 Add to Path

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

Include-VSCode-in-your-PATH-environment-variable.png

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
    pipenv install Flask pep8 autopep8 pylint pylint-flask
    
    The additional packages are used for lining and errors.

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. πŸ‘‡

Β 
Share this