Frontend Convention

왜 ESLINT,Prettier가 필요할까?

모두가 기본 Prettier 설정을 쓰고 있다면 괜찮지만,
단순히 "", '' 입력도 각자 갖고있는 컴퓨터 별로 저장시 변경되는 스타일이 다르기도 하다.
또한 삼항연산자 혹은 길어지는 코드에도 어디에서 잘라서 다음 줄로 넘기는 것도 다르다.
마지막으로 잘못된 변수선언, hook 사용을 막아준다.

---

Before Setting

기본 VSCODE prettier 설정과 겹치는 부분 있을것으로 예상.
다음과 같은 작업 수행

1. cmd(ctrl) + p
2. setting.json 입력
3. 다음 항목의 코드 추가/수정

"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
    "editor.formatOnSave": true
  },
  "[javascriptreact]": {
    "editor.formatOnSave": false
  },
  "eslint.validate": ["vue", "html", "javascript", "javascriptreact"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.workingDirectories": ["frontend"],

---

규칙

규칙공식문서

• es2021: adds all ECMAScript 2021 globals and automatically sets the ecmaVersion parser option to 12.
• browser: browser global variables.
• node: Node.js global variables and Node.js scoping.
• "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
• "react-hooks/exhaustive-deps": "warn", // Checks effect dependencies
• "@typescript-eslint/explicit-module-boundary-types": "off" // ignore missing return type

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "plugins": ["react", "@typescript-eslint", "prettier", "react-hooks"],
  "extends": [
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier",
    "plugin:react-hooks/recommended"
  ],
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module",
    "project": ["tsconfig.json"]
  },
  "ignorePatterns": ["dist/", "node_modules/", "webpack.config.js"],
  "rules": {
    "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
    "react-hooks/exhaustive-deps": "warn", // Checks effect dependencies
    "@typescript-eslint/explicit-module-boundary-types": "off" // ignore missing return type
  }
}