Javascript 프로젝트를 시작하기에 앞서 - package 설정(2) private field class를 가능하게!

이 글은 Javascript 프로젝트를 시작하기에 앞서 - package 설정 의 2탄입니다.

class 문법을 사용하면서 public/private class property 를 사용하는 일이 많아졌습니다. 이는 현재 stage3 에 해당하는 proposal 으로서, 공식적인 ECMAScript의 specification이 아닙니다. 하지만, stage3에 해당하는 proposal 이므로 사실상 recommended되는 문법이므로, babel 등의 transpile을 거친다면 사용하지 않을 이유가 없습니다. (Chrome에서는 공식적으로 지원하고 있습니다!)

다만, ECMAScript의 공식 specification이 아니므로 eslint에서 이를 적용하기 위해서는 parser를 @babel/eslint-parser로 지정해줘야 합니다. 또한 이에 해당하는 plugin인 또한 설치하여야 합니다.

// package.json

{
  ... 
  "devDependencies": {
    "@babel/core": "^7.14.0",
    "@babel/eslint-parser": "^7.13.14",
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@babel/plugin-proposal-private-methods": "^7.13.0",
    "eslint": "^7.26.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.22.1",
    "husky": "^6.0.0",
    "lint-staged": "^11.0.0",
    "prettier": "2.2.1"
  },
  "scripts": {
    "lint": "eslint --cache --fix .",
    "format": "prettier --write .",
    "prepare": "husky install"
  },
  "eslintConfig": {
    "env": {
      "browser": true,
      "es2021": true
    },
    "parser": "@babel/eslint-parser",
    "parserOptions": {
      "ecmaVersion": 2021,
      "sourceType": "module",
    },
    "extends": [
      "airbnb-base",
      "prettier"
    ]
  },
  "babel": {
    "plugins": [
      "@babel/plugin-proposal-class-properties",
      "@babel/plugin-proposal-private-methods"
    ]
  },
  "prettier": {},
  "lint-staged": {
    "*.js": "eslint --cache --fix",
    "*.{js,json,md,css,html}": "prettier --write"
  }
}