January 2, 2023 · Nuxt 3
Getting started with ESLint and Prettier for automatic code style formatting.
In this post, we'll introduce ESLint and Prettier for automatic code style formatting in your Nuxt 3 project.
There are several benefits to using a linter, including:
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.
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
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'],
// ...
}
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: {},
}
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"
// ...
}
// ...
}
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
node_modules
*.log*
.nuxt
.nitro
.cache
.output
.env
dist
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: