Airbnb JavaScript 스타일 가이드와 함께 ESLint를 사용하는 방법
Airbnb 스타일 가이드는 깨끗하고 일관된 코드를 작성하기 위한 일련의 가이드라인입니다. 2012년에 출시되었으며 이후 JavaScript 프로젝트에서 가장 인기 있는 스타일 가이드 중 하나가 되었습니다.
들여쓰기, 주석, 최대 줄 길이, 변수 명명 규칙, 따옴표 및 함수 정의에 다양한 스타일 규칙을 적용하여 유지 관리하기 쉬운 일관된 코드를 작성하기 위한 일련의 지침을 제공합니다. JavaScript 프로젝트에서 Airbnb 스타일 가이드를 설정하려면 ESLint와 같은 linting 도구를 사용해야 합니다.
ESLint 설치
ESLint는 개발자가 문제를 찾고 수정하여 깨끗한 코드를 작성하도록 도와주는 오픈 소스 JavaScript Linting 도구입니다. 구문 오류, 잘못된 매개변수 및 정의되지 않은 변수와 같은 코드의 문제를 감지할 수 있습니다. – -fix 태그 와 함께 ESLint를 실행 하면 코드에서 수정 가능한 문제를 자동으로 식별하고 수정하므로 시간이 절약됩니다.
ESLint를 사용하여 Airbnb 스타일 가이드와 같은 스타일 가이드를 적용할 수 있습니다.
시작하려면 터미널에서 다음 명령을 실행하여 ESLint를 dev 종속성으로 설치합니다.
npm install --save-dev eslint eslint-config-airbnb
그런 다음 ESLint를 초기화합니다.
npx eslint --init
프로젝트에 대한 질문이 표시됩니다. 메시지가 표시되면 다음을 수행합니다.
? How would you like to use EsLint?
이 옵션을 선택합니다.
> To check syntax, find problems and enforce code style
다음 프롬프트가 나타날 때까지 프로젝트에 따라 다음 질문에 답하십시오.
? How would you like to define a style for your project?
그러면 다음과 같이 대답하십시오.
> Use a popular style guide
다음 안내를 위해 에어비앤비 스타일 가이드를 선택하세요.
? Which style guide do you want to follow?
> Airbnb: <https://github.com/airbnb/javascript>
마지막으로 다음 프롬프트에서 “예”를 선택하여 필요한 종속성을 설치합니다.
설치가 완료되면 폴더 루트에 .eslintsrc.json 파일이 있어야 합니다.
에어비앤비 스타일 가이드 커스터마이징
에어비앤비 스타일 가이드는 맞춤화를 허용합니다. .eslintsrc.json 구성 파일 에서 추가 규칙을 추가하거나 기존 규칙을 재정의할 수 있습니다 .
예를 들어 한 줄에 최대 80자를 허용하려면 규칙 섹션에 이 규칙을 추가할 수 있습니다.
{
"extends": [
"plugin:react/recommended",
"airbnb"
],
"rules": {
"max-len": ["error", { "code": 80 }]
}
}
package.json에서 ESLint 실행
package.json 파일 에 스크립트를 추가하여 ESLint를 실행합니다.
"scripts": {
"lint": "eslint"
}
이 명령을 실행하여 린트 스크립트를 실행하여 린트 오류를 확인합니다.
npm run lint
–fix 플래그 를 사용하여 코드의 문제를 수정하는 스크립트를 추가할 수도 있습니다 .
"scripts": {
"lint": "eslint",
"lint:fix": "npm run lint -- --fix"
},
터미널에서 npm run lint:fix 를 실행 하면 linter가 수정할 수 있는 모든 문제가 자동으로 수정됩니다.
VS Code에 저장할 때 Linting 활성화
코드를 린트할 때마다 스크립트를 실행하면 지루할 수 있습니다. 아래 단계에 따라 VS Code에서 저장할 때 Linting을 활성화하십시오.
- VS Code 창의 왼쪽에 있는 “확장 프로그램” 탭으로 이동합니다.
- ESLint 확장 프로그램 을 검색하여 설치합니다.
- 확장이 설치되면 VS Code 설정을 엽니다(파일 > 기본 설정 > 설정 또는 Ctrl +, 누름).
- 설정 편집기에서 “저장 시 코드 작업”을 검색합니다.
- “settings.json에서 편집”을 클릭하고 다음 설정을 settings.json 파일에 추가합니다.
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": ["javascript"],
"eslint.run": "onSave",
}
이렇게 하면 저장 시 ESLint 확장이 코드를 자동으로 수정할 수 있습니다.
스타일 가이드 사용의 이점
Airbnb 스타일 가이드와 같은 스타일 가이드를 사용하는 주요 이점은 일관된 코드 기반을 유지하는 데 도움이 된다는 것입니다. 이는 개발자가 코드 베이스를 쉽게 이해하고 기여할 수 있으므로 팀에서 유용합니다. 또한 모범 사례를 적용하고 일반적인 코딩 실수를 방지하는 데 도움이 됩니다.
답글 남기기