Exercise: Game Night Project Setup

Every Saturday, four friends play game night, and one of them wrote a small program to keep score. It works: it adds up every round and names a winner. But it's messy. The quotes don't match, the indents wander, and a reviewer would flag a few lines right away. In this exercise you set the project up the way a professional team would, with npm scripts, ESLint, Prettier and a .gitignore, and clean the code up without changing what it does. Tests check every step.

Get the exercise code

In the Exercise box beside the lesson, choose Get the starter on GitHub to open its GitHub repository, exercise-javascript-game-night-project-setup. Click Code, then Download ZIP, and unzip it. Or clone it with Git. Then open the folder in VS Code.

The folder holds:

• scores.js: the scoreboard's functions (totalFor, standings, roundWinner and winner) and the night's four rounds. It works, but ESLint will find problems in it. You fix them.
• main.js: prints the scoreboard. It works, but it needs formatting.
• package.json and .gitignore: you finish both.
• scores.test.js: checks that the scoreboard still works. It passes now, and it must still pass at the end.
• setup.test.js: checks your setup, one step at a time. You don't need to change either test file.

What to do

Here's package.json as it comes. It names the project and makes its files modules, and that's all:

{
  "name": "game-night-scoreboard",
  "version": "1.0.0",
  "description": "A scoreboard for game night: the players, the rounds and the winner.",
  "private": true,
  "type": "module"
}

The README in the folder has every step in detail. In short:

1. Tell Git to ignore node_modules, in .gitignore.
2. Install ESLint, @eslint/js, globals and Prettier as devDependencies, at the exact versions the README gives, with one npm install command.
3. Add four npm scripts: test (node --test), lint (eslint .), format (prettier --write .) and format:check (prettier --check .).
4. Make eslint.config.js, with ESLint's recommended rules, the globals for Node, and the rules eqeqeq and prefer-const set to "error".
5. Fix every problem ESLint reports, in the code itself.
6. Format every file with Prettier.

Check your work

In VS Code's terminal, in the project folder:

node --test

At first the 5 scoreboard tests pass and the 6 setup tests fail. That's expected: each step you finish turns a setup test green. A failing test's message says what's missing, for example Add the script "lint": "eslint .", or Run npm install first.

Once your scripts are in, npm test runs the same tests, and npm run lint and npm run format:check show you exactly what ESLint and Prettier still want.

Hints

• Start with the README's install command. Copy it whole: it installs all four tools at once, with --save-dev and --save-exact.
• Your config is close to the lesson's. Clean Code with ESLint and Prettier shows a complete eslint.config.js for a web page. This project runs in Node, and it has no dist folder to skip.
• Read each ESLint line from right to left. The rule's name at the end says what kind of fix it wants. Clean Code with ESLint and Prettier has a table of the three you'll meet.
• Fix, don't silence. A rule switched off or an eslint-disable comment makes the warning go away, but the mistake stays, and the tests check for both.
• JSON is strict. If a script won't run, look in package.json for a missing comma between scripts, or a comma after the last one.

When you're done

Every test is green:

ℹ tests 11
ℹ suites 0
ℹ pass 11
ℹ fail 0

npm run format:check ends with All matched files use Prettier code style!, npm run lint prints no problems, and node main.js prints the same scoreboard it printed before you started:

Game Night Scoreboard

Trivia: won by Maya
Charades: won by Jordan
Word Scramble: won by Priya
Card Race: won by Jordan

1. Jordan: 27 points
2. Maya: 26 points
3. Leo: 26 points
4. Priya: 25 points

Winner: Jordan

Look back at the three kinds of problem ESLint found. Which of them could have caused a real bug one day, and which only made the code harder to read?

So what

This is the setup a team expects before it reads a line of your code. Every project you start from here on can begin the same way: package.json, a .gitignore, ESLint, Prettier and a test script.

Key terms

• npm scripts
• Development Dependency
• node_modules
• Linter
• ESLint
• Prettier

Related

• npm and Packages
• Clean Code with ESLint and Prettier