Javascript Linter 조사

자바스크립트는 인터프리터 언어에 속하기 때문에, 런타임에 에러가 발생할 확률이 높다. 따라서, LINT TIME 즉, 소스 코드를 작성할 때, 사전에 에러들을 발견하고 해결하는 것이 중요하다.

자세한 내용은 아래 두 링크를 참고하자.

[코드스피츠] Compile Language vs Script Language

 

GitHub - hochan222/Everything-in-JavaScript: Everything in JavaScript

 

린트(lint): 소스 코드에 문제가 있는지 탐색하는 작업

린터(linter): 린트 작업을 도와주는 소프트웨어 도구, 정적 타입 분석 도구이다.

 

자바스크립트에서 쓸 수 있는 linter 종류에는 JS Lint, JSCS, JS Hint, ESlint 등이 있다.

• JSLint
• JSHint
• ESlint
• JSCS

JSLint

Douglas Crockford님이 2002년에 만드신 Javascript 정적 분석 도구이다. 거의 최초의 Javascript 구문 검사기이다. 규칙이 매우 엄격해서, 이후 조금 규칙이 느슨한 JS Hint 가 만들어졌다.

 

• Github: https://github.com/jslint-org/jslint
• 웹사이트: https://www.jslint.com/

https://www.jslint.com/

JSHint

Anton Kovalyov님이 2011년에 JSLint를 fork해서 만든 Javascript 정적 분석 도구이다. JSHint는 JavaScript 코드의 오류 및 잠재적인 문제를 감지하는 커뮤니티 기반 도구이다. JSHint 생성의 주요 동기는 개발자가 조금 더 코드를 분석하는데 도움이 될 수 있도록, 느슨하게 여러 설정들을 설정할 수 있는데에 있다. 

• Docs: https://jshint.com/docs/
• Github: https://github.com/jshint/jshint
• 웹사이트: https://jshint.com/

https://jshint.com/

ESLint

Nicholas C. Zakas님이 2013년에 만드신 Javascript 정적 분석 도구이다. JSLint와 JSHint 모두 코드 품질 및 코딩 스타일에 대한 추가 규칙을 만드는 기능이 부족했다. JSHint에 기여하다가 부족함을 느낀 Nicholas C. Zakas님은  모든 규칙을 구성할 수 있고 런타임에 추가 규칙을 정의하거나 로드할 수 있는 새로운 린팅 도구인 ESLint를 만들었다. JSHint와 JSCS에 있는 기능들이 모두 제공된다.

 

현재 Javascript에서 Linter를 평정했으며, Github Star는 18.9k이다(Used by: 5.4m, Contributor: 881). ESLint는 JSLint, JSHint, JSCS의 상위 호환이다. 따라서, ESLint의 세부 문법만 밑에서 알아보겠다.

 

• DEMO: https://eslint.org/demo
• Github: https://github.com/eslint/eslint
• 웹사이트: https://eslint.org/

 

ESLint 기본 설치/사용법은 아래 링크를 참고하자.

https://egas.tistory.com/13?category=499864 

ESLint를 설정해보자!

 

JSCS

Marat Dulin님이 2014년에 만드신 코드 스타일 Linter이다. Google, Airbnb, jQuery와 같은 다양한 프로젝트/회사/팀의 코드 스타일 프리셋 툴을 가져와 사용하거나 스타일을 커스터마이징을 할 수 있다. JSLint와 JSHint는 Best Practice를 제공하는데 목표가 있는데 비해서, JSCS는 코딩 스타일만 명시해주고, 수정하는 방법은 제공하지 않는다. 2016년에 JSCS 팀은 ESLint 프로젝트에 합류했고, 이후 JSCS 도구의 유지 관리를 중단했다.

 

• Github: https://github.com/jscs-dev/node-jscs
• 웹사이트: https://jscs-dev.github.io/

jscs-dev.github.io

---

ABOUT ESLint

 

ESLint 설치하기

yarn add -D eslint

eslint --init으로 기본 config file을 생성해주자.

yarn eslint --init

자신에게 알맞은 옵션들을 설정하면 아래 파일이 자동으로 만들어진다.

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'airbnb-base',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: [
    '@typescript-eslint',
  ],
  rules: {
  },
};

package.json에 scripts 를 추가해주자.

// package.json 
... 
  "scripts": { 
    "lint": "eslint . --fix" 
  }, 
...

Prettier와 통합하기

Prettier는 단독 CLI 도구가 아닌 일반적으로 ESLint와 같은 린터(Linter)와 통합해서 사용하는 경우가 많다.

Prettier와 ESLint 통합을 위한 2개의 패키지를 설치한다.

yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier

.eslintrc.js에 extends 옵션을 추가해준다.

// .eslintrc.js 
... 
"extends": ["plugin:prettier/recommended"], 
...

기존 설정된 extends 옵션보다 우선하려면 배열 맨 뒤에 추가하면 된다.