[Next.js, TypeScript] airbnb 및 커스텀 TS 세팅

목차

 

 

 

 

 

 

 Next.js + TS 환경에서 airbnb형식 적용하기

 

설치방법

npm install --save-dev eslint prettier eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-prettier eslint-config-prettier eslint-import-resolver-typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-airbnb-typescript  --legacy-peer-deps

 

.eslintrc.json

{
  "extends": [
        "next/core-web-vitals",
        "airbnb",
        "airbnb-typescript",
        "airbnb/hooks",
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:react/recommended",
        "plugin:prettier/recommended",
        "prettier"
  ],
  "plugins": ["@typescript-eslint", "prettier"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    },
    "project": "./tsconfig.json"
  },
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "auto",
        "singleQuote": true,
        "trailingComma": "all",
        "tabWidth": 2,
        "useTabs": false // 추가: 탭 대신 공백 사용
      }
    ],

    "react/react-in-jsx-scope": "off",
    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "react/jsx-filename-extension": [1, { "extensions": [".tsx", ".jsx"] }],
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
    ]
  },
  "settings": {
    "react": {
      "version": "detect"
    },
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      },
      "typescript": {
        "alwaysTryTypes": true,
        "project": "./tsconfig.json"
      }
    }
  }
}

 

.prettierrc

{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 80,
  "tabWidth": 2,
  "semi": true,
  "endOfLine": "auto"
}

 

VS Code에서 적용하려면?

.vscode/settings.json

{
  "editor.formatOnSave": true,
  "editor.tabSize": 2, // 탭 크기를 2로 설정
  "editor.insertSpaces": true, // 탭 대신 공백 사용
  "editor.detectIndentation": false, // 파일 내용에 따라 자동으로 들여쓰기 감지 비활성화
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "prettier.requireConfig": true
}

 

 커스텀 세팅

 

any를 허용하려면

.eslintrc.json에서 해당 아래 옵션을 넣어주면된다.

{
...생략
  "rules": {
    "@typescript-eslint/no-explicit-any": "off"
  },
... 생략
}

 

defaultProps declaration문제 eslint에서 옵션 끄기

react의 class형 컴포넌트에서 쓰이는 세팅으로 함수형을 쓰는 나에겐 필요없다고 생각하여

옵션을 비활성화하려고한다.

{
  "rules": {
    "react/require-default-props": "off"
  },

}

 

@typescript-eslint /no-unused-vars  변경

기본으로는 error로 되어있는것을 warning으로 수정하려고 한다.

 

{
  
  "rules": {
    "@typescript-eslint/no-unused-vars": "warn", // 전체 프로젝트에 적용
    "react/require-default-props": "off"
  },
  
}

설정하고 error에서 warning으로 잘 바뀐 모습

 

컴포넌트 arrowfunction 사용하기

컴포넌트가 function으로 정의되는 모습 arrowfunction으로 정의해도 위 세팅으로 바뀐다.

 

{
	"rules" : {
            "react/function-component-definition": [
          "error",
          {
            "namedComponents": "arrow-function",
            "unnamedComponents": "arrow-function"
          }
        ]
    }
}

위부분을 추가해준다면

 

해당 모습으로 arrowfunction이 자동으로 적용된다. 이제 arrowfunction으로 만들어도 function으로 되던 현상을 수정 할 수 있다.

 

Prop spreading is forbidden 옵션 끄기

위 옵션으로 세팅하면 Prop spreading is forbidden이라면서 prop spreading을 막는다.

하지만 라이브러리를사용하면서 해당 방식으로 선언하는 방법이 있기에 해당 옵션을 끌려고한다.

 

{
	"rules" : {
    	"react/jsx-props-no-spreading": "off"
    }
}

적용하고 나니 사라진 모습