2) 코딩컨벤션 적용하기

 

ESLINT란?

Lint는 보푸라기라는 뜻인데 프로그래밍 쪽에서는 에러가 있는 코드에 표시를 달아놓는 것을 의미한다. 즉 ESLint는 자바스크립트 문법 중 에러가 있는 곳에 표시를 달아놓는 도구를 의미한다.

코드를 분석해 문법적인 오류나 안티 패턴을 찾아주고 일관된 코드 스타일을 유지(포맷팅)하여 개발자가 쉽게 읽도록 코드를 만들어준다.

 

첫 프로젝트는 두 명이서 진행하기도 했고, 컨벤션을 지키기보다는 기능구현에 시간을 쫒겨 클린코드나 컨벤션에 대한 고민을 하지 못했었다. Google의 javascript guide 문서를 찾아보며 어떠한 naming practice가 있는지, 또는 어떤 스타일이 선호되는지에 대해 훑어보았다.

Google Style Guide 적용하기

1. 하단 명령어를 통해 npm에 eslint config 설치 후

$ npm install --save-dev eslint eslint-config-google

 

2. { "extends": "google" } 로 package.json에 구글컨벤션 설정을 등록해준다.

  "eslintConfig": {
    "extends": [
      "google",
    ]
  },

 

3. 이후 실행시켰을 때 기존의 형식에서 에러가 났던 부분 (=구글 스타일가이드와 맞지 않았던 부분)은 다음과 같다

* Strings must use single quote

* Trailing spaces not allowed Maximum allowed line length is 80

* Var - let or const

* Multiple spaces between code Trailing comma, semicolon for compiling Space before opening brace

 

4. 이를 자동으로 fix해주기 위해서 아래 설정을 추가해주었다.

"scripts": { 
    "fix": "eslint --fix --ext .js,.vue src" 
 },

 

5. 이후 터미널에서 아래 명령어를 실행시켜주면 끝!

npm run fix

다만 maximum length 80조건의 경우 자동 픽스해주지 않으므로 수기로 일일이 수정해주어야 한다.

 

 

 

 

참고자료

https://ingg.dev/eslint/

[JS] ESLint 적용하기

https://github.com/google/eslint-config-google

GitHub - google/eslint-config-google: ESLint shareable config for the Google JavaScript style guide