ESLINT + Prettier 환경설정

나만의 ESLINT 만들기

// eslint.json
{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "prettier", "react"],
  "parserOptions": {
    "project": ["tsconfig.json"],
    "createDefaultProgram": true,
    "sourceType": "module",
    "ecmaVersion": "latest"
    // "tsconfigRootDir": "__dirname"
  },

  "env": {
    // 전역객체를 eslint가 인식하는 구간
    "browser": true, // document나 window 인식되게 함
    "node": true,
    "es6": true
  },
  "ignorePatterns": ["node_modules/", "next.config.js", "sw.js", "workbox-7c2a5a06.js", "i18n.tsx"], // eslint 미적용될 폴더나 파일 명시
  "extends": [
    "airbnb",
    "airbnb-typescript",
    "airbnb/hooks",
    "plugin:@typescript-eslint/recommended", // ts 권장
    "plugin:prettier/recommended", // eslint의 포매팅을 prettier로 사용.
    "prettier", // eslint-config-prettier prettier와 중복된 eslint 규칙 제거
    "eslint:recommended",
    "next"
  ],
  "rules": {
    // <ChildrenComponent {...props} /> 제한
    "react/jsx-props-no-spreading": ["off"], // props로 받은 것 바로 props로 넘기기 허용
    // 경고표시, 파일 확장자를 .ts나 .tsx 모두 허용함
    "react/jsx-filename-extension": ["warn", {"extensions": [".ts", ".tsx"]}],
    "no-useless-catch": "off", // 불필요한 catch 못쓰게 하는 기능 끔
    "react/jsx-uses-react": ["off"],
    "@typescript-eslint/strict-boolean-expressions": [
      2,
      {
        "allowString": false,
        "allowNumber": false
      }
    ],
    "linebreak-style": 0, // OS 별로 다른 방식의 줄바꿈 설정
    "import/extensions": 0, // 파일 확장자 명시
    "import/prefer-default-export": 0, // export default 권장
    "import/no-extraneous-dependencies": 0, // 테스트 또는 개발환경을 구성하는 파일에서는 devDependency 사용을 허용
    "react/react-in-jsx-scope": 0, // import React 안해도 됨
    // div태그나 span태그는 태그 자체로써의 의미가 없다. 이러한 경우 role 속성을 추가함으로써, 의미를 부여할 수 있는데. 이를 강제하는 규약이다.
    "jsx-a11y/no-static-element-interactions": 0,
    // onClick 이벤트를 사용하기 위해서는 onKeyUp, onKeyDown, onKeyPress 이벤트 중 하나 이상을 같이 사용해야 한다는 규약이다. 웹 접근성과 관련이 있는 규약이다.
    "jsx-a11y/click-events-have-key-events": 0,
    "jsx-a11y/no-noninteractive-element-interactions": 0
  }
}

// .prettierrc
{
  "arrowParens": "avoid",
  "bracketSpacing": false,
  "endOfLine": "auto",
  "htmlWhitespaceSensitivity": "css",
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "printWidth": 80,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "useTabs": false,
  "vueIndentScriptAndStyle": true,
  "rangeStart": 0,
  "requirePragma": false,
  "insertPragma": false,
  "overrides": [
    {
      "files": "*.json",
      "options": {
        "printWidth": 200
      }
    }
  ]
}

// settings.json
{
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true, // eslint
    "source.fixAll.stylelint": true // Stylelint
  },
  "eslint.workingDirectories": [
    // 보통 이렇게 디렉토리 설정을 안해서 자동고침이 안된다
    {
      "mode": "auto"
    }
  ],
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.formatOnType": true
}