The VSCode Checklist

illustrations illustrations illustrations illustrations illustrations illustrations illustrations

I get directed a lot of questions that has to do with VSCode and I get it you like it too!There is though a few differences of how things are and what you should keep in mind when using this.

The Terminal is NOT a VScode terminal it’s a Terminal plain and simple, it’s like you opening 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. - Please google accordingly Files can be downloaded like ANY file on your machine.

Now shall we get going… Great!So there is a few section into this, if you are a student at Code Institute and got referred here then GREAT there is a section for the two first milestones and a second section for the last 2. (One covers frontend, and the other covers python etc)


Pre-requirements




Now before we begin there are a few requirements we need, so if you have NOT installed these please do so before continue to read.
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.

  • Install Git (Link) (Windows / Mac)
  • Install Python (Link) Make sure you Add to Path (Windows) (See Screenshot below) Add to Path

  • It’s advised to install this into a folder like C:\Tools\Python

  • Install NodeJS (Trust me it will be better later.)

So you all done now ? 🀣Or maybe you already had it all installed and was like «yeah yeah»… Anyways, installing VSCode is quite straight forward Note: There is two versions of VScode. Insiders and *Normal*Normal is updated once a month and Insiders is updated once a day. Personally the past 3 years i been using Insiders and I have had 2 bugs that has stopped me over the past 3 years and those where fixed an hour later 😎 so i’m fine with

Installing Vscode



- Pick your poison πŸ’€
and download Visual Studio Code - Code Editing - 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 desktop is something can pick yourself, but the others will give you a right click function on files and folders + adding it to path.



VScode And You


Now that we have installed let’s get into the mindset of a developer, and how Vscode can help you. Now if you are coming from cloud9 etc 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 notepad with Super Powers πŸ¦Έβ€β™‚οΈ
so in the barebone vscode is just a text editor but we can expand on this with plugins or extentionds as it’s called. Now 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 like HTML it gives the colors and the tools to 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 on each part.

Front End


User Centric & Interactive Frontend




- Live Server (Link)
- This gives you a live server so when you develop and save it will automatically refresh, now normally you can just open the file but not when you deal with javascript. So this is your go to tool. You install it open a HTML file and right click and hit open with liveserver

  • 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 ment 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! PS feel free to give it 5 stars and a review πŸ™„πŸ˜

Backend


Data Centric Development & Full Stack Development




- 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 download them OR you can use a cloud service.




MongoDB
  • Download and install Locally (Link).
  • This requires to set it up etc so read the documentation

    - Use Mongo Atlas - This will require you to add a Connection String




MySQL


- Download and install Locally (Link) - Use Heroku Postgres

The Terminal and you



This is where people get thrown off ALOT so I’m going to try explain this in simple terms as I can.

So in the world of computers there is loads of terminals, most LINUX computers (Like AWS and C9) using ubuntu which is Linux. These machines uses Bash so any type of BASH commands work. You also have git bash which is a stripped down bash version on windows not really recommended as it can be a pain to setup things, in simple terms it’s not Recommended you want a propper linux experience either install linux or dual boot. OR if you really feel tech savvy you can use WSL (Requires windows 10) Read more under 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 a AWS / C9 pro πŸ‘©β€πŸ’» If you after have set it up want to use WSL inside VScode there is some advanced settings you can use.



CMD

This is windows type of bash now I say type as it’s really not it’s windows version of a terminal. You can type commands except that windows found out not all commands should be needed, so think of it liked a stripped down version of bash When working in windows this is the simplest thing to use and most recommended. Note that a lot of commands except python git are different and you might have to google the differences.

PowerShell

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.



Python and Virtual Enviroments

So to not pollute your machine a virtual enviroment is recommended strongly, think of this like a isolated box per project. So the best thing you can do is create this inside your

I would strongly recommend to have 1 folder and inside have a folder per project. So when you want to work on a project open that folder. 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 Now to use a virtual enviroment you need first to install it and then activate it.

Great so once it’s installed here is how you use it: - Open your Project folder (for arguments sake call i’m using Project1) as above - cd C:\Code\Project1 - virtualenv .venv This will create a folder named .venv and setup a virtual env. - The script below you can replace XXX with .venv to have vscode reconize it.

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 that will setup a virtualenv.

  • Python Environmental Variables
{
"python.pythonPath": "${workspaceFolder}\XXX\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",
},
}

XXX is the folder you named to create your virtualenviroment in*

I hope this has helped to explain some of the things and if you have any questions do let me know!

Published on Jul 25, 2019 by