Skip to content
Search

DEV Community

Cover image for Adding ESLint and Prettier to Nuxt 3 ✨ (2023)
Lewis Lloyd
Lewis Lloyd

Posted on • Updated on

 

Adding ESLint and Prettier to Nuxt 3 ✨ (2023)

#nuxt #nuxt3 #eslint #prettier

Introduction

In this post, we'll introduce ESLint and Prettier for automatic code style formatting in your Nuxt 3 project.

Linting

There are several benefits to using a linter, including:

  • Consistency: Automatically enforce a certain style. Especially useful for avoiding nitpicking arguments in code reviews.
  • Time-saving: No need to manually format your code.
  • Code quality: Catch potential problems in your code, such as syntax errors and coding style violations.

ESLint and Prettier

ESLint checks code for potential problems and helps to enforce a certain style. It can catch syntax errors, as well as problems related to coding style, such as inconsistent use of whitespace or naming conventions. Prettier is a code formatter that automatically formats code.

By using them together, we can enforce a certain coding style and then automatically format code to match these constraints.

Installation

Packages

Install the following dependencies:

# ESLint
yarn add --dev eslint

# Prettier
yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier

# TypeScript support
yarn add --dev typescript @typescript-eslint/parser @nuxtjs/eslint-config-typescript
Enter fullscreen mode Exit fullscreen mode

Configuration

Add the following rules to your ESLint configuration (.eslintrc.cjs):

// .eslintrc.cjs

module.exports = {
  // ...
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
  },
  extends: ['@nuxtjs/eslint-config-typescript', 'plugin:prettier/recommended'],
  // ...
}
Enter fullscreen mode Exit fullscreen mode

Note: parser and parserOptions.parser are separate and intentionally different.

A complete .eslintrc.cjs file may look like this:

// .eslintrc.cjs

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
  },
  extends: ['@nuxtjs/eslint-config-typescript', 'plugin:prettier/recommended'],
  plugins: [],
  rules: {},
}
Enter fullscreen mode Exit fullscreen mode

Scripts

Add the following scripts to your project:

// package.json

{
  // ...
  "scripts": {
    // ...
    "lint:js": "eslint --ext \".ts,.vue\" --ignore-path .gitignore .",
    "lint:prettier": "prettier --check .",
    "lint": "yarn lint:js && yarn lint:prettier",
    "lintfix": "prettier --write --list-different . && yarn lint:js --fix"
    // ...
  }
  // ...
}
Enter fullscreen mode Exit fullscreen mode

Usage

To check for errors, use yarn lint. This won't effect any changes, and may be useful in a code review or CI pipeline.

$ yarn lint

>>> yarn run v1.22.5
>>> $ yarn lint:js && yarn lint:prettier
>>> $ eslint --ext ".ts,.vue" --ignore-path .gitignore .
>>>   2:3  error  Delete `··`                prettier/prettier
>>>   3:1  error  Replace `··})` with `});`  prettier/prettier
>>>   4:1  error  Delete `··`                prettier/prettier
>>>
>>> ✖ 3 problems (3 errors, 0 warnings)
>>>   3 errors and 0 warnings potentially fixable with the `--fix` option.
>>>
>>> error Command failed with exit code 1.
Enter fullscreen mode Exit fullscreen mode

To fix errors, use yarn lintfix. This will save any formatting changes.

$ yarn lintfix

>>> yarn run v1.22.5
>>> $ prettier --write --list-different . && yarn lint:js --fix
>>> nuxt.config.ts
>>> $ eslint --ext ".ts,.vue" --ignore-path .gitignore . --fix
>>> Done in 4.33s.
Enter fullscreen mode Exit fullscreen mode

After using yarn lintfix, yarn lint should return successfully.

$ yarn lint

>>> yarn run v1.22.5
>>> $ yarn lint:js && yarn lint:prettier
>>> $ eslint --ext ".ts,.vue" --ignore-path .gitignore .
>>> $ prettier --check .
>>> Checking formatting...
>>> All matched files use Prettier code style!
>>> Done in 4.94s.
Enter fullscreen mode Exit fullscreen mode

Finally, copy your .gitignore into .prettierignore:

// .prettierignore

node_modules
*.log*
.nuxt
.nitro
.cache
.output
.env
dist
Enter fullscreen mode Exit fullscreen mode

All done!

You can hopefully now avoid the nitpicking arguments 😉

Hey, guys! Thank you for reading. I hope that you enjoyed this.

Keep up to date with me:

Top comments (7)

Collapse
 
kissu profile image
Konstantin BIFERT •

Thanks for the article Lewis. 🙏🏻

So, you're not extending the ESlint configuration with @nuxtjs as in here? That one is an old configuration that I used for a Nuxt2 project but I feel like a Vue linter is still needed.

A Vue3 or a Nuxt3 one would be even better to follow the latest rules with Composition API, accomodate Vue3 changes etc but I didn't took the time to find an exact configuration there (this one from Antfu is probably the closest best AFAIK).
Still, I feel like getting errors related to Prettier and mainly Vue is quite important.

I myself quite also enjoy having it on autosave as explained here with an Errorlens so that I can have various errors/warnings just next to my codebase while writing. Quite nazi for sure 😹 but it's great to not shift windows/context.

Collapse
 
tao profile image
Lewis Lloyd •

Hey! 😸 Thanks for your comment.

The example extends @nuxtjs/eslint-config-typescript, which is recommended by the docs (github.com/nuxt/eslint-config#type...) for TypeScript support.

Just to prove it, here's Vue being annoyed for not using the v-bind: shorthand.

Screenshot of v-bind shorthand warning in console

You can extend @nuxtjs if you'd like to, which ESLint will assume to be the /eslint-config prefix.

Collapse
 
kissu profile image
Konstantin BIFERT •

Oh damn, it's baked in? I didn't expect that one. Good to know. 👍🏻

Collapse
 
ayodejipy profile image
Jegede Ayodeji O •

Thanks for this Lewis 🙏🏾🙌🏾

However, the article didn't mention this but you need to install @nuxtjs/eslint-config-typescript

# npm
npm i -D @nuxtjs/eslint-config-typescript
# yarn
yarn add --dev @nuxtjs/eslint-config-typescript
Enter fullscreen mode Exit fullscreen mode
Collapse
 
tao profile image
Lewis Lloyd •

Well spotted! I'll drop it in. Thank you for the snippet.

Collapse
 
serdarde profile image
Serdar •

Thanks for this beautiful article. I had a problem and solved it after removing typescript version 5. I think this can help to other developers too.

As you know, TS5 was released last week, and it shows “TS1109 expression expected” error for the imports statements in the VUE files. Actually, you don't need to add typescript, as it is already existing in the current Nuxt project. We can stay with the TS4 for now.

Happy coding

Collapse
 
shmidtalex profile image
Alexander •

Hey Lewis! could you add runtime linting settings to your wonderful article please?

DEV Community

Timeless DEV post...

Git Concepts I Wish I Knew Years Ago

The most used technology by developers is not Javascript.

It's not Python or HTML.

It hardly even gets mentioned in interviews or listed as a pre-requisite for jobs.

I'm talking about Git and version control of course.

One does not simply learn git

Read next

adetutu777 profile image

Integrating Nuxt.js into Your Next Vue.js Project: A Guide

Adetutu Gbangbola -

siumhossain profile image

How to detect scroll up and scroll down in Nuxt/Vue

sium_hossain -

nklsw profile image

How to create a dockerized Nuxt 3 development environment

Niklas -

ocasoprotal profile image

eslint rule to check for bogus routes

OcasoProtal -