CodeSquad Day 96 : Project 4 - Day 6

 

CodeSquad🔹Day 6

ESLint 에러 잡기

 

❓What is ESLint?

• 작성한 JS 코드가 EcmaScript 재단에서 명시한 Specification에 부합하는지 검사하는 툴
  • 그래서 ES(EcmaScript) + Lint(에러가 있는 코드에 표시달아주는 것)
• 코드에 특정 스타일, 규칙을 적용해서 문제를 사전에 찾고 패턴을 적용시킬 수 있는 정적 분석 툴
  • 코딩 스타일을 직접 정할 수도 있음

 

😱Problems

• .eslintrc의 extends에 "prettier/@typescript-eslint", 를 넣어줬을 경우 에러를 잡아주지 못하고 있다. 이 옵션을 제거해야 에러가 뜨게 된다.

시도해 본 방법들

• plugin에 prettier가 없어서 추가해 보았다.
• "prettier/prettier": ["error", {}, { "usePrettierrc": true }], 도 rules에 추가해 보았다.

✅해결된 방법

error: "prettier/@typescript-eslint" has been merged into "prettier" in eslint-config-prettier 8.0.0 Code Example

• "prettier/@typescript-eslint" 는 “prettier” 에서 제거된 것이라서 그냥 제거를 하라고 한다.

❓궁금한 점 - extends 배열 내부 element의 순서

• 위 글에서는 prettier가 extends의 맨 마지막에 와야 한다고 되어 있다.
  • ❓순서가 어떤 식으로 영향을 미치는건지?
    • Make sure it’s the last item on the list so it can override other settings.

How to Set Up Airbnb Style Guide for React Projects

 

✨에러 해결하기

✅1. Missing file extension for …

• 파일의 익스텐션이 없다고 나온다
• 추가 고민거리 : 현재 extends의 plugin을 보면
• "plugin:import/errors", "plugin:import/warnings", "plugin:import/typescript", 이 세개가 있는데 "plugin:import/recommended", 이거 하나로 퉁칠 수 있을까?

"settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }

"react/jsx-filename-extension": ["warn", { "extensions": [".tsx"] }],

• setting 이 또 따로 되어 있어야 하는 듯하다
• import/extensions가 있고 import/resolver가 있는데 뭘 써야 할까

[Solved] eslint plugin import [import/extensions] Missing file extension after upgrade to v2.19.1

✅2. ‘React’ must be in scope when using JSX

"plugin:react/jsx-runtime", extends에 추가해서 해결 

eslint-plugin-react/react-in-jsx-scope.md at master · jsx-eslint/eslint-plugin-react

✅3. Function component is not a function declaration

• 함수를 const 로 쓰니까 에러남. 저장하니까 function으로 바뀜
• rules에 아래 추가하여 해결

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

Struggling with TypeScript, React, Eslint and simple Arrow Functions components

✅4. Prefer default export

export const theme = {
  color,
  fontSize,
  fontWeight,
};

• 위와 같이 작성했을 때 에러 발생
• "import/prefer-default-export": "off” 추가하여 해결

 

 

Reference

ESLint에 대해 알아보자