Setting Up
There are many ways to set up your JavaScript environment, with different advantages and disadvantages. This guide will help you get fully setup to start coding in JavaScript.
Local development
This is the most flexible option as you can use any IDE you want and does not rely on an internet connection. This should be done on your personal computer and not on a school computer. To use this option you will need to install a code editor, you can use any editor you would like, but we recommend Visual Studio Code.
It is highly recommended that you install Node.js and npm. Node.js is an environment which can run JavaScript for different projects you can build, projects like a website! And npm
is the package manager for the JavaScript library. A library is something which helps you code complicated programs by using other peoples’ code.
You can download this from the Node.js website.
Installing Node.js
There are multiple ways to install Node.js, but the easiest way is to download the latest version from the Node website. Once you have downloaded the installer, you can run it and follow the instructions to install Node.js.
You can also install Node using a package manager for a more advanced setup. If you are using macOS, you can use Homebrew to install Node. If you are using Linux, you can use your package manager to install Node. If you are using Windows, you can use Chocolatey to install Node.
Once you have installed Node, you can check that it has installed correctly by running the following commands:
You should get an output similar to the following:
Setting up a project
To set up a project, you will need to create a new folder for your project. You can then open this folder in your code editor.
In the directory of your project folder (either in the terminal app or VS Code terminal), you will need to create a package.json
file.
This is the virtual environment for your project. You can do this by running the following command:
The file provides the node package manager (npm) with various information to help identify the project and handles your requests via the terminal.
If you want to, you can change the files’ description
and author
to your project’s description and your name!
You can then install libraries using the node package manager.
Adding libraries
You can add libraries to your project by running the following command:
Next steps
Using Node Package Manager (npm)
Useful libraries
There are several libraries that are useful when programming in JavaScript and can help with either style/formatting, type checking or the general structure of your code.
Style and formatting
These libraries help with formatting and style of your code, they can be used to automatically format your code to a standard style and can also be used to check your code for style errors. They should be added to your style dependencies using the below commands.
You can add them by running the following commands separately:
Once you have done this, you will see that you now have three files: node_modules
, package-lock.json
and package.json
.
If you are in a terminal, you can see your current files by running this command: ls
.
Next, to have both the Prettier and ESLint libraries to run together and not cause problems, you will have to change a few things.
- In your terminal, run the command
npx eslint --init
- This will ask you some questions, and you can decide on how you want to answer them, depending on your project.
- These answers would typically be the default:
- How would you like to use ESLint?
> To check syntax and find problems
- What type of modules does your project use?
> JavaScript modules (import/export)
- Which framework does your project use?
> None of these
- Does your project use TypeScript?
> No
- Where does your code run? Type
a
on keyboard to select both Node and browser. - What format do you want your config file to be in?
> JavaScript
This will then create an .eslintrc.js file in your project. Inside this file, edit it inside your code editor by inserting this code:
Nearly done! Now, you will need to create your index.js
file (inside your code editor), which will be your main file with all your own code.
Then you will need to actually use your formatting libraries that you have installed. Because when you run Prettier/ESLint on a directory or a specific set of files, it formats the existing files at that point in time.
Using Prettier Formatter
Prettier is a JavaScript formatter that will automatically format your code to a standard style. You can run Prettier by running the following command:
The .
represents your current folder that you are in, so this command applies Prettier to all your project files.
Using ESLint
ESLint is a JavaScript linter that will check your code for style errors. You can run ESLint by running the following command:
Type checking - Optional
As most popular code editors, such as Visual Studio Code, have built-in type checking support (known as TypeScript) and can show errors as you write code, you wouldn’t have to download anything.
If you do want to add a library for type checking, the most popular one to check out would be TypeScript.
- TypeScript
- Learn more at w3schools
You can add this by running the following command:
You can then run the TypeScript compiler using the following command:
Running Your Project
Once you have written in your index file, and you are happy with it, you will need to run it.
If you want immediate feedback and have a small project, I would recommend doing one of these three options:
Click on the extensions tab to the left on VS Code. Search up ‘Live Server’ and install the one which looks like this:
You should now be able to see a little button down the right-hand corner of VS Code, which says ‘Go Live’.
If you have a working project, you should be able to click this button and see your code on your default browser!
This is only if the plugin somehow doesn’t work, or if you want to see how things work behind the scenes in the Live Server plugin.
Make your own local server through your terminal here.
This is only recommended if all else fails: as this functionality won’t work in later projects.
The way you do this would be to find your index.html
file on your computer and double click it to open it up in your web browser.
Your done!
This way is recommended for when you’re ready to deploy your web application to a production environment.
Go into your package.json
file and insert into the scripts
the build
line like so:
Then you can run your project through this command: