내가 사용하는 ESlint

이태관·2023년 9월 17일

rules

quites

설명
'' "" ``를 일관되게 사용하도록 설정

사용 법
"quotes": ["error" or "warn" or "off", "singles" or "double" or "backtick"]

사용 전
const a = `문자열` <- 에러가 발생하지 않음

사용 후
const b = `문자열` <- 에러 발생


공식문서
https://eslint.org/docs/latest/rules/quotes

no-duplicate-imports

설명
중복된 import 감지

사용법
"no-duplicate-imports : "error" or "warn" or "off"

사용 전
import React from 'react'
import { useState } from 'react' <- 에러가 발생하지 않음

사용 후 
import React from 'react'
import { useState } from 'react' <- 에러가 발생

공식 문서
https://eslint.org/docs/latest/rules/no-duplicate-imports

no-console

설명
console.log()감지

사용법
"no-console": "warn" or "error" or "off"

사용 전
console.log() <- 에러가 발생하지 않음

사용 후
console.log() <- 에러가 발생

공식문서
https://eslint.org/docs/latest/rules/no-console

no-unused-vars

설명
선언됐지만 사용하지 않은 변수 감지

사용법
"no-unused-vars": "warn" or "error" or "off"

사용 전
const name = 'lee'

Do not use name variable <- 에러가 발생하지 않음

사용 후
const name = 'lee'

Do not use name variable <- 에러가 발생

공식문서
https://eslint.org/docs/latest/rules/no-unused-vars

TS환경에서는
"@typescript-eslint/no-unused-vars": "warn"도 추가했어야 했음

react/react-in-jsx-scope

설명
jsx를 사용하려면 import React from 'react'가 필요

사용법
"react/react-in-jsx-scope": "off"

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

관련 블로그 글
https://mdpapa.tistory.com/164

react/self-closing-comp

설명
닫히지 않은 태그 감지

사용법
"react/self-closing-comp": "warn"

사용 전
<div></div> <-에러가 발생하지 않음

사용 후
<div></div> <-에러가 발생

공식문서
https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/self-closing-comp.md

react/no-direct-mutation-state

설명
react에서 state를 setState함수로 변경하지 않고 직접 변경할 경우 감지

사용법
"react/no-direct-mutation-state" : "error" or "warn" or "off"

공식문서
https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unused-state.md

react/jsx-no-useless-fragment

설명
불필요한 fragment(<></>)를 감지합니다.

사용법
"react/jsx-no-useless-fragment": "warn" or 'error" or "off"

공식문서
https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-useless-fragment.md

react/jsx-curly-brace-presence

설명
jsx내 불필요한 중괄호 감지

사용법
"react/jsx-curly-brace-presence": "warn"

공식문서
https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-curly-brace-presence.md

복붙용

	"quotes": ["error", "single"], // 문자열은 작은따옴표로 사용
	"no-duplicate-imports": "error", // 중복된 import 경고
	"no-console": "warn", // console.log() 경고
	"no-unused-vars": "warn", // 사용하지않는 변수 경고
	"@typescript-eslint/no-unused-vars": "warn", // 타입스크립트 사용하지않는 변수 경고
	"react/react-in-jsx-scope": "off", // jsx를 사용하려면 import React from 'react'가 필요하다는 경고를 끔
	"react/self-closing-comp": "warn", // 태그가 닫히지 않은 경우에 대한 경고
	"react/no-direct-mutation-state": "error", // state 직접변경 에러
	"react/jsx-no-useless-fragment": "warn", // 불필요한 fragment 경고
	"react/jsx-curly-brace-presence": "warn" // jsx 내 불필요한 중괄호 경고