How to disable eslint rule max line length for paragraph in <template> of vue.js?
Javascriptvue.jsVuejs2EslintAirbnb Js-StyleguideJavascript Problem Overview
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?
Javascript Solutions
Solution 1 - Javascript
Update
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.
For next line only
<!-- eslint-disable-next-line max-len -->
<my-reasonably-long-component>...</my-reasonably-long-component>
For multi-line purpose
<!-- 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.
Original Answer
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 }]
}
}
Solution 2 - Javascript
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
}
}
]
};
Solution 3 - Javascript
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>
Solution 4 - Javascript
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.
Solution 5 - Javascript
You can add this to your ESLint rules:
rules: {
"vue/max-attributes-per-line": "off"
}
This worked for me (even if I rather set it on for my projects).
You can find more information here if you want.
Solution 6 - Javascript
the correct eslint config is this:
rules: {
'prettier/prettier': ['error', { printWidth: 120 }],
},
Solution 7 - Javascript
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]
},