적용기

eslint, prettier devDependencies 로 설치하기

npm i -D eslint prettier

airbnb 와 관련된 모든 패키지를 한번에 설치하기

npx install-peerdeps -D eslint-config-airbnb

Dependencies, Dev Dependencies, Peer Dependencies

Dependencies

앱에 종속된 일반적인 종속성으로 런타임, 빌드타임, 개발중 모두에서 이 종속성 패키지가 필요하여 앱이 빌드될 때 종속성 패키지들이 번들에 포함되어 배포된다.

Dev Dependencies

런타임에는 필요하지 않고 빌드, 개발중에만 필요한 패키지
번들에는 포함되지 않는다.

Peer Dependencies

피어 종속성?

실제로 패키지에서 직접 require 혹은 import 하지는 않더라도 호환성이 필요한 경우 명시한다.

피어 종속성은 일반 종속성과 거의 유사하나 A, B 사이 강한 요구사항을 정의하는 대신 직접적으로 require 을 사용하지는 않더라도 너의 코드가 필요로하는 패키지들을 명시하는 의미를 지닌다.

사실 여기까지 읽었을때 ...? 뭐지 싶어서 더 찾아봤다.

//in your code...
B.addPlugin(new A())
//....

B.method() //internally using A's code here.

만약 A 라는 모듈을 B 라는 모듈에서 필요로 한다고 하자. A 바깥에서 B 를 사용하는데 B 는 여전히 A 를 사용할 필요가 있다.

그런 상황에서 B 종속성을 다음과 같이 명시할 수 있다.

{
  "dependencies": {
     "B": "1.2.0"
  }
}

그러면 구조가 다음과 같이 될 것이다.

node_modules
|_ A
  |_ node_modules
    |_ B

만약 이런게 여러개가 있다면?

node_modules
|_ A
| |_ node_modules
|   |_ B
|_C
| |_ node_modules
|   |_ B
|_D
  |_ node_modules
    |_ B

일반적으로 각각에 설치된 B 의 버전이 같다면 문제가 되지는 않는데 잠재적으로 다를 경우와 같은 문제를 내포하고 있다.

Peer dependencies 는 plugin, package 처럼 다른 사람들에 의해 코드를 개발하는데 사용될 수 있을때 peer dependencies 를 사용한다.

결국 install-peerdeps 는 플러그인처럼 다른 사람들이 패키지를 가져다 사용할 때 버전상 차이가 없도록 하기 위해 사용하는 것으로 이해했다.

prettier 관련 dev 종속성 설치하기

npm i -D eslint-config-prettier eslint-plugin-prettier

루트 디렉토리에 .eslintrc.json 파일 생성하고 다음 내용 작성하기

{  
  "extends": ["airbnb", "prettier"],  
  "plugins": ["prettier"],  
  "rules": {  
    "prettier/prettier": ["error"],
    "no-console": "error"
  },  
}  

"extends": ["airbnb", "prettier"], : ESLint 구성을 확장하여 airbnb 에서 제공하는 JavaScript 스타일 가이드 및 규칙을 적용하고 prettier 에서 제공하는 코드 형식화 도구와 관련된 ESLint 플러그인을 확장한다.

"plugins": ["prettier"], : ESLint 플러그인을 활성화

"rules": { "prettier/prettier": ["error"] }, : 프로젝트에 대한 규칙 설정, prettier 의 규칙을 위반하면 에러로 표시한다.

"rules": { "no-console": "error" }, : console.log 가 있으면 오류를 던진다. 혹시 콘솔을 남겨둘 경우 오류를 보이도록 하기 위해 추가했다.

루트 디렉토리에 .prettierrc 파일 생성하고 다음 내용 작성하기

{
	"singleQuote": false,
	"semi": true,
	"useTabs": false,
	"tabWidth": 2,
	"trailingComma": "all",
	"printWidth": 80,
	"arrowParens": "avoid"
}

위의 설정은 prettier docs 을 참고하자.

"singleQuote": false, : 작은 따옴표 대신 큰 따옴표 사용

"semi": true : 문장 끝에 세미콜론을 사용

"useTabs": false : 탭 대신 들여쓰기 사용

"tabWidth": 2 : 들여쓰기에 사용되는 탭의 폭 설정

"trailingComma": "all" : 객체 혹은 배열의 마지막 항목 뒤에 항상 쉼표, 를 추가

"printWidth": 80 : 코드 한 줄의 최대 길이 설정

"arrowParens": "avoid" : 화살표 함수의 매개변수가 하나인 경우 괄호를 사용하지 않는다.

User Settings 에 "editor.formatOnSave": true 삽입하기

"editor.formatOnSave": true 은 저장할 때 코드 서식을 자동으로 정리해준다.

ESLint 위반사항

no-plusplus

자바스크립트에서 단항 증감연산자 ++, -- 를 사용하지 말라는 규칙이다.
그 이유는 단항 증감연산자는 자동으로 세미콜론을 삽입하기 때문에 공백의 차이가 소스코드의 의미를 바꿀 수 있기 때문이다.

var i = 10;
var j = 20;

i ++
j
// i = 11, j = 20

var i = 10;
var j = 20;

i
++
j
// i = 10, j = 21

그래서 기존에 아래와 같이 증감연산자를 사용했다면

var foo = 0;
foo++;

var bar = 42;
bar--;

for (i = 0; i < l; i++) {
    doSomething(i);
}

아래와 같이 수정하는 것을 권장한다.

var foo = 0;
foo += 1;

var bar = 42;
bar -= 1;

for (i = 0; i < l; i += 1) {
    doSomething(i);
}

'jest' is not defined

이 경우 .eslintrc.json 에 "jest": true 을 추가하고 F1 > eslint.restart 명령을 통해 eslint 를 재부팅해서 해결할 수 있다.

Unexpected use of file extension "js" for "../src/App.js"eslintimport/extensions

후기

위의 설정을 적용하고 나니 상당히 많은 부분에서 문제가 있음을 알 수 있었다.. 그런데 그걸 오류로 바로 표시해주고 어떻게 수정해야하는지까지 친절하게 알려줘서 여러 팀원들과 협업시 적용해둔다면 코드 컨벤션을 통일시켜 보다 일관화된 스타일의 네이밍, 코드들로 구성할 수 있을것 같다는 생각이 들었다.

이 방식을 적용후 다른 프리코스 참여자분들의 PR 과 코드리뷰를 참고하여 내 코드를 수정해보는데 프리코스에 참여하길 정말 잘했다는 생각이 든다. 👍

레퍼런스

blog
Understanding Peer Dependencies in JavaScript
조니 - Peer Dependencies 에 대하여
sunohvoiin - 코딩 컨벤션과 ESLint

docs
eslint docs