eslint

소개

  eslint는 JS 코드를 clean하게 만들어준다. 기본적인 syntax error는 VSC가 알려줄 것이다. 하지만 문법적인 오류는 아니지만 개발자도 인간이고 자기만의 잘못된 습관이 있다. 더더욱 초보 개발자는 더 심하다. 이러한 습관 때문에 코드가 더러워질 수가 있다. 이러한 문제점을 찾고 고칠 수 있도록 알려주는 툴이 eslint다.

설치 및 설정

#npm install eslint eslint-config-prettier eslint-plugin-prettier prettier -D

VSC의 Extension에서도 eslint를 설치해준다.

VSC eslint

 

VSC의 settings.json에서 밑에 코드를 추가해준다.

settings.json

 

.eslintrc.js파일을 만들고 다음과 같이 코드를 추가해준다.

module.exports = {
  env: {
    browser: true,
    es6: true,
    node: true,
  },
  extends: ["eslint:recommended", "plugin:prettier/recommended"],
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: "module",
  },
  rules: {
    "no-console": "off",
  },
};

 

  마지막으로 다음 패키지를 설치해준다. prettier도 코드를 예쁘게 만들어주는 extension이다. 그러다 보니 prettier와 eslint와 충돌하게 될 때가 있다. 이것을 해결하기 위해 다음과 같은 패키지를 설치해주는 것이다. prettier를 포함한 VSC의 유용한 extension은 밑에 링크를 달아두겠다. 

// JS 문제 감지 모듈
npm install eslint -D

// 코드 정리 모듈
npm install prettier -D

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

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

 

참고 자료

• Recommended VSC Extension

 

소스 코드

https://github.com/zpskek/wetube-v3/commit/8db162ec4a8eca49e975a7d1c8e9e044871cc023