개요

평소 vim 사용하고 있습니다만 JS 쓰는데 Atom이 편리할 것 같기 때문에 개발 환경을 정돈했습니다.

Atom에 넣을 플러그인

linter-eslint

linter-flow

※그 외에도 넣고 있는 플러그인은 있습니다만 여기에서는 상기 2개를 픽업합니다

※ prettier-atom도 있습니다만 이번은 넣지 않고 eslint의 플러그인으로 하기로 했습니다

linter-eslint

파일 저장시에 eslint 체크를 하고 자동으로 코드를 수정해 주는 것이 매우 편리합니다.
이번에는 플러그인으로 prettier를 넣었으므로 코드의 성형도 자동으로 해줍니다.
참고: prettier 사용법

기본은 eslintrc에 규칙을 작성하고 그에 따라 코드를 수정하도록 합니다. 그래서 필요한 것을 한 세트 넣어 둡니다.

$ npm install --save-dev \
babel-eslint \
babel-plugin-syntax-flow \
babel-plugin-syntax-jsx \
eslint \
eslint-config-prettier \
eslint-plugin-import \
eslint-plugin-import-order-autofix \
eslint-plugin-prettier \
eslint-plugin-react \
eslint-plugin-flowtype \
prettier \
prettier-eslint

eslintrc는 이쪽을 참고로 하고 있습니다.
htps : // 기주 b. 코 m/미 z치/에 s ぃ t-콘후ぃ g-mi z 치/bぉ b/마s r/. 에스 엔 trc. yml

prettier에서는 후미의 세미콜론을 생략해, 싱글 쿼테이션을 사용하는 근처의 설정을 하고 있습니다.

  prettier/prettier:
    - 2
    -
      trailingComma: none
      singleQuote: true
      semi: false

그리고는 linter-eslint의 설정으로 파일 수정시에 수정하는 체크를 둡니다.


그러면 Atom상에서 eslint 체크를 해 주고, 에러가 있으면 가르쳐 줍니다.
그리고 파일을 저장할 때 이러한 에러와 prettier의 체크 항목을 맞추어 수정해 줍니다.

단번에 코드가 깔끔했습니다.

linter-flow

이쪽도 자동으로 flow의 체크를 해 주기 때문에 편리합니다. flow-bin을 넣어 flow를 움직일 수 있는 환경을 정돈해 둡니다.

$ npm install [email protected] -g

※최신의 0.61.0이라고 잘 움직이지 않았으므로 버전을 내려 넣었습니다.

linter-flow는 디폴트인 채로 특히 아무것도 괴롭히지 않아도 괜찮습니다.
그리고는 마음대로 형체크를 해 줍니다.

(덧붙여서 eslint에서 prefer-const 규칙을 설정하고 있기 때문에 파일을 저장할 때 let를 const로 바꿉니다.)

결론

평소 vim을 사용하고 있기 때문에 너무 Atom 등을 사용하지 않습니다만, 이 근처까지 설정하면 유석에 편리하다고 생각합니다. (덧붙여서 vim-mode-plus은 물론 넣고 있습니다.웃음)
eslint와 prettier의 환경을 정돈해 두면 누가 써도 어느 정도 통일된 코드가 되기 때문에 사람에 의해서 변동이 나오지 않고 팀 개발에 있어서 꽤 좋은 것이 아닐까라고 생각했습니다.

참고

flow로 javascript에 형식을 지정합시다.

ReactNavite 개발에 Atom 사용

modern-js-stack-example-with-react