Linting setup in nuxt.js

Linting is still like a dark magic to me. And I seem to always get stuck in a loop of linting conflicts when using "yarn create nuxt-app" and choosing ESLint as my linter.

The problem seemed to be Prettier and ESLint not agreeing on what is valid markup for vue files. After much searching I seem to have solved my problems so below is my used settings, for future reference and others with the same problems.

This setup is based on the one used at my workplace, adapted to my projects. So the settings may or may not apply to your setup. I like the code I look at to have the same style wherever I am.

buildModules: [ '@nuxtjs/eslint-module', ],

Nothing special in nuxt.config.

module.exports = { root: true, env: { browser: true, node: true, }, parserOptions: { parser: 'babel-eslint', }, extends: [ 'eslint:recommended', 'plugin:vue/recommended', 'prettier/vue', // the real fix 'plugin:prettier/recommended', ], plugins: ['vue'], globals: { $nuxt: true, }, rules: { 'prefer-destructuring': ['warn', { object: true, array: false }], 'no-unused-vars': ['warn'], 'vue/no-v-html': 0, 'vue/require-default-prop': 0, 'vue/html-indent': [ 'error', 'tab', { alignAttributesVertically: true }, ], 'vue/max-attributes-per-line': [ 'error', { singleline: 20, multiline: { max: 1, allowFirstLine: false, }, }, ], 'vue/html-self-closing': [ 'error', { html: { void: 'always', normal: 'never', component: 'any', }, }, ], }, };

Added 'prettier/vue' in extends. The rest of the rules should have nothing to do with it.

module.exports = { trailingComma: "es5", tabWidth: 4, useTabs: true, semi: true, singleQuote: true, htmlWhitespaceSensitivity: "css", };

My preferred config.

{ "editor.formatOnSave": false, "vetur.validation.template": false, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "editor.detectIndentation": false, "editor.insertSpaces": false, "editor.defaultFormatter": "octref.vetur", }

vs code settings.

"devDependencies": { "@nuxtjs/eslint-config": "^3.1.0", "@nuxtjs/eslint-module": "^2.0.0", "babel-core": "7.0.0-bridge.0", "babel-eslint": "^10.1.0", "eslint": "^7.10.0", "eslint-config-prettier": "^4.1.0", "eslint-plugin-nuxt": "^1.0.0", "eslint-plugin-prettier": "^3.2.0", "prettier": "^2.2.1", }

Pretty sure that this could be cleaned up a bit.