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"
}
}
Configuring Text Editor After installation under Preferences open the Packages tab, find the linter-eslint plugin and click on the Settings button. Search for Lint HTML Files option and make sure it's marked as checked. This will enable linting in the . vue files.
ESLint editor integrations are useful to check your code in real-time. Status of Vue.js 3.x supports. This plugin supports the basic syntax of Vue. js 3.2, <script setup> , and CSS variable injection, but the ref sugar, an experimental feature of Vue. js 3.2, is not yet supported.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With