💻 Development

There are many ways to write JavaScript, and JavaScript is used for many different purposes, from mobile apps to command line scripts, and of course in the browser. This is a guide for how you can get started writing JS in an environment that will suit you well for this course and future projects you take on in JS.

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!

If you're on MacOS, make sure to have the XCode Command Line Tools installed. You can do this by running:

xcode-select --install

⚙️ Installing node

JavaScript was originally written to bring dynamic content to HTML and CSS websites, and for a long time only ran in browsers. Node (Node.js) is a JS runtime that operates anywhere and everywhere, not just in the browser. Node Package Manager (npm) is the system that Node uses for installing dependencies (packages) for a project, letting you take advantage of frameworks, functions, and tools that other people have written.

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:

node -v

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 18.16.1.

📝 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).

For most of our assignments, we'll have scripts already set up in each project's package.json file, allowing you to run npm run <script> to execute the intended JS file or package.

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

A linter is a tool for checking that your JavaScript code both does not have syntax errors and is properly styled. In your homework assignments, you can see a .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 prettier and eslint packages as devDependencies in any npm project you are working on, and configure your editor to use these versions found in node_modules.

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 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 package.json.

npm install -D eslint@latest prettier@latest @cis-1962/eslint-config@latest