package.json
airbnb 스타일 관련 설치
npx install-peerdeps --dev eslint-config-airbnb
package.json // devDependencies 에 설치 확인
{
...
"devDependencies": {
"eslint": "^8.2.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-react": "^7.28.0",
"eslint-plugin-react-hooks": "^4.3.0"
}
}
폴더 구조 세팅
app.js 오류를 발생시킬 코드 작성
// src/app.js
console.log('zz') ;;
.eslint.js 파일 생성 - airbnb 적용
// .eslintrc.js
module.exports = {
extends: 'airbnb-base',
};
package.json 의 scripts 를 수정하여 cli 로 동작 확인
{
"name": "eslint2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"lint": "eslint src"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"eslint": "^8.2.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-react": "^7.28.0",
"eslint-plugin-react-hooks": "^4.3.0"
}
}
npm run lint 실행
내가 가지고 있던 의문 eslint 의 airbnb 가 잘 적용되는게 맞나?
이와 비교하기 위한 대조군 코드 작성
airbnb 설치시 생성된 eslint 의 8.2.0 버전 설치
npm install -D eslint@8.2.0
package.json
{
"name": "eslint_base",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"lint": "eslint src"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"eslint": "^8.2.0"
}
}
비교할 extends 로 eslint:recommended
// .eslintrc.js
module.exports = {
extends: 'eslint:recommended',
};
app.js 도 위와 똑같이 만들고
npm run lint 실행
결과
airbnb 의 다소 빡센 규칙이 잘 적용되는 것을 확인 할 수 있음.
이어서 airbnb 로 넘어와서, 해당 error 들을 해결해보겠음..
--fix 옵션 추가
package.json
"scripts": {
"lint": "eslint src --fix"
},
기존 app.js 파일이
// src/app.js
console.log('zz') ;;
자동으로 수정된다.
// src/app.js
console.log('zz');
error 가 다 없어지고 warning 이 남게 되었는데
no-console 규칙은 개발 중에 디버깅을 위해 사용된 console 메서드가 코드에 남아있으면 문제를 일으킬 수 있다는 점을 지적합니다.
해결 방법
// .eslintrc.js
module.exports = {
extends: 'airbnb-base',
rules: {
"no-console": "off" // 콘솔 사용에 대한 경고를 끕니다.
}
};
같은 상황에 대해서 eslint:recommended 의 경우
--fix 와 no-console 을 적용해도 꺼지지 않는데
env 환경 설정을 해야 해결 할 수 있다.
// .eslintrc.js
module.exports = {
extends: 'eslint:recommended',
env: {
browser: true, // 브라우저 환경에서 전역 변수 사용을 허용합니다.
node: true, // Node.js 환경에서 전역 변수 사용을 허용합니다.
es2021: true // 최신 ECMAScript 기능을 허용합니다.
}
};
- browser: 브라우저에서 제공하는 전역 변수(console, window, document 등)를 인식하도록 설정합니다. 브라우저 환경에서 console을 사용할 때 경고를 줄일 수 있습니다.
- node: Node.js 환경에서 제공하는 전역 변수(process, module, require 등)를 인식하도록 설정합니다.
- es2021: 최신 ECMAScript(ES2021) 기능을 허용하여 최신 문법과 기능을 지원합니다.
prettier 설치
npm install --save-dev prettier eslint-plugin-prettier eslint-config-prettier
eslint-config-prettier & eslint-plugin-prettier
프리티어 포매팅 규칙을 eslint 로 추가하고 서로 충돌하는 옵션이 있으면 프리티어의 규칙을 사용하도록 한다.
.eslintrc.js 수정
// .eslintrc.js
module.exports = {
extends: [
'airbnb-base',
'plugin:prettier/recommended' // Prettier 관련 규칙 추가
],
env: {
browser: true,
node: true,
es2021: true
},
rules: {
'no-console': 'off'
// 다른 규칙 설정
}
};
.prettierrc 파일 생성
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"printWidth": 80
}
다음과 같은 코드에 대해서
// src/app.js
console.log('1111111111111111', '2222222222222222222', '333333333333333333333', '44444444444444444444444', '5555555555555555555');
npm run lint 실행
다음과 같이 이쁘게? 포매팅 되는것을 확인
// src/app.js
console.log(
'1111111111111111',
'2222222222222222222',
'333333333333333333333',
'44444444444444444444444',
'5555555555555555555',
);
코드를 작성하고 npm run lint 를 입력하는건 대단히 번거로운 일이다.
왼쪽 메뉴에서 '확장(extension)' 을 누르고 eslint 를 찾는다.
설정을 들어가서 저 부분을 누르면 setting.json 열고
eslint 사용을 추가해주면 vscode 에서 바로바로 빨간색으로 알려준다.
{
"eslint.enable": true,
}
저장시에 바로 수정해주는 코드
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
해당 옵션 잘못쓰면 계속 충돌남..
// "editor.formatOnSave": true
다음과 같이 코드를 만들고
// src/app.js
console.log('dd') ;;;
console.log('1111111111111111', '2222222222222222222', '333333333333333333333', '44444444444444444444444', '5555555555555555555'); ;;
저장하면
// src/app.js
console.log('dd');
console.log(
'1111111111111111',
'2222222222222222222',
'333333333333333333333',
'44444444444444444444444',
'5555555555555555555',
);
npm run lint 를 하지 않아도 바로 고쳐진다.
https://www.youtube.com/watch?v=Y3kjHM7d3Zo&t=97s
추가1
ESLint extension 설치하고나서
.eslintrc.js 파일에 자꾸 불이 들어온다.. 오류는 아닌데 보기 불편한데.. 어떻게 해결해야되지...
eslint delete cr 로 검색하여 다음 글에서 해결
prettier의 기본 라인 개행 방식(lf)이 windows의 개행 방식(crlf)과 다르기 때문에 발생한다.
https://guiyomi.tistory.com/134
VSCode - Delete `CR` eslint(prettier/prettier) 에러 해결법
VSCode 내에서 eslint, prettier 설정을 하다 보면 다음과 같은 오류가 발생하곤 한다. 위 오류는 windows에서 발생하는 오류로, prettier의 기본 라인 개행 방식(lf)이 windows의 개행 방식(crlf)과 다르기 때문
guiyomi.tistory.com
rules 에 새 규칙 추가
// .eslintrc.js
module.exports = {
extends: [
'airbnb-base',
'plugin:prettier/recommended', // Prettier 관련 규칙 추가
],
env: {
browser: true,
node: true,
es2021: true,
},
rules: {
"prettier/prettier": [
"error",
{
"endOfLine": "auto"
}
],
'no-console': 'off'
},
};
화재가 진압되었다 편안해졌다..
추가 2
.prettierrc 설정
다른 글들을 검색하다보면 더 나은? 보기좋은? prettierrc 설정들이 있다.
{
"singleQuote": true,
// 문자열은 따옴표로 formatting
"semi": true,
//코드 마지막에 세미콜른이 있게 formatting
"useTabs": false,
//탭의 사용을 금하고 스페이스바 사용으로 대체하게 formatting
"tabWidth": 2,
// 들여쓰기 너비는 2칸
"trailingComma": "all",
// 객체나 배열 키:값 뒤에 항상 콤마를 붙히도록 formatting
"printWidth": 80,
// 코드 한줄이 maximum 80칸
"arrowParens": "avoid",
// 화살표 함수가 하나의 매개변수를 받을 때 괄호를 생략하게 formatting
};
{
"singleQuote": true,
"semi": true,
"useTabs": false,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 80,
"arrowParens": "avoid"
}
https://velog.io/@_jouz_ryul/ESLint-Prettier-Airbnb-Style-Guide%EB%A1%9C-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0
