ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • eslint
    Project using node.js/Cloning Youtube 2020. 8. 20. 10:45

    소개

      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

     

    참고 자료

     

    소스 코드

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

    'Project using node.js > Cloning Youtube' 카테고리의 다른 글

    Node.js의 Router  (0) 2020.08.21
    다양한 middlewares  (0) 2020.08.20
    nodemon  (0) 2020.08.20
    babel  (0) 2020.08.20
    gitignore  (0) 2020.08.19

    댓글

Designed by Tistory.