📃 결과물

esLint,prettier 설치 후 오류확인 가능한 코드

📃 목표

esLint , prettier 를 설치해서 코드의 오류를 알아낼 수 있다.

📃 과정

ESLint 공식 사이트

동영상 강의 처음에 global로 eslint 설치하는데 댓글보니까 아니였다. 댓글보면서 약간의 삽질을 하면서 과정과 관련 내용을 다시 정리해서 올려놔야겠다고 생각했다. 댓글로 알려주신 분들 다들 사랑 ㅠ

강의에서는 글로벌로 처음에 설치하는데 global -g 이 아닌 local로 설치하면 된다.

elint는 JS의 오류를 감지해주고 , prettier는 vscode의 확장 프로그램인데 자동 줄정렬 등 코드를 정리해주는 프로그램이다.

1. eslint 설치

$npm install eslint -D

2. init 생성

$ npx eslint --init

# or

$ yarn run eslint --init

질문들에 enter 치면서 설치하면 .elintrc.js 파일이 생긴다.

3. prettier 확장 프로그램 설치
   

설정의 Format On Save를 체크해줘서 저장 될때마다 prettier가 코드정리를 실행 할 수 있게 체크 해준다.

4. 추가 모듈 설치

npm install eslint-plugin-prettier -D
// prettier를 eslint 규칙으로 실행 시켜 주는 모듈

npm install eslint-config-prettier -D
/ prettier와 eslint의 충돌점을 보완해주는 모듈

📃 생성된 eslintrc 파일

rules의 no-console을 off 하지 않으면 console.log(error) 시에도 오류가 나더라. 요런 규칙을 사용하지 않겠다고 정의 해주는 부분이라 rules 가 중요한거 같다.

//eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: ["eslint:recommended", "plugin:prettier/recommended"],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: "module",
  },
  rules: {
    "prettier/prettier": "off",
    "no-console": "off",
    "spaced-comment": "off",
    "no-else-return": "off",
  },
};