Introduction
In this tutorial, we'll introduce ESLint and Prettier into your Nuxt 3 project for automatic code style formatting.
This process is colloquially known as linting.
Benefits
There are several benefits to using a linter, including:
- Consistency: Objectively enforce a style across your code.
- Convenience: No need to manually format your code to match this style.
- Code quality: Catch potential problems in your code related to style guide violations before runtime.
ESLint and Prettier
ESLint is a tool that checks code for potential problems with the goal of enforcing a certain style.
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 @nuxt/eslint-config
# Prettier
yarn add --dev prettier eslint-plugin-prettier eslint-config-prettier
# TypeScript
yarn add --dev typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin
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: ["@nuxt/eslint-config", "plugin:prettier/recommended"],
// ...
};
Note: parser
is used within the <template>
of .vue files, and parserOptions.parser
is used to parse <script>
tags. These 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: ["@nuxt/eslint-config", "plugin:prettier/recommended"],
plugins: [],
rules: {},
};
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",
// ...
}
// ...
}
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.
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.
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.
Finally, copy your .gitignore
into .prettierignore
:
// .prettierignore
# Nuxt dev/build outputs
.output
.data
.nuxt
.nitro
.cache
dist
# Node dependencies
node_modules
# Logs
logs
*.log
# Misc
.DS_Store
.fleet
.idea
# Local env files
.env
.env.*
!.env.example
All done!
Hopefully, you can now avoid the nitpicking arguments 😉
Hey, guys! Thank you for reading.
Keep up to date with me:
- Website: https://lloyd.cx/
- Twitter: https://x.com/lloydtao/
- GitHub: https://github.com/lloydtao/
- LinkedIn: https://www.linkedin.com/in/lloydtao/
Latest comments (13)
Better way to use ESLint with Nuxt 3 is use to @nuxt/eslint.
Pro tip: use with @antfu/eslint-config
how can we use vscode setting to format on save with linting?
Hello! Check your VSCode settings to make sure that
Editor: Format On Save
is enabled and thatEditor: Default Formatter
is set correctly (e.g., I usehttps://github.com/prettier/prettier-vscode
)I get the following error:
Hi, Lewis.
I have several questions for you regarding the installation of the prettier + eslint:
eslint-config-prettier
- this plugin is for turning off all rules that are unnecessary or might conflict with Prettier(on docs) and another iseslint-plugin-prettier
.eslint-plugin-prettier
have disadvantages like leaving linter errors (docs).Hey!
eslint-plugin-prettier
recommends to useeslint-config-prettier
to disable all formatting-related ESLint rules: github.com/prettier/eslint-plugin-...@nuxtjs/eslint-config-typescript
is the package name referenced in the officialnuxt/eslint-config
repository: github.com/nuxt/eslint-config#type...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
Hey Lewis! could you add runtime linting settings to your wonderful article please?
Thanks for this Lewis 🙏🏾🙌🏾
However, the article didn't mention this but you need to install
@nuxtjs/eslint-config-typescript
Well spotted! I'll drop it in. Thank you for the snippet.
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.
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.You can extend
@nuxtjs
if you'd like to, which ESLint will assume to be the/eslint-config
prefix.Oh damn, it's baked in? I didn't expect that one. Good to know. 👍🏻