JavaScript · Intermediate level

Intermediate level · Module 5: Debugging and Code Quality in JavaScript · Lesson 2 of 3

Linting and Formatting

Use npm to add ESLint and Prettier to a project, so common mistakes are caught and code style is consistent.

In this lesson you will

  • Create package.json and install development tools with npm
  • Configure and run ESLint and Prettier

Key concepts

npm and package.jsondevDependenciesESLint rulesPrettier

The lesson

npm installs JavaScript tools and libraries. npm init creates package.json, which lists a project's dependencies and scripts. Tools used only during development are installed as devDependencies.

ESLint analyses code for likely bugs, such as unused variables, undeclared names and == comparisons. Prettier formats code automatically so style is never a matter of debate in reviews.

Add scripts such as "lint": "eslint ." and "format": "prettier --write ." to package.json and run them before every commit. Editor integration shows problems as you type.

Step by step

  1. Run npm init in the project.
  2. Install ESLint and Prettier as dev dependencies.
  3. Configure them and add lint and format scripts.
  4. Fix every lint error in the project.

Practice activity

Set up linting and formatting for your budget app and reach zero lint errors.

Expected result: npm run lint reports no errors and the code is consistently formatted.

Check your understanding

  1. What is the difference between ESLint and Prettier?

    Show answer

    ESLint finds likely bugs and bad patterns; Prettier only formats code.

  2. Where are a project's npm scripts defined?

    Show answer

    In the scripts section of package.json.

Taught live by an instructor — online or in person. Free course lessons are for self-study and do not lead to a certificate — see registration options.