Vue eslint 오류: 구성 요소 이름 "인덱스"는 항상 multi-word.eslintvue/multi-word-component-names 네 가지 솔루션이어야 합니다.
에러 코드
Vue-cli는 새 프로젝트를 생성하고 구성 요소를 빌드할 때 오류
메시지 를 표시합니다.오류는 다음과 같습니다 .
Component name "index" should always be multi-word.eslintvue/multi-word-component-names
npm 실행 서브 / 원사 서브 오류:
ERROR Failed to compile with 1 error 下午6:02:08
C:\Users\wally\Desktop\vscode\vue\seal\seal_web\src\views\home\index.vue
1:1 error Component name "index" should always be multi-word vue/multi-word-component-names
✖ 1 problem (1 error, 0 warnings)
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
ERROR in
C:\Users\wally\Desktop\vscode\vue\seal\seal_web\src\views\home\index.vue
1:1 error Component name "index" should always be multi-word vue/multi-word-component-names
✖ 1 problem (1 error, 0 warnings)
webpack compiled with 1 error
이유
초보자는 컴포넌트 이름을 정할 때 표준화가 충분히 되어 있지 않습니다.공식 스타일 가이드에 따르면 루트 컴포넌트(App.vue)를 제외하고 사용자 정의 컴포넌트 이름은 html 태그와의 충돌을 방지하기 위해 여러 단어로 구성되어야 합니다.
최신 vue-cli로 생성된 프로젝트는 최신 vue/cli-plugin-eslint 플러그인을 사용하고 vue/multi-word-component-names 규칙은 vue/cli-plugin-eslint v7.20.0 이후에 참조하므로 이 오류는 컴파일 타임에 판단됩니다.
해결책
옵션 1
Rename
구성 요소의 이름을 여러 단어로 수정하거나 카멜 케이스 명명 방법을 사용하거나 "-"를 사용하여 단어를 연결합니다. 하지만 가끔 개인사정으로 이름을 바꿀 수 없는 경우가 있는데, 이 방법은 사용하기 쉽지 않습니다.다음 두 가지 해결방법을 참고하세요.
옵션 II:
확인 닫기
루트 디렉터리에서 vue.config.js 파일을 찾고 (새 파일이 없는 경우) 다음 코드를 추가합니다.
lintOnSave: false
추가 후 예제 파일:
const {
defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
//关闭eslint校验
lintOnSave: false
})
이 해결책은 일시적인 해결책이지 근본 원인이 아닌 컴파일시 오류를보고하지 않을뿐입니다 vscode + eslint를 사용하면 파일 헤더에 빨간색으로 프롬프트가 표시됩니다 강박 장애는 전혀 견딜 수 없습니다, 공식은 검증을 직접 해제하는 것을 권장하지 않으므로 세 번째 솔루션을 사용하는 것이 좋습니다
옵션 3(권장)
이름 지정 규칙 확인을 해제합니다.
루트 디렉토리에서 .eslintrc.js 파일을 찾고 파일이 없으면 새 파일을 만듭니다(파일 앞에 점이 있음). 코드는 다음과 같습니다.
줄 추가:
"vue/multi-word-component-names":"off",
문서 내용:
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'eslint:recommended'
],
parserOptions: {
parser: '@babel/eslint-parser'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
//在rules中添加自定义规则
//关闭组件命名规则
"vue/multi-word-component-names":"off",
},
overrides: [
{
files: [
'**/__tests__/*.{j,t}s?(x)',
'**/tests/unit/**/*.spec.{j,t}s?(x)'
],
env: {
jest: true
}
}
]
}
위는 명명 규칙을 닫고 구성 요소 이름을 확인하지 않는 것입니다 공식 권장 설정은 구성 요소 이름에 따라
개별 구성 요소 이름을 무시하는 것입니다
// 添加组件命名忽略规则
"vue/multi-word-component-names": ["error",{
"ignores": ["index"]//需要忽略的组件名
}]
옵션 4(권장):
세 번째 해결책은 구성 요소 이름 규칙을 닫고 무시하는 것이지만 때때로 팀은 여전히 닫을 수 없는 공통 사양이 필요하고 파일 이름이 구성 요소 이름과 일치하지 않을 수 있습니다.예를 들어 각 페이지 항목이 필요합니다. index.vue가 되지만 구성 요소 이름은 MyHome 입니다 . 구성 요소 이름을 무시하면 인덱스 와 MyHome을 동시에 추가해야 할 수도 있습니다 . 어리석은 것처럼 보입니다. 또는 무시할 라우팅 구성 요소가 필요하지만 무시할 비 라우팅 구성 요소가 필요하므로 이 경우 더 유용하도록 규칙을 수정하는 방법은 무엇입니까? 그래서 네 번째 방법을 찾았습니다. 세 번째 옵션은 구성 요소 이름을 기반으로 무시하는 옵션으로, 이 옵션은 파일의 닫기 규칙을 기반으로 하는 것이 더 적합합니다.
파일 명명 규칙 확인 해제
루트 디렉토리에서 .eslintrc.js 파일 을 찾아 존재하지 않는 경우 새 파일을 생성합니다(파일 앞에 점이 있음). 코드는 다음과 같습니다.
파일 재정의에 다음 코드를 추가합니다.
{
files: ['src/views/index.vue','src/views/**/index.vue'], // 匹配views和二级目录中的index.vue
rules: {
'vue/multi-word-component-names':"off",
} //给上面匹配的文件指定规则
}
그 중 files: []는 파일을 일치시키는 데 사용되며 *는 모든 파일을 나타냅니다. index.vue는 일치하는 디렉토리에 있는 모든 vue 파일인 *.vue로 변경할 수도 있습니다.
문서 내용:
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'eslint:recommended'
],
parserOptions: {
parser: '@babel/eslint-parser'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
},
overrides: [
//这里是添加的代码
{
files: ['src/views/index.vue','src/views/**/index.vue'], // 匹配views和二级目录中的index.vue
rules: {
'vue/multi-word-component-names':"off",
} //给上面匹配的文件指定规则
},
{
files: [
'**/__tests__/*.{j,t}s?(x)',
'**/tests/unit/**/*.spec.{j,t}s?(x)'
],
env: {
jest: true
}
}
]
}
사실 3안과 기본적으로는 같지만 입장이 다르다.