React 사용시 사용 툴 2 ESLint

2. ESLint

    ESLint는 자바스크립트의 코드를 분석하고 잠재적인 오류나 버그를 찾는데 "도움"을 주는 정적 분석 툴이다

    정적 분석 툴이기에 간단한 문법적 오류나 복잡한 코드 스타일에 의해 발생할 가능성이 높은 버그만 찾을 수 있으며,

    프로그램이 실행 중에 발생하는 버그는 알 수 없으며 비지니스 로직에서 문제점을 찾을 수 없다.

    즉, 보조적인 툴로써만 사용하도록 하고 맹신하지 말자

 

설치

    프로젝트에서

    npm install eslint --save-dev.  하여 설치 후

    npx eslint --init    를 하면 ESLint를 설정하기 위해 필요한 라이브러리를 설치할지 물어본다.

    차례대로 자신의 프로젝트에 맞게 설정하면 된다.

 

설치후 .eslintrc.js 파일이 자동으로 생성되는 것을 확인하면

EsLint 에 react 의 버전을 셋팅해주고, 룰등을 추가 할수 있으며

변경을 원한다면 ESLint 와 타입스크립트의 공식문서를 참고하도록 하자.

 - ESLint : https://eslint.org/docs/latest/rules/ 

Rules Reference - ESLint - Pluggable JavaScript Linter

 - 타입스크립트 : https://github.com/sypescript-eslint/typescript-eslint/tree/main/packages/eslint-plugin#supported-rules 

 

리엑트 버전 17부터 import React from 'react'를 할 필요가 없어졌기 때문에 이 규칙을 사용하지 않도록 할 필요가 있다.

rules: {

    'react/react-in-jsx-scope': 'off',

}, 를 추가하고 해당 규칙에 대한 자세한 내용은 공식 문서를 참고할 것

 - react/react-in-jsx-scope : https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/react-in-jsx-scope.md 

 - Removing Unused React imports : https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#removing-unused-react-imports 

Introducing the New JSX Transform – React Blog

 

이후 package.json 파일내의 scripts 부분에 추가하고 실행하면 된다.

"scripts": {

    ...

    "lint": "eslint ./src",

    "lint:fix": "eslint --fix ./src"

}

 

lint 명령어는 src 폴더를 eslint 로만 검사하도록 설정했으며, lint:fix 명령어는 ESLint를 fix 옵션과 함께 사용하여 우리가 설정한 룰을 토대로 자동으로 수정하도록 설정한 것이다.

 

사용은 

npm run lint

npm run lint:fix