For Windows users:
One of the main appeals of web development is that products work on all devices regardless of OS. That being said, there can be some difficulties when developing web apps from different OS's - particularly Windows. This is why we recommend Windows Subsystem for Linux (WSL) for development on Windows systems. This is a Microsoft-made tool which allows you to run a lightweight Linux system inside Windows, making your developer experience more convenient.
If you're on Windows, follow this guide to set up WSL. We also recommend using Windows Terminal to access your Linux subsystem once it is installed. You can then follow the rest of this guide as written using WSL.
If you instead choose to develop on Windows without WSL, expect to spend some time debugging and looking around for answers when things don't work quite as expected when installing dependencies and submitting work. The teaching staff will work with you to mitigate these problems!
⚙️ Installing node
React and Express are popular examples of Node packages which we will become familiar with over the course of this semester.
If you've heard of Yarn, it's another package manager developed by Facebook which largely does the same thing as npm with subtle differences. For this course, we will stick to npm for homeworks.
To check if Node is already installed, open your terminal and run:
If you get back something along the lines of
18.16.1, you're good to go. If you have a version less than
16, consider installing a more recent release. If there is an error or no version is returned, follow the directions below.
We recommend using Node Version Manager (nvm) for installing Node. This will give you more control over the version(s) of Node installed on your system. Run their install script to get set up. Once installed, use it to install the latest long-term support (LTS) release of Node by running:
nvm install --lts
To assert everything installed correctly, run
node -v. You should get back something like
📝 Picking a code editor
Few people write JS in full-fledged IDE's in the way you might be used to running Java in Eclipse or IntelliJ. Though there are solutions for this (like Webstorm) these often introduce overhead and unnecessary complexity.
Instead, web devs often use lighter tools like VSCode, Sublime Text, or Atom. The CIS-1962 staff recommends VSCode because of its strong developer community, powerful extensions, and integrated terminal. However, all of these tools are loved for having built-in and downloadable extensions which improve the developer experience, like syntax highlighting, code completion, and automatic formatting.
For Windows users:
VSCode has a WSL extension which allows you to access your Linux subsystem's files and apps from a Windows VSCode installation. It should be automatically recommended if you have WSL installed, and once set up, you can open a WSL folder in VSCode by using the
code command. Read here for more details.
▶️ Running your code
There are many ways to test JS code. For simple syntax checking, the easiest way is often via the developer tools in your browser or by running the
node command on its own in your terminal, which gives you a Node-based JS REPL (type
Ctrl + D to exit).
To test a JS file, navigate in your terminal to the directory where the file is located (if you're not sure how to do this, find an intro guide on how to using your terminal online). From there, you can run
node <file-name>. Any
console.log statement executed in your file will print out to the console of your terminal. This is also a good way to check for syntax errors. It can also be useful to make a new file specifically for testing functions in another file. In the test file, you can
require the primary file and call functions there.
For testing TypeScript code, you will need some tool to transpile your scripts to JS before running them. For this we recommend the library ts-node, which essentially acts just like Node, but attempts to transpile any TypeScript in files you run. You can install it globally by running
npm i -g ts-node, but we recommend installing it as a
devDependency in your projects as well.
💅 Linters and formatters
.eslintrc.json file which specifies a configuration for ESLint, the most widely-used JS linter, to meet our preferred style guide for the course.
We recommend installing the ESLint extension for your code editor of choice. Said extensions will highlight issues with your code as you type so you can easily resolve them, much like a spell checker in Microsoft Word. You can also check for linter errors from your terminal via the
eslint npm package found here. This is what we run when you submit your assignment.
Both ESLint and Prettier can be installed globally using
npm i -g <package-name>, however we don't recommend this. Instead, install the
eslint packages as
devDependencies in any npm project you are working on, and configure your editor to use these versions found in
While linters are useful for finding problems, they typically don't deal with code formatting and visual style. Formatters instead focus on whitespace, newline placement, and other issues that impact the readability of code. We recommend Prettier, which can handle many languages including JS and TS. Similar to ESLint, Prettier uses a
.prettierrc.json file for configuration.
We recommend using ESLint and Prettier together. The
eslint-config-prettier package (included in our provided configuration) will disable any ESlint rules which conflict or are redundant with Prettier.
In VSCode, you can use the Prettier and ESLint plugins at the same time. We recommend enabling the "Format on save" setting, and making Prettier the editor's default formatter for maximum convenience.
⚙️ Installing ESLint + Prettier
You will need to install these dependencies per-project. Most of our assignments will already contain both ESLint and Prettier configurations, but if you are scaffolding your own project, this is the way to go. Make sure you have an existing
- Install ESLint, Prettier, and our config's dependencies into your project by running:
npm install -D eslint prettier eslint-config-airbnb eslint-config-airbnb-typescript \ eslint-config-prettier eslint-plugin-unicorn npx install-peerdeps -D eslint-config-airbnb npx install-peerdeps -D eslint-config-airbnb-typescript
- Create a file called
.eslintrc.jsonat the root directory. Copy and paste the contents of this file.
- Create a file called
.prettierrc.jsonalso at the root directory. Copy and paste this file.
- Make sure you have both the ESLint and Prettier extensions installed in your editor of choice.
- Your editor should pick up the configurations (probably after a restart) and start giving you error messages and formatting options. Again, we recommend enabling "format on save" in your editor of choice.