potentially fixable with the `--fix` option
vue.jsEslintnuxt.jsvue.js Problem Overview
I am creating a app with nuxt.js but everytime I launch the app, gives me the error of eslint and saying "potentially fixable with the --fix
option."
I did the command npm run lint -- --fix
and it works but then If I do another change in any vue file it comes again the same error and I have to do it again
Any idea of how to fix that?
vue.js Solutions
Solution 1 - vue.js
Use the below configuration into nuxt config file:
build: {
extend(config, ctx) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/,
options: {
fix: true
}
})
}
}
Important part is:
options: {
fix: true
}
Solution 2 - vue.js
Extend the build in the nuxt.config.js
file
build: {
extend(config, ctx) {
config.module.rules.push({
enforce: "pre",
test: /\.(js|vue)$/,
loader: "eslint-loader",
exclude: /(node_modules)/,
options: {
fix: true
}
})
}
}
Solution 3 - vue.js
If you're using VScode, I recommend doing a full ESlint configuration in your project as I've explained here.
Having this ESlint extension and that in your settings.json
(accessible via Command Palette)
{
"editor.codeActionsOnSave": {
"source.fixAll": true, // this one will fix it on save for you
},
"eslint.options": {
"extensions": [
".html",
".js",
".vue",
".jsx",
]
},
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"html",
"vue",
],
}
On top of a simple .eslintrc.js
file like this
module.exports = {
root: true,
env: {
browser: true,
node: true,
},
parserOptions: {
parser: '@babel/eslint-parser',
requireConfigFile: false,
},
extends: ['@nuxtjs']
}
Followed by this in the settings UI, should give you a great DX.