더블리의 12층

node 프로젝트 시작하기 전에 아래와 같이 환경을 구성하고 구현하자

yarn init -y  
yarn add koa  
yarn add --dev eslint  // dev는 개발용 의존 모듈로 설치, package.json에서 dev dependencies 쪽이 모듈의 버전 입력
yarn run eslint --init // javascript 문법 검사, 깔끔한 코드 작성

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

을 추가하고 Prettier에서 관리하는 코드 스타일은 ESLint에서 관리하지 않도록 설치

$ yarn add eslint-config-prettier 

.eslintrc.json의 파일은 아래와 같이 설정

{
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "node": true
  },
  "extends": ["eslint:recommended", "prettier"],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaVersion": 2018
  },
  "rules": {
    "no-unused-vars": "warn", // 설정하지 않으면 사용하지 않는 변수에 대해서 Error
    "no-console": "off" // console.log를 사용하는것을 지양함.
  }
}

EsLint, Prettier는 VS Code에서 React를 개발할때 설치하면 좋은 확장 툴이다.
ESLint는 문법 검사, Prettier는 코드 스타일 자동 정리를 해주는 툴이다.

여러 개발자들이 동시에 개발하는 프로젝트라면 Prettier는 무조건 필수라고 할 수 있다.
git에서 merge할때 indentation 관련한 코멘트를 받으면 ... 창피

ESLint는 설치하고 바로 사용하면 되고, Prettier의 경우에는 프로젝트에 설정을 해야 한다.
프로젝트의 root directory에서 .prettierrc라는 파일을 설정하고
아래와 같이 프로젝트에서 사용할 prettierrc를 정의를 하면된다.

prettierrc example

{
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "singleQuote": true,
  "bracketSpacing": true,
  "jsxBracketSameLine": true
}

prettier에 관련한 옵션은 다음 사이트에서 확인

코드 자동으로 정렬

VS Code에서는 코드를 저장할때 자동으로 정렬을 해준다.

[Code] - [Preference] - [Settings] 
에서 format on save 을 검색하고 체크