ESLint를 VSCode 에서 적용해보기

다른 사람들과 협업 또는 코드를 배포할때 스타일을 통일하기 위해서는 eslint 는 필수라고 할 수 있다.

매번 vs code 에서 이를 적용하는데 적잖은 시간이 걸리므로 이번기회에 정리하여 다음번에는 빨리 기본 설정을 하는것이 목표이다!

단, webstorm 에서는 좀더 쉽게 적용 가능하니 ide 가 vs code 라고 가정하여 글을 작성하겠다.

1. eslint 플러그인 깔기

vs code 에서는 친절하게 eslint 플러그인을 지원한다. 이것만 깔아도 기본적인 셋팅이 가능하지만 보통은 각 팀의 컨벤션에 맞는 설정을 하고 싶기에 좀더 나아갈려고 한다.!

2. .eslintrc.js 설정

   설정파일은 굳이 js 뿐만아니라 json 도 가능하다.

   우선 아래와 같이 기본 rule이 설정된 js 파일을 저장한다.

   //.eslintrc.js 
   
   module.exports = {
     parser: '@typescript-eslint/parser',
     plugins: ['@typescript-eslint'],
     extends: [
       // Airbnb style guide 적용
       'airbnb-base',
       // TypeScript ESLint recommanded style 적용
       'plugin:@typescript-eslint/eslint-recommended',
     ],
     rules: {
       'no-console': 'off',
       indent: ['error', 2],
       semi: ['error', 'always'],
       'no-trailing-spaces': 0,
       'keyword-spacing': 0,
       'no-unused-vars': 1,
       'no-multiple-empty-lines': 0,
       'space-before-function-paren': 0,
       'eol-last': 0,
     },
   };

3. dependency 설정

   뭔가 위와 순서가 바뀐것 같지만 이제 eslint 에서 사용하는 plugin 을 설치해야한다.

   typescript 를 지원하지 않으면 간단히 airbnb-base 만 다운받으면 되지만, tslint 역할과 비슷하게 동작하는 eslint를 설정하는것이 목표이니 추가적인 플러그인을 다운받아야한다.

   // 이미 global 로 설치했다면 다운받지 않아도 무관하다.
   yarn add -D eslint
   
   yarn add -D eslint-config-airbnb
   
   yarn add -D typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin
   
   // package.json 에서는 보이지 않지만, 설치하지 않으면 eslint 적용이 되지 않는다! 
   yarn add -D eslint-plugin-import@latest 

   이렇게 해도 적용되지 않는다면 eslint —fix file.ts 를 이용해서 오류 로그를 확인하면 된다. 보통은 패키지를 설치하지 않아서 적용되지 않는데, 이 명령어를 입력하면 어떤 패키지가 추가되지 않았는지도 알려준다!