vue.js 단락의 eslint 규칙 최대 행 길이를 해제하려면 어떻게 해야 합니까?에어비앤비 eslint를 사용하고 있는데 현재 오류가 발생하고 있습니다.
오류: 6 행이 path/to/file.vue: 6:
1에서 최대 행 길이 100(max-len)을 초과합니다.
<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>
위와
같은 패러그래프 텍스트의 보풀을 비활성화하는 방법이 있습니까?
또, 어떻게 하면 100에서 120으로 줄의 길이를 늘릴 수 있을까요?
갱신
지난 4년간 eslint-plugin-vue에 몇 가지 업데이트가 있었습니다.
이제 템플릿의 주석을 사용하여 eslint 설정을 재정의할 수 있습니다.
다음 줄에만 해당
복수회선용
eslint-plugin-vue의 v6.1.0은vue/max-len 규칙 추가되었다 게다가, 어떻게 길이를 규칙에 대해 더 많은 통제권을 홍보한다.
{
"vue/max-len":["오류",{
"코드":80,
"템플릿":80,
"tabWidth":2,
"논평":80,
"ignorePattern":"",
"ignoreComments":거짓,
"ignoreTrailingComments":거짓,
"ignoreUrls":거짓,
"ignoreStrings":거짓,
"ignoreTemplateLiterals":거짓,
"ignoreRegExpLiterals":거짓,
"무시하다.HTMLAttributeValues":거짓,
"무시하다.HTMLTextContents":거짓,
}]
}
특이치가 두 개 이상인 경우 템플릿에 대해 글로벌을 조정하는 것이 더 효과적일 수 있습니다.
원답
AFAIK에서는 eslint 규칙을 템플릿, 특히 템플릿의 한 줄에 적용할 수 없습니다.
하지만 나는 틀렸다는 것이 증명되길 바란다.
텍스트가 많은 파일이 있기 때문에 이 규칙을 파일에 추가했습니다.
다음은 구조입니다(기타 설정은 삭제되어 있습니다.
그러면 템플릿 태그 전체의 규칙이 비활성화됩니다.
편집: 대신 모든 .vue 파일의 행 길이 규칙을 비활성화하려면 에 추가합니다(이것에 의해 및 태그의 규칙도 비활성화됩니다).
module.exports = {
...
overrides: [
{
files: ["*.vue"],
rules: {
...
'max-len': 'off' // disables line length check
}
}
]
};
>=의 경우 지시 주석을 사용하여 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>
max-len을 사용하지 않도록 설정하고 vue/max-len을 다음과 같이 사용할 수 있습니다. 예:
"재정":-LSB-
{
"파일":-LSB-
"*.vue"
뻗는다,
"규칙":{
"max-len":"를",
"vue/max-len":-LSB-
"오류",
{
"코드":120,
"템플릿":9000,
"ignoreTemplateLiterals":사실,
"ignoreUrls":사실,
"ignoreStrings":진정한
}
]
}
}
]
이렇게 하면 구성 요소의 일부에 대해서만 규칙을 실행 중지할 수 있습니다.
ESLint 규칙에 추가할 수 있습니다.
rules: {
"vue/max-attributes-per-line": "off"
}
이것은 나에게
효과가 있었습니다(프로젝트용으로 설정해도).
자세한 내용은 이쪽에서 확인하실 수 있습니다.
올바른 eslint 설정은 다음과 같습니다.
rules: {
'prettier/prettier': ['error', { printWidth: 120 }],
},
저는 Vue3를 사용하고 있는데, 구조가 바뀌어서 앞에서 말한 방법이 통하지 않습니다.
일단은.
이게 내가 일하는 방식이야 줄에 주석을 달기
초.
오브젝트에 행을 추가합니다.
레퍼런스
URL : https://stackoverflow.com/questions/50468673/how-to-disable-eslint-rule-max-line-length-for-paragraph-in-template-of-vue-js
오류: 6 행이 path/to/file.vue: 6:
1에서 최대 행 길이 100(max-len)을 초과합니다.
<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>
같은 패러그래프 텍스트의 보풀을 비활성화하는 방법이 있습니까?
module.exports = {
...
overrides: [
{
files: ["*.vue"],
rules: {
...
'max-len': 'off' // disables line length check
}
}
]
};
<template>
<!-- eslint-disable-next-line vue/max-attributes-per-line -->
<div a="1" b="2" c="3" d="4">
</div>
</template>
rules: {
"vue/max-attributes-per-line": "off"
}
효과가 있었습니다(프로젝트용으로 설정해도).
rules: {
'prettier/prettier': ['error', { printWidth: 120 }],
},
'programing' 카테고리의 다른 글
| 모든 글로벌 변수/로컬 변수를 인쇄하시겠습니까? (0) | 2022.07.16 |
|---|---|
| VueJ 2: 운영 빌드에서 Console.log를 삭제하는 방법 (0) | 2022.07.16 |
| 수집을 통한 반복으로 동시 수정 회피루프에서 개체를 제거할 때 예외 발생 (0) | 2022.07.16 |
| C에서는 객체 지향 코드를 어떻게 쓸 수 있을까요? (0) | 2022.07.16 |
| GObject 및 Glib 학습 자료 (0) | 2022.07.16 |