How to configure eslint and prettier with nuxt 3? - vue.js

Question

I have installed these dependencies
Package.json:
{
"devDependencies": {
"#intlify/nuxt3": "^0.1.6",
"#nuxtjs/eslint-config": "^7.0.0",
"#nuxtjs/eslint-module": "^3.0.2",
"eslint": "^8.1.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-nuxt": "^3.0.0",
"eslint-plugin-vue": "^7.20.0",
"nuxt3": "latest",
"prettier": "2.4.1",
"sass": "^1.43.3",
"vite-plugin-eslint": "^1.3.0"
}
}
At .eslintrc.js
extends: [
'eslint:recommended',
'plugin:nuxt/recommended',
'prettier'
],
At nuxt.config.ts
import eslintPlugin from 'vite-plugin-eslint';
export default defineNuxtConfig({
...
vite: {
plugins: [eslintPlugin()]
},
buildModules: ['#intlify/nuxt3', '#nuxtjs/eslint-module',],
})
And none of these options are working with nuxt 3.

Answer 1

A simple ESLint + Prettier + TypeScript + Nuxt 3 (or Bridge) setup would look like this:
yarn add --dev eslint prettier eslint-config-prettier eslint-plugin-prettier #nuxtjs/eslint-config-typescript
.eslintrc.js
module.exports = {
root: true,
extends: ['#nuxtjs/eslint-config-typescript', 'plugin:prettier/recommended'],
}
package.json
{
"scripts": {
"lint": "eslint --ext .ts,.js,.vue ."
}
}

Answer 2

Here's a config i found here : https://github.com/nuxt/framework/discussions/2815#discussioncomment-2050408
// .eslintrc.json
{
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:vue/vue3-recommended",
"plugin:#typescript-eslint/recommended",
"#nuxtjs/eslint-config-typescript"
],
"parserOptions": {
"ecmaVersion": "latest",
"parser": "#typescript-eslint/parser",
"sourceType": "module"
},
"plugins": [
"vue",
"#typescript-eslint"
],
"rules": {}
}
If you really want to use prettier (imo eslint already does the job, using both can be very annoying to configure) you could add eslint-plugin-prettier library, then add "plugin:prettier/recommended" to eslint extends.
Idk what IDE you're using but if it's vscode, I advise you to use the linting on save instead of relying on formatters (Volar, prettier, eslint-prettier).
Mostly because it forces all devs to have the same format and rules