eslint에서 Delete `CR`이 나오는 문제해결(개인기록)

 VScode에서 Delete 'CR'이 나오는 문제 해결 방법

VScode에 AirBnb의 esLint를 적용하던중에 Delete CR이라는 알수없는 에러가 발생했었다.

그래서 우리의 친구 GPT한테 물어보니 Window와 Unix/Linux 운영 체제 간의 줄바꿈 방식 차이로 발생하는 문제라고 한다.

그래서 여러 삽질을 하면서 해결하였는데 이게 종합적으로쌓이다가 해결된거라 일단 성공했을때의 세팅을 기록해두려고 한다.

일단 핵심은 endOfLine을 "auto"로 두는게 핵심이지 않을까 싶다.

 

VSCode 설정 파일('.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
}

 

ESLint 설정 파일 ('.eslintrc.json')

{
  "extends": [
    "next/core-web-vitals",
    "airbnb",
    "airbnb/hooks",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "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, // 추가: 탭 크기를 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"
      }
    }
  }
}

 

Prettier 설정 파일 ('.prettierrc')

{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 80,
  "tabWidth": 2,
  "semi": true,
  "endOfLine": "auto",
  "useTabs": false // 추가: 탭 대신 공백 사용
}