[카우치 코딩]ESLint와 Prettier

트릴로니·2022년 6월 13일
0

카우치코딩

목록 보기
7/8

ESLint

  • 정적으로 코드를 분석
  • 자바스크립트 문법에서 에러난 곳을 표시해 준다
  • 팀 프로젝트를 진행할 때 팀원사이 코딩 스타일을 일관성을 유지하도록 도와주기 때문에 ESLink를 설정해두면 한 사람이 코딩한 것과 같은 결과를 얻을 수 있다.
  • ESLint의 장점으로는 확장성이 있다. 다양한 플러그 인을 사용할 수 있기 때문에 새로운 규칙을 추가할 수 있다.
{
	"parserOptions": 자바스크립트 버전, 모듈 사용 여부 등을 설정,
    "extends": 확장 설정,
    "env": 프로젝트의 사용 환경 => ex)browser, node...
    "rules": extends와 plugins에 대한 세부 설정을 변경하는 코드 설정,
    "plugins": 플러그인 설정 => ex) html, import, react...
    "globals": 전역 변수 넣어준다. ESLint는 기본적으로 전역변수의 사용을 에러로 처리하기 때문에 외부 라이브러리를 사용하면 여기에 전역변수를 넣어 에러 표시를 방지해야 한다.
}

prettier

  • 코드 포멧터로 개발자가 작성한 코드를 정해진 코딩 스타일을 따르도록 변환해주는 도구
  • 프리티어는 기존 코드 포멧터와 달리 설정 여지가 거의 없다. 즉 디폴트로 정해놓은 코딩 스타일에서 크게 벗어나기 어렵다. 그래서 가장 많이 쓰이는 코드 포멧터이다.

ESLint와 Prettier설정하면서 해결한 에러

  • parsing error: unexpected token < eslint
  • 'import' and 'export' may appear only with 'sourceType: module'
    : es6를 사용할 경우 eslint에서 오류 날 수 있음
    해결방법
    1. npm i babel-eslint -D 설치
    2. eslintrc.js에서 eslint 환경 설정 변경
parserOptions: {
    parser: "babel-eslint",
    sourceType: "module",
    allowImportExportEverywhere: true,
    ecmaVersion: 2018,
  },

참조
참조

  • Error: "prettier/react" has been merged into "prettier" in eslint-config-prettier 8.0.0

: v8부터는 prettier로 모든 config가 통합되었다는 의미 같음
"prettier/..."로 시작하는 모든 extends를 지우면 된다.
해결방법
다른 거 다 지우고 extends에 다음만 남겨두었다

  extends: ["react-app", "prettier"],

참조

0개의 댓글