eslint 셋팅 관련 에러

보통 eslint는 잘못된 문법을 자동으로 수정하기 위해 사용하고 Prettier는 팀원간의 코딩 컨벤션을 맞추기 위해 사용한다.
그러나 eslint에 포맷팅 기능이 포함되어 있어서 prettier와 같이 사용하려고 하니 충돌이 발생해 자꾸 에러가 났다.

이를 해결하기 위해서는 eslint에 prettier 설정을 추가해주는 작업을 해야 한다.

npm i eslint prettier-eslint eslint-config-prettier eslint-plugin-prettier --save-dev

• eslint-config-prettier
  ESLint와 Prettier가 충돌할 수 있는 설정들을 비활성화 함

• eslint-plugin-prettier
  Prettier 를 별도로 실행하지 않고 ESLint 의 플러그인으로 등록하여 실행하는 방법으로, ESLint 실행으로 Prettier의 포맷팅 기능까지 사용할 수 있게 됨
  
  

그리고 .eslintrc.js 파일의 extends 값에 "prettier"를 추가해주면 된다.

"extends": ['prettier'],

그 외의 에러

JSX not allowed in files with extension '.js'

App.js 파일에서 jsx 문법을 사용했더니 발생한 에러다.
파일 확장자를 .jsx로 변경하거나 jsx-filename-extension 규칙을 설정하여 JSX에 .js 확장명을 허용하게 하면 된다.

"rules": {
  "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
}

'React' must be in scope when using JSX

JSX는 자바스크립트 문법의 확장으로 ECMA 표준이 아니다. 따라서 바벨과 같은 툴로 JSX를 자바스크립트로 변환해야 한다. 바벨이 JSX가 사용되었음을 알고 이를 변환하도록 하기 위해서는 React를 임포트해주어야 한다.

import React from 'react';

Expected linebreaks to be 'LF' but found 'CRLF'

나는 윈도우를 사용하고 있는데 윈도우는 CRLF로, 맥에서는 LF로 파일을 저장하기 때문에 발생하는 개행 관련 에러다.

1. 에러 무시하기

"rules": {
	'linebreak-style': 0,
}

2. 따로 규칙 설정? (추후에 추가)

3. 환경설정에서 개행 설정 변경하기 (LF로)