[AI스쿨] ESLint란 무엇인가? (eslint설치,설정)

#ESLint #eslint란 #eslint설치 #eslint설정 #AI스쿨

​

\[AI스쿨 msa기반 java 백엔드 코스 중에 공부한 내용을 작성하였습니다\]

학습법 이론

학습을 하기 이전, 명심해야할 학습법이 있다.

​

1.이해가지 않는다고 뒤돌아가 다시 보지 말 것

2.외우지 말라

=> 자주 봐서 외워짐을 당하라

=> 크롬을 통해 copy and paste하라

1. 이해하는게 중요하다

=> 왜 생겨났는지?

=> 왜 사용하는지?

===> 응용이 가능해진다.

4.새로운 지식을 넣을땐 뇌를 비우자

​

ESLint란?

ESLint란?

vue js를 처음시작하는데 ESLint 관련오류가 계속생겨서 계속 고생을 했는데요. 구글링 해봐도 근본적인 문제해결이 되지않아 결국 ESLint가 무엇인지 세세하게 공부하는 시간을 가졌습니다.

​

ESLint는 ES와 Lint를 합친단어입니다.

​

ES는 EcmaScript의 약어로 Ecma기구에서 만든 Script즉 JavaScript 표준을 의미합니다. 이전글에서 배운 ES6도 이 ES의 한 종류이며 가장 최신버전입니다.

​

Lint는 에러가 있는 코드를 표시하는 것을 의미합니다. JavaScript 작성방식이 잘못되었다면 개발자로 하여금 제빠르게 수정이 가능하도록 개발을 도와주고 있습니다.

​

ESLint는 js코드의 오류를 잡아주는것과 더불어 js코드를 깔끔하게 만들어주는 기능도 수행합니다.

ESLint 설치방법

설치방법

for Windows

터미널에서 위 명령어로 설치가 가능한데, 만약 오류가 나온다면 아래 모듈을 먼저설치해보시기 바랍니다.

설치 진행시나오는 설정이고 어려운 내용이 없어 읽어보시고 고르시면 될 것 같습니다. 모르시겠으면 위를 참고해주세요.

ESLint 설정방법 (.eslintrc.js)

eslint 설치가 모두 진행되면 아래 사진과 같이 .eslintrc.js 파일이 생성되는 것을 볼 수 있습니다. js객체 형식으로 되어있는 이 설정파일은 여러 설정 key값이 존재합니다. 몇가지 설정을 같이 공부해보겠습니다.

​

vue js cli를 통해 eslint를 다운받으면 해당 파일이 없을 수 있습니다. 이때는 그냥 파일명 똑같이적어서 만들어주시면됩니다.

root

ESLint를 설정할때는 여러개의 설정파일이 존재할 수 있습니다. 여러개의 프로잭트가 공존하는 파일인 경우에 설정파일이 여러개일 수 있는데요. ESLint는 현재대상 파일이 위치한 파일에 설정파일이 있는지 우선적으로 확인하고 없다면 상위 디렉토리까지 찾게됩니다.

​

이때 root를 주면 더이상 상위 디렉토리까지 검사하지 않습니다.공통설정과 부분설정을 관리할때 유용하게 사용됩니다.

​

plugins

plugin을 사용해 다른 사람이 만든 eslint 규칙을 가져올 수 있습니다. 종류는 다양하고 보통 여러 플러그인을 함께 사용합니다. 가져온 뒤에는 extends , rules 설정을 통해 사용할 수 있습니다.

​

extends

extends옵션을 통해 Google,Facebook,Airbnb 등 기업들이 만들어놓은 설정을 그대로 가져올 수 있습니다.

ESLint플러그인은 추천기능을 제공합니다.extends옵션은 이런 추천 설정을 받아올 수 있습니다.

​

rules

rules옵션을 사용하면 사용자가 직접규칙을 추가할 수 있습니다. extends옵션을 통해 가져온 규칙보다 우선시 적용됩니다.

​

env

javascript는 다양한 환경에서 실행될 수 있습니다. 각 환경마다 전역변수를 통해 접근이 가능한 고유객체가 존재합니다 .예를들어 브라우저에서 접근가능한 window는 node에서 접근이 불가합니다.

​

ESLint는 미리 선언하지 않는 변수에 대한 접근이 되지 않습니다. 그러므로 실행환경에서 기본적으로 제공되는 전역 객체에 대해 env속성을 통해 미리 설정할 수 있습니다.

parser , parserOptions

개발자가 작성하는 자바스크립트코드는 실제로 실행환경에서 돌아가는 코드와 다른경우가 많습니다. 예를들어 typescript,jsx와 같은 자바스크립트 확장 문법,Bable과 같은 트랜스파일러를 통한 최신문법으로 개발하는 경우가 그렇습니다.

​

Bable은 개발자가 항상 최신 자바스크립트로 코딩할 수 있도록 만들어줍니다.

​

개발자가 사용하는 언어와 ESLint가 인식하는 언어가 다르기 떄문에 parser, parseroption으로 맞춰줄 수 있습니다.

​

bable을 사용하는 경우 parser를 아래와 같이 설정할 수 있습니다.

​