Airbnb 컨벤션에 따라 ESLint 설정하기

설치 순서

1. npx install-peerdeps --dev eslint-config-airbnb

• peerdeps 명령어를 사용함으로써 airbnb 설치시 필수 플러그인들이 설치된다.

728x90

2. eslint-config-airbnb를 사용하기 위한 dependencies를 확인해보고, 이를 다운로드 한다.

npm info "eslint-config-airbnb@latest" peerDependencies

 

3.그리고 typescript를 적용시켜주기 위해 npm install -D eslint-config-airbnb-typescript 한다.

 

4. .eslintrc.js 파일에 설치한 airbnb JS style을 적용하기 위해 아래의 코드를 추가해준다.

extends: [
  'airbnb',
  // ... 
],

 

5. .vscode 폴더에 settings.json 파일을 생성하고, 아래의 코드를 추가한다.

{
  // Set the default
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    // ESLint에 의한 자동 수정 기능을 활성화하기 위해
    "source.fixAll.eslint": true
  },
  // ESLint와 연동된 prettier를 사용하기 위해
  "prettier.disableLanguages": ["js"],
  // 에디터 바깥으로 포커스 이동 시 파일을 자동으로 저장하기 위해
  "files.autoSave": "onFocusChange"
}

 

6. 그럼 이제 npm run lint를 실행해보면 규칙에 어긋난 코드가 있는지 확인해볼 수 있다.

 

반응형

7. warning을 해결하기 위해 .eslintrc.js 파일의 rules에 아래의 코드를 추가했다.

 rules: {
    // ...
    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx', '.tsx'] }],
    'no-alert': 'off',
  },

stackoverflow에서 찾은 해결책이므로 아래의 링크를 참고하면 된다.

• https://stackoverflow.com/questions/35308336/eslint-disallow-use-of-alert-no-alert
• stackoverflow

 

참고 자료

• https://sangjuntech.tistory.com/25