Eslint 에러 대처 방법

eslint

 

혼자서 코드를 작성하는게 아니라 협업을 하는거면 lint는 필수.

그 중 eslint 사용하고 있다면 에러가 날 경우, 어떻게 처리 혹은 대처하는지 단계별로 알아보자.

적용 순위는 1 > 2 > 3 로써 3번은 최후의 수단이다.

 

 

1. 해당 오류가 있는 코드를 수정하거나 혹은 사용하지 않는 파일이라면 삭제한다.

가장 깔끔한 방법으로 권장하는 방법이다. 일단 에러 코드를 구글에서 검색하여, stackoverflow 등을  참조하여 코드를 추가 혹은 수정하여 처리할 수 있으면 가장 깔끔한 방법이다. (허나 인터넷의 경우 대부분 3번처럼 규칙을 아예 꺼버리는 경우가 많다.) 예를 들어, babel-lint 를 설치하거나 webpack 적용하여 lint 에러를 처리하는 경우가 가장 깔끔하다. 다만 이럴 경우 처리 방법 찾기까지가 시간이 조금 걸리는 단점이 있을 수 있다. 

 

.eslintignore

# Ignore any path/file using .gitignore syntax

 

node_modules/

dist/

vendor/

tools/tests/vrt/backstop_data

 

혹은  .eslintignore 파일을 추가하여 일부 폴더를 아예 미적용한다. 예를 들어 node_modules 이나 dist 폴더처럼 개발 코드가 아닌 경우가 이에 해당한다. gitignore 가 비슷하다보면 된다.

 

 

 

2. 해당 코드나 파일을 삭제 혹은 미사용하지 않고 싶다면 eslint-disable 구문을 사용하여, 해당 에러코드가 Lint 규칙에 적용되지 않도록 한다.

 

  // eslint-disable-next-line

 

위의 경우처럼 'eslint-disable ...' 구문을 사용하여, 해당 코드에는 에러 린트 규칙을 미적용하는 경우가 있다. 예를 들어, 해당 파일을 미사용하고 있지만 삭제하기 싫고 우선 보관하고 싶으면 해당 구문 혹은 파일에 eslint-disable 구문을 사용하여 eslint 에러 코드를 미적용한다.  eslint-disable 이 기본 구문이고 추가로 에러코드를 적거나 혹은 다음줄을 미적용하는 경우가 있다. 자세한 미적용 구문 방법은 아래의 사이트를 참조한다.

 

 

에러가 나는 줄 혹은  파일에 eslint 규칙 미적용하기 

https://masteringjs.io/tutorials/eslint/ignore

 

 

 

 

3. 최후의 방법으로써, 그냥 해당 규칙을 끄고 싶다면 .eslint 에 들어가서 rules에 들어가서 규칙을 꺼버린다

 

해당 방법은 최후의 방법으로써, 아예 lint 규칙을 적용하지 않는 방법이다. 이럴 경우 가장 간편하나 실질적으로 lint의 의미가 감소되기 때문에 1번, 2번 방법 적용이 어려울 경우 사용하는 것을 권장한다. 여러가지 옵션도 추가로 작성할 수 있다. 자세한 방법은 eslint 공식 홈페이지를 참조한다.

 

https://eslint.org/docs/rules/

 

 

.eslint

rules: {

'no-console': [0], // turned off for now while we are console.logging everywhere.

'import/no-extraneous-dependencies': [

'error',

{

devDependencies: true,

},

],

 

// react eslint rules off

'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],

},