[ Vue.js ] install eslint
# install eslint
-
npm i -D eslint eslint-plugin-vue babel-eslint
설치
-
root 위치에 .eslintrc.js
파일 생성
module.exports = {
//browser & node의 환경에서 코드를 검사할것인지 설정
env: {
browser: true,
node: true
},
extends: [
// vue
//'plugin:vue/vue3-essential', // Lv1
'plugin:vue/vue3-strongly-recommended', // Lv2
//'plugin:vue/vue3-recommended', // Lv3
// js - eslint에서 권장하는 기본적인 코드규칙
'eslint:recommended'
],
parserOptions: {
//babel을 통하여 JavaScript 호환하여 코드 검사하기에 해당하는 패키지 도움을 위해 명시
parser: 'babel-eslint'
},
rules: {
// extends에서 제공하는 그대로의 규칙을 사용할경우 rules영역은 생략가능
//코드의 새로운 줄바꿈을 하지 않음(never) 설정
"vue/html-closing-bracket-newline": ["error", {
"singleline": "never",
"multiline": "never"
}],
//마감태그 설정
"vue/html-self-closing": ["error", {
"html": {
"void": "always",
"normal": "never",
"component": "always"
},
"svg": "always",
"math": "always"
}]
}
}
# eslint-plugin-vue
npm i -D eslint eslint-plugin-vue babel-eslint
설치
root 위치에 .eslintrc.js
파일 생성
module.exports = {
//browser & node의 환경에서 코드를 검사할것인지 설정
env: {
browser: true,
node: true
},
extends: [
// vue
//'plugin:vue/vue3-essential', // Lv1
'plugin:vue/vue3-strongly-recommended', // Lv2
//'plugin:vue/vue3-recommended', // Lv3
// js - eslint에서 권장하는 기본적인 코드규칙
'eslint:recommended'
],
parserOptions: {
//babel을 통하여 JavaScript 호환하여 코드 검사하기에 해당하는 패키지 도움을 위해 명시
parser: 'babel-eslint'
},
rules: {
// extends에서 제공하는 그대로의 규칙을 사용할경우 rules영역은 생략가능
//코드의 새로운 줄바꿈을 하지 않음(never) 설정
"vue/html-closing-bracket-newline": ["error", {
"singleline": "never",
"multiline": "never"
}],
//마감태그 설정
"vue/html-self-closing": ["error", {
"html": {
"void": "always",
"normal": "never",
"component": "always"
},
"svg": "always",
"math": "always"
}]
}
}
eslint plugin 을 참고하여 eslint 규칙을 준수하고 수정하여 작업한다.
settings.json
설정에 추가"editor.codeActionsOnSave": { "source.fixAll.eslint": true }
## # vscode에서 eslint설정에 맞지 않은 상태의 코드의경우 저장시 eslint에 맞게 바뀜
Author And Source
이 문제에 관하여([ Vue.js ] install eslint), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@parkyooni/Vue.js-install-eslint저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)