[Javascript] ESLint (.eslintrc)

 

[Javascript] ESLint (.eslintrc)

ESLint는 EcmaScript(javascript) 와 Lint를 합친 것으로 여기서 Lint는 에러가 있는 코드에 표시를 달아놓는 것을 의미한다.

즉 ESLint는 자바스크립트 문법에서 에러가 발생하면 표시해주는 도구이다.

ES는 EcmaScript로서, Ecma라는 기구에서 만든 Script, 즉, 표준 Javascript를 의미합니다.
즉 Javascript에 에러가 있는 코드에 표시를 달아놓는 것(Lint)을 의미한다.

이뿐만 아니라 전반적인 코딩스타일까지 지정할 수 있으므로 협업에 유용하다.

여러사람이 코딩을해도, 한사람이 코딩을 한것처럼 코드 룰을 정해준다.

다른 말로는 코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동 검출하는 도구다.

ESLint는 처음부터 유용하게 사용할 수 있는 스타일 가이드(built-in rule)을 제공하지만 개발자가 자신의 스타일 가이드를 작성할 수도 있다

 

 

 

 

.eslintrc의 주요 내용

• env: 사용 환경 의미
• extends : 확장 기능 사용
• parserOptions: 버전과 모듈 사용 여부
• plugins : 사용되는 플러그인
• rules : 세부 설정 (규칙) 추가

 

 

 

설치 / 생성 방법

• 명령어로 파일 만들기

// 커멘드 라인
npm install -D eslint // 설치

npx eslint --init // 설정 파일 초기 세팅

 

• 그냥 파일을 만들어서 적용하기

최상단에 .eslintrc 파일 만든다.

 

• 이후 vs코드등에서 필요한 익스텐션을 설치하거나 하면 됩니당

 

 

 

내가 이번에 사용한 ESLint 플러그인

1. eslint-plugin-import
   • 이 플러그인은 ES2015+의 import/export 구문을 지원하며, 잘못된 경로나 누락된 파일과 같은 문제들을 찾아냅니다.
   • 또한, import 순서와 그룹화, 중복된 import 등의 스타일 문제를 다룹니다.
2. eslint-plugin-react
   • React 특화 규칙을 제공하며, JSX 코드의 문제를 식별합니다.
   • 예를 들어, 사용하지 않는 변수, 잘못된 React Hooks 사용, 키 속성 누락, propTypes 정의 누락 등을 체크합니다.
3. eslint-plugin-react-hooks
   • React Hooks의 올바른 사용을 보장하기 위한 규칙을 제공합니다.
   • 주로 useEffect, useCallback, useState 등의 Hooks 사용 시 종속성 배열의 오류를 감지하고, 규칙을 위반하는 사용을 지적합니다.
4. babel-eslint
   • 바벨이 해석해서 최신문법으로 해도 에러나지 않게 해준다.
5. eslint-config-airbnb
   
   • 기존의 extends: ["eslint:recommended", "plugin:react/recommended"] 은 엄격함이 너무 약했다
   • 그래서 비교적 엄격한 extends: ["airbnb"] 사용
6. eslint-plugin-jsx-a11y
   • 웹 접근성(WAI-ARIA 규칙)을 준수하도록 돕습니다.
   • 예를 들어, 이미지에 대체 텍스트가 필요하거나 클릭 가능한 요소가 키보드로 접근 가능해야 하는 등의 규칙을 적용합니다. (스크린 리더 같은거를 위해서)

 

 

 

적용한 .eslintrc 

