[TIL] Vim Syntastic Plugin에 eslint-es6-airbnb 설정하기

Syntastic Plugin에 eslint-es6-airbnb 설정하기

npm 패키지 설치

• 우분투 전역(sudo) 설치 기준

  export PKG=eslint-config-airbnb;
  npm info "$PKG" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs sudo npm install --global "$PKG"

• Mac OS
  • 내가 맥을 안써봐서 잘 모르겠다..

.eslintrc 설정

• 전역 설정
  • ~/.eslintrc 를 생성하고 다음 내용을 입력

    {
    "extends": "airbnb",
    "globals": {
      "_": true,
      "$": true,
    }
    }

    • _ 와 $ 를 globals로 따로 처리하는 것은 lodash 혹은 underscore와 jQuery에서 에러를 뿜지 않기 위해서..
• 로컬 설정
  • 해당 프로젝트 루트에 ~/.eslintrc를 생성

Syntastic plugin 설정

• Vundle과 Syntastic Plugin 설치
  • 다음 URL들을 참고
    • 내맘대로 쓰는 vim 플러그인과 .vimrc 설정
    • Syntastic - Vim Awesome
• .vimrc에 Syntastic 설정 추가

  let g:syntastic_javascript_checkers = ['eslint']

• Syntastic + eslint + es6,airbnb 컨벤션 적용된 모습 

vim에 다양한 플러그인과 Syntastic에 eslint가 적용된 모습

• 만약 뭔가 잘 안된다면 vim 내에서 :SyntasticInfo 명령어로 eslint가 잘 잡혀있는지 확인해 볼 수 있다. 

  vim에서 :SyntasticInfo 명령어로 나오는 출력 결과

  
  

• Origin Github Markdown : https://github.com/uyu423/TIL/blob/master/Vim/Syntastic%20Plugin%EC%97%90%20eslint-es6-airbnb%20%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0.md