CODEWITHSUNDEEP
javascriptvue.jseslintlinttooling
Dominik
Dominik

Reputation: 437

Why is linter not linting over the template in vue js?

I cannot get the linter to lint the template part of my .vue files. Do you have any input on what I need to change in my configurations?

Overall, I would like the linter to adjust something like this:

<template>
  <v-container>
              <h1>Home</h1>
  </v-container>
</template>

To this:

<template>
  <v-container>
    <h1>Home</h1>
  </v-container>
</template>

Here are my configurations:

// .eslintrc
module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

and the dependencies:

// package.json
{
  "name": "mobile.zmittag",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'",
    "postinstall": "npm run build",
    "start": "node server.js",
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
    "auth0-js": "^9.10.1",
    "axios": "^0.18.0",
    "connect-history-api-fallback": "^1.6.0",
    "core-js": "^2.6.5",
    "express": "^4.16.4",
    "register-service-worker": "^1.6.2",
    "serve-static": "^1.13.2",
    "vue": "^2.6.6",
    "vue-i18n": "^8.0.0",
    "vue-router": "^3.0.1",
    "vuetify": "^1.5.5",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@kazupon/vue-i18n-loader": "^0.3.0",
    "@vue/cli-plugin-babel": "^3.5.0",
    "@vue/cli-plugin-eslint": "^3.5.1",
    "@vue/cli-plugin-pwa": "^3.5.0",
    "@vue/cli-plugin-unit-jest": "^3.5.0",
    "@vue/cli-service": "^3.5.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "fibers": "^3.1.1",
    "sass": "^1.17.2",
    "sass-loader": "^7.1.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "vue-cli-plugin-i18n": "^0.6.0",
    "vue-cli-plugin-vuetify": "^0.5.0",
    "vue-template-compiler": "^2.5.21",
    "vuetify-loader": "^1.0.5"
  }
}

Upvotes: 6

Views: 4671

Answers (4)

Furqan Yousuf
Furqan Yousuf

Reputation: 41

Bit late ... I was facing the same thing and noticed "'plugin:vue/vue3-essential'" in the config. Changing it to "'plugin:vue/vue3-recommended'" started linting the template part as well.

extends:{
  'plugin:vue/vue3-recommended',
  '@vue/standard'
}

https://eslint.vuejs.org/user-guide/#bundle-configurations

Upvotes: 0

MartinT
MartinT

Reputation: 644

The problem is you need a custom vue/eslint plugin. Checkout the docs for more info and available rules as well.

Upvotes: 0

Priya
Priya

Reputation: 98

If you are using vscode editor then you just need to press ctrl+shift+i and see the result as you want.

Upvotes: 0

J&#233;r&#244;me
J&#233;r&#244;me

Reputation: 2056

The eslint default command lint only JS files

Try to change your lint command inside your package.json

From "lint": "vue-cli-service lint" to "lint": "vue-cli-service lint --ext .js,.vue"

This should allow eslint to lint your .vue files

Upvotes: 1

Related Questions