Webpack 이해하기 (5) - ESLint rule 적용

5. ESLint 사용하기

[1] ESLint ?

JS 코드의 버그를 미리 찾아내고, 코드 스타일과 일관성을 유지하는 데 도움을 줌.

[2] ESLint 적용을 위한 패키지 설치하기 (for React with TS)

yarn add -D eslint 
yarn add -D eslint-plugin-react eslint-plugin-react-hooks   // react, hooks lint 규칙 지원
yarn add -D @typescript-eslint-parser @typescript-eslint/eslint-plugin  // ts parser , ts lint 규칙 지원 
yarn add -D eslint-plugin-import eslint-plugin-jsx-a11y  // ESModule 사용 , 웹 접근성 린팅 지원 

 

eslint-plugin-react

• React 특화 규칙을 ESLint에 추가

eslint-plugin-react-hooks

• React Hooks API 사용에 대한 linting 규칙을 제공
• 의존성 배열 오류와 같은 일반적인 실수를 방지, hook의 올바른 사용 보장

@typescript-eslint/parser

• Typescript 코드를 분석하기 위한 ESLint parser
• ESLint가 TS코드를 이해하고 분석할 수 있게 해줌

@typescript-eslint/eslint-plugin

• TypeScript 코드에 특화된 ESLint 규칙을 제공
  
  

eslint-plugin-import

• ESModule 방식 관련 잘못된 경로나 이름으로 된 임포트, 중복 임포트, 미사용 임포트 등을 식별하고, 일관된 임포트 순서와 같은 규칙을 적용하는데 도움을 줍니다.

eslint-plugin-jsx-a11y

• react JSX 코드 상 웹 접근성 관련 린팅 룰 추가
  
  

이제 위 패키지들이 모두 설치되었다면, ESLint config파일을 정의할 수 있습니다.

[3] .eslintrc.js 파일 추가

// 최소 사용의 플러그인 설정 예시
module.exports = {
  parser: '@typescript-eslint/parser', // parser가 무엇이 적용되어야 하는지 정의 
  parserOptions: {
    ecmaVersion: 2020, //ES2020 문법을 지원
    sourceType: 'module', // ESModule 방식의 import export 구문 지원 
  },
  settings: {
    react: {
      version: 'detect', // 사용중인 리액트 버전을 자동으로 감지 
    },
  },
// extends 배열은 ESLint에 여러 플러그인과 규칙 세트를 적용합니다. React, TypeScript, import 관련 규칙, 접근성 규칙, 그리고 Prettier와의 통합을 포함합니다.
  extends: [
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:import/errors',
    'plugin:import/warnings',
    'plugin:import/typescript',
    'plugin:jsx-a11y/recommended',
    'plugin:eslint-comments/recommended',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended',
  ],
// 여기서는 몇 가지 ESLint 규칙을 덮어쓰거나, 비활성화, 또는 활성화합니다
  rules: {
    'no-unused-vars': 'off', // js 미사용 변수 규칙 비활성화(TS 사용하므로)
    '@typescript-eslint/no-unused-vars': ['error'], // ts미사용 변수규칙에 대해 에러표시
    '@typescript-eslint/no-var-requires': 'off', // TS에서 require문 사용 허용
    'react/prop-types': 'off', // prop types 규칙을 비활성화 (TS 타입시스템이 타입검사를 제공하므로 중복 설정이므로 비활성화)
    'react/jsx-uses-react': 'off', //JSX 코드가 있는 파일에서 React가 사용되고 있는지 검사 (17버전 이후 불필요, 새로운 JSX변환으로 인해 JSX를 사용하더라도 React를 사용하지않게 됨.)
    'react/react-in-jsx-scope': 'off',// import React from 'react'를 명시해야 하는 규칙을 해제 (17버전 이후 불필요).
  },
}

[4] package.json에 “lint” script옵션 추가

"scripts": {
    //"start": "webpack serve --config webpack/webpack.config.js --env env=dev ",
	  //"build": "webpack --config webpack/webpack.config.js --env env=prod",
		//"test": "echo \\"Error: no test specified\\" && exit 1",
    "lint": "eslint --fix \\"./src/**/*.{js,jsx,ts,tsx,json}\\""
  },

—fix : ESLint가 코드에서 발견된 문제들 중 자동으로 수정 가능한 것들을 수정합니다.

\"./src//*.{js,jsx,ts,tsx,json}\"** : ESLint가 검사할 파일들의 경로와 패턴을 지정합니다

• ./src/ : src폴더 내부를 가리킴
• ** : 하위 모든 디렉토리를 가리킴 
• *.{js,jsx,ts,tsx,json} : 표기한 모든 확장자에 대해 검사

[5] yarn lint 실행

• 지정한 경로의 모든 파일에 대해 —fix옵션으로 인해 자동수정

 

 

Reference 

https://www.youtube.com/watch?v=z0rkLRLU6Dw&list=PLC3y8-rFHvwiWPS2RO3BKotLRfgg_8WEo&index=5
https://eslint.org/docs/latest/