$conf, $runtime; function_exists('chdir') AND chdir(APP_PATH); $r = 'mysql' == $conf['cache']['type'] ? website_set('runtime', $runtime) : cache_set('runtime', $runtime); } function runtime_truncate() { global $conf; 'mysql' == $conf['cache']['type'] ? website_set('runtime', '') : cache_delete('runtime'); } register_shutdown_function('runtime_save'); ?>javascript - Why is linter not linting over the template in vue js? - Stack Overflow|Programmer puzzle solving

Programmer puzzle solving

    最新消息：Welcome to the puzzle paradise for programmers! Here, a well-designed puzzle awaits you. From code logic puzzles to algorithmic challenges, each level is closely centered on the programmer's expertise and skills. Whether you're a novice programmer or an experienced tech guru, you'll find your own challenges on this site. In the process of solving puzzles, you can not only exercise your thinking skills, but also deepen your understanding and application of programming knowledge. Come to start this puzzle journey full of wisdom and challenges, with many programmers to compete with each other and show your programming wisdom! Translated with DeepL.com (free version)
    你的位置： HOME>matter>javascript - Why is linter not linting over the template in vue js? - Stack Overflow

    javascript - Why is linter not linting over the template in vue js? - Stack Overflow

    matteradmin12PV0评论

    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-piler": "^2.5.21",
    "vuetify-loader": "^1.0.5"
  }
}

    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-piler": "^2.5.21",
    "vuetify-loader": "^1.0.5"
  }
}
    • javascript
    • vue.js
    • eslint
    • lint
    • tooling
    Share Improve this question edited Oct 23, 2019 at 9:40 kyle 6891 gold badge7 silver badges17 bronze badges asked Apr 12, 2019 at 8:30 DominikDominik 4371 gold badge4 silver badges18 bronze badges 2
    • Can you show your webpack config and how you launch the lint ? – Jérôme Commented Apr 12, 2019 at 9:42
    • I don't have access to the webpack config, as I created the project through the vue cli. I start the linter with yarn lint – Dominik Commented Apr 12, 2019 at 16:02
    Add a ment  | 

    4 Answers 4

    Reset to default 1

    The eslint default mand lint only JS files

    Try to change your lint mand 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

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

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

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

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

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

    Articles related to this article

    Post a comment

    comment list (0)

    1. No comments so far