ESLint 사용법

안녕하세요 쿠폰파파입니다!
오늘은 Javascript (자바스크립트) 로 개발을 하는 분들이 코딩 컨벤션을 위해 쉽게 사용할 수 있는 ESLint (ES린트) 에 대해 설명을 드리려고 합니다!

코딩컨벤션

코딩컨벤션은 개발자들이 코드를 작성할 때 코딩 스타일을 제시하는 가이드라인 입니다. 
코딩컨벤션의 장점은 (1) 버그를 줄이고 (2) 유지보수가 원활하며 (3) 가독성을 높여줍니다. 

각 회사별로 컨벤션을 정하는 경우도 있고 파이썬과 같이 공식 컨벤션을 정해서 사용하는 경우도 있습니다. 큰 회사들 또는 스타트업들은 대부분 컨벤션이 정해져있지만 작은 스타트업들의 경우 컨벤션이 정해져 있지 않는 경우도 많습니다. 그러다보니 각자의 스타일에 따라 코딩을 하게 되고 문법도 맞지 않아 추후 신규 개발자가 들어오거나 협업이 필요할때 불편함이 많이 생깁니다.

ESLINT

max-len - Rules

A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.

eslint.org

ESLint 는 Javascript 언어의 코딩컨벤션중의 하나로 현재 나와있는 컨벤션중 제일 유명하고 활용도가 높습니다. ESLint 의 장점은 기본적인 컨벤션 외에 추가로 각 회사의 스타일에 맞게 설정이 가능하기 때문입니다. 

먼저 ESLint 는 npm에서 패키지 형태로 설치가 가능합니다. 

$ npm install -g eslint

설치가 완료되면 기본 세팅을 하기 위해 --init 를 실행 시킵니다. 

$ eslint --init

--init 을 실행시키게 되면 ESLint 가 먼저 여러개의 질문들을 물어보게 됩니다. 대답에 따라 기본 세팅을 해주기 위해서죠! 당황하지 마시고 천천히 대답하세요~~ 각 질문 하단에 번역을 해두었습니다! 

? How would you like to configure ESLint? Answer questions about your style // ESLINT 를 어떻게 설정하시기를 원하신가요? 당신의 스타일에 대해 대답을 해주세요 ? Are you using ECMAScript 6 features? // ECMAScript 6 을 사용하고 계시나요? ? Are you using ES6 modules? // ES6 모듈을 사용하고 계시나요? ? Where will your code run? // 코드는 어디서 실행되나요? ? Do you use CommonJS? // CommonJS 를 사용하시나요? ? Do you use JSX? Yes // JSX를 사용하시나요? ? Do you use React? Yes // React를 사용하시나요? ? What style of indentation do you use? // indentation (들여쓰기)는 어떤 스타일로 사용하시나요? // 참고: 여기서는 space 또는 tab 으로 대답하시면 될 거에요~ ? What quotes do you use for strings? // string 이용시 따음표를 몇개 사용하시나요? // 한개 (Single) 또는 두개 (Double) 로 대답하시면 됩니다 ? What line endings do you use? // line ending 은 어떤 것을 이용하나요? // 참고: 아마 주로 Windows 방식을 많이들 이용하실테니 Windows 라고 대답하셔도 무관할겁니다! ? Do you require semicolons? // 쉼표는 필수인가요? ? What format do you want your config file to be in? // config 파일의 포멧은 어떻게 할까요?

--init 명령어가 끝나면 패키지를 설정한 디렉도리에 .eslintrc 라는 파일이 생겼을거에요! 
아래 내용은 쿠폰파파에서 실제로 사용하고 있는 eslint 설정값들입니다. 저희는 React, Node, ES6 등 다양한 것들을 사용하고 있어 해당 내용들이 반영된 것을 확인할 수 있습니다! 

{ "extends": ["eslint:recommended", "plugin:react/recommended", "loopback"], "parser": "babel-eslint", "parserOptions": { "sourceType": "module", "ecmaFeatures": { "jsx": true, "modules": true, "experimentalObjectRestSpread": true } }, "rules": { "strict": 0, "object-curly-spacing": [ 2, "always" ], "react/prop-types": [0], "max-len": [2, { "code" : 120 }] }, "env" : { "browser" : true, "node" : true, "es6" : true }, }

기본 설정 외에 각자의 룰을 추가하고 싶다면 위의 "rules" 부분에 추가하시면 됩니다. 

예를 들어 저희는 indentation 을 2개의 spacing 으로 간주하기로 해서 "object-curly-spacing": [2, always"] 라고 지정을 했습니다. 

또한 한 줄의 코드가 120자 이상을 넘어가지 않도록 규정을 지어서 "max-len": [2, {code:120}] 이라고 또 추가하였습니다 ㅎㅎ

그외에 ESLint 에서 제공하는 Rule 들은 아래 링크에서 확인하실 수 있습니다!
https://eslint.org/docs/rules/


자 그럼 이제 ESLint 도 설치했으니 한번 실행을 해봐야겠죠?

$ eslint hello.js

실행은 위와 같이 간단하게 어떤 JS파일을 돌릴 것인지 지정해주면 됩니다.
그럼 ESLint 설치 끝! 

혼자 코딩할때는 잘 모르지만 회사에 취직하거나 친구들과 프로젝트를 진행하게 될때는 컨벤션을 미리미리 정해주면 좋습니다! 지금은 귀찮을지 모르지만 나중에 더 힘들어지기 전에 미리미리 정합시다!

나만의 룰을 만들어서 수동적으로 매번 그것을 지켜 나가면서 해도 좋고, ESLint 같은 패키지를 이용해서 설정을 해도 좋습니다!

모두가 다 깔끔하게 규칙에 맞게 코딩하는 그날까지!! :)

[출처] [쿠폰파파] ESLint 설정 및 사용하기|작성자 쿠폰파파

인텔리J 에 ESLint 적용하기

https://blog.naver.com/pjt3591oo/221110313407