I am using airbnb eslint and currently I am getting error:
error: Line 6 exceeds the maximum line length of 100 (max-len) at path/to/file.vue:6:1:
<template lang="pug">
div
.container
.row
.col-xl-10.mx-auto
p Please let us know how you got here, and use the header buttons to navigate back to safe harbor.
</template>
Is there a way to disable lint for paragraph text like above?
Also, how to increase the line length from 100 to 120?
There has been some updates to eslint-plugin-vue in the past 4 years. The comments in templates can now be used to override eslint settings.
<!-- eslint-disable-next-line max-len -->
<my-reasonably-long-component>...</my-reasonably-long-component>
<!-- eslint-disable max-len -->
<my-reasonably-long-component>
...
</my-reasonably-long-component>
<!-- eslint-enable max-len -->
In addition, as of eslint-plugin-vue v6.1.0 the vue/max-len rule was added, which ads more control about how the length rules
{
"vue/max-len": ["error", {
"code": 80,
"template": 80,
"tabWidth": 2,
"comments": 80,
"ignorePattern": "",
"ignoreComments": false,
"ignoreTrailingComments": false,
"ignoreUrls": false,
"ignoreStrings": false,
"ignoreTemplateLiterals": false,
"ignoreRegExpLiterals": false,
"ignoreHTMLAttributeValues": false,
"ignoreHTMLTextContents": false,
}]
}
If you have more than a couple outliers, tweaking the globals for templates-specifically might work better.
AFAIK, there is no way to apply eslint rules to the template, and specifically to one line in a template. I hope to be proven wrong though.
anyway, because I have a file with lots of text, to get around it, I've added this rule 'max-len': ["error", { "code": 120 }], in my .eslintrc.js file.
here is the structure (with other settings removed)
module.exports {
rules: {
'max-len': ["error", { "code": 120 }]
}
}
This will disable the rule for the entire template tag. Official ES Lint docs on disabling rules
<template>
<!-- eslint-disable max-len -->
...
EDIT: If you want to instead disable line length rule for all .vue files, then add this to .eslintrc.js (this will also disable the rule for <script> and <style> tags):
module.exports = {
...
overrides: [
{
files: ["*.vue"],
rules: {
...
'max-len': 'off' // disables line length check
}
}
]
};
For eslint-plugin-vue >= 4.1.0 you can use directive comments to disable eslint.
https://github.com/vuejs/eslint-plugin-vue/commit/ad84e0ba6d81f24583e65fc70b1d9803d73d3ed9
<template>
<!-- eslint-disable-next-line vue/max-attributes-per-line -->
<div a="1" b="2" c="3" d="4">
</div>
</template>
You can disable max-len and use vue/max-len with something like "template": 9000. An example:
"overrides": [
{
"files": [
"*.vue"
],
"rules": {
"max-len": "off",
"vue/max-len": [
"error",
{
"code": 120,
"template": 9000,
"ignoreTemplateLiterals": true,
"ignoreUrls": true,
"ignoreStrings": true
}
]
}
}
]
This way you disable the rule only for the <template></template> part of a component.
the correct eslint config is this:
rules: {
'prettier/prettier': ['error', { printWidth: 120 }],
},
I am using Vue3, the structure has been changed, .eslintrc.js is being merged into package.json so that methods mentioned before is not work for me.
First.
This is the way it works to me
Commented the line in .editorconfig
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
# max_line_length = 100
Seconds.
Add the line in eslintConfig object in package.json
"rules": {
"max-len": ["error", 120]
},
what was missing for me is the location of configuration file. in my angular project it is .eslintrc.js
and the part of the configuration code looks like this:
rules: {
"quotes": ["error", "double"],
"import/no-unresolved": 0,
"max-len": ["error", {"code": 120}],
},