{
    "parser": "babel-eslint", // 바벨이 해석해서 최신문법으로 해도 에러나지 않게
    "parserOptions": {
        "ecmaVersion": "latest", // 최신버전 문법으로 사용하겠다.
        "sourceType": "module", // import export 모듈로 사용하겠다. script소스가 아니라.
        "ecmaFeatures": {
            // 특수한 기능
            "jsx": true // jsx를 사용한다.
        }
    },
    "env": {
        // 환경 // 돌아가게 하려는 관련
        "browser": true,
        "node": true,
        "es6": true
    },
    "extends": [
        "airbnb" // 얘네는 강한 규제
        //"eslint:recommended", 얘네는 좀 약함
        //"plugin:react/recommended"
    ], // 남들이 만들어 놓은 규칙 따른 다는 의미, 기본규칙들
	"plugins": ["import", "react-hooks"], // react는 위에서 썼으니까 빼도 됨
    "rules": {
        // 너무 엄격할 필요 없는 것들은 풀어주는 규칙 적용
        "react/react-in-jsx-scope": "off",
        "jsx-a11y/label-has-associated-control": "off",
        "jsx-a11y/anchor-is-valid": "off",
        "no-console": "off",
        "no-underscore-dangle": "off",
        "react/forbid-prop-types": "off",
        "react/jsx-filename-extension": "off",
        "react/jsx-one-expression-per-line": "off",
        "react/jsx-props-no-spreading": "off",
        "object-curly-newline": "off",
        "linebreak-style": "off",
        "no-param-reassign": "off",
        "max-len": [{ "code": 140 }]
    }
}

 

 

설명

parserOptions

• ecmaVersion: "latest"는 ESLint가 최신 ECMAScript 문법을 지원하도록 설정합니다. 이 옵션으로 최신 JavaScript 기능들을 사용할 수 있습니다.
• sourceType: "module"는 소스 코드가 ECMAScript 모듈을 사용한다는 것을 의미합니다. 이 설정은 import와 export 구문을 사용할 수 있게 합니다.
• ecmaFeatures: 여기서는 "jsx": true를 설정하여 JSX 문법을 사용할 수 있게 합니다. 이는 React 컴포넌트를 작성할 때 필수적인 설정입니다.

env

환경 설정을 통해 ESLint가 코드가 실행될 환경을 인식하도록 합니다:

• browser: 브라우저 전역 변수들(window, document 등)을 사용할 수 있습니다.
• node: Node.js 전역 변수와 Node.js 스코프를 사용할 수 있습니다.
• es6: ES6(ES2015) 이상의 기능들을 사용할 수 있게 합니다. 이 설정은 Set, Map 등과 같은 새로운 JavaScript 데이터 구조를 사용할 수 있게 합니다.

extends

• "eslint:recommended"와 "plugin:react/recommended"는 ESLint와 React 플러그인이 제공하는 권장 규칙을 프로젝트에 적용합니다. 이 규칙들은 일반적인 문제를 방지하고, 일관된 코드 스타일을 유지하는 데 도움을 줍니다.

plugins

• "import": import/export 구문과 관련된 문제를 식별합니다. 예를 들어, 잘못된 파일 경로나 누락된 파일 등을 찾아낼 수 있습니다.
• "react-hooks": React의 Hooks 사용에 대한 규칙을 제공합니다. 예를 들어, useEffect나 useState 등의 사용 방법을 올바르게 유지하는 데 필요합니다.

rules

• "react/react-in-jsx-scope": "off"로 설정하여, React 버전 17 이상에서 새롭게 적용된 JSX 변환으로 인해 React를 JSX 스코프에 명시적으로 포함할 필요가 없음을 지정합니다.

이 설정 파일은 표준적인 React 프로젝트에 필요한 ESLint 설정의 좋은 예시를 제공하며, 프로젝트의 코드 품질을 유지하고 개발 과정에서 발생할 수 있는 일반적인 실수를 미리 감지하는 데 큰 도움이 됩니다.

 

 

 

이후 추가적인 플러그나 내용들은

필요할때마다 검색해서 추가하거나 수정하면 될 듯합니다.

 

 

 

 

 

 

 

 

 

참조!

https://velog.io/@blackeichi/ESLint%EB%9E%80

ESLint란?