* JavaScript 개발 환경 구성하기

1. eslint 적용하기

• eslint란 코드의 규칙을 검사하는 오픈 소스 프로젝트 입니다.
• 코드를 분석해 문법적인 오류나 안티 패턴을 찾아주고 일관된 코드 스타일로 유지해 줍니다.

• VSCode 에 확장 기능에서 ESLint 를 검색 후 설치 합니다.
• 설치 후 터미널에 아래의 코드를 입력합니다.

npm i -D babel-eslint eslint eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard​

• .eslint 라는 파일을 생성됩니다.
  • parser: eslint 의 입맛에 맞게 코드를 읽고 변환해줍니다.
  • parserOptions: 읽어올 코드에 대한 정보를 나타냅니다.
  • plugins: 기본 규칙외에 부가적인 규칙을 입력합니다.
  • env: 개발할 코드의 환경을 입력합니다.
  • extends: 베이스가 되는 규칙을 입력합니다.
  • rules: 유저가 정의한 규칙을 입력합니다.
• 코드를 규칙인 "extends"{eslint: recommended} + rules 에 기반하여 검사합니다.
• 규칙에 어긋나는 코드에 삘간줄을 그어줍니다.
• 또한 cli 명령어를 이용하여 검증이 가능합니다.

// package.json
(... 생략 ...)
"scripts": {
   "lint": "eslint"
}
(... 생략 ...)

• 터미널에 npm run lint 를 입력해서 검증합니다.

1. prettier 적용하기

• prettier란 사용자의 편의를 위해 코드의 줄 간격이나 행을 자동으로 깔끔하게 정리하여 포맷팅 해주는 확장프로그램입니다.
• 코드를 정해진 방식대로 자동으로 정렬시켜주는 Code Formatter 입니다.

• VSCode 에 확장 기능에서 Prettier 를 검색 후 설치 합니다.
• 설치 후 터미널에 아래의 코드를 입력합니다.

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

• 그 후 .eslintrc 에 eslint-plugin-prettier 정보를 추가합니다.

{
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module"
  },
  "plugins": ["import", "node", "promise", "standard"],
  "env": {
    "browser": true,
    "node": true,
  },
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "no-console": "error"
  }
}

• .prettierrc 라는 설정 파일을 생성하고 아래의 코드를 입력합니다.

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

• prettier 도 cli 명령어를 이용하여 실행 가능합니다.

(... 생략 ...)
"script": {
  "lint": "eslint",
  "prettier": "prettier"
}
(... 생략 ...)

• 터미널에 npm run prettier 를 입력해서 검증합니다.