ESLint
자바스크립트 문법 중 에러가 있는 곳에 표시를 달아놓는 도구
ESLint는 ES + Lint
ES는 EcmaScript, 즉 자바스크립트를 의미하고
Lint는 보푸라기라는 뜻인데 프로그래밍에서는 에러가 있는 코드에 표시를 달아놓는 것을 의미한다.
코드를 점검하고, 에러가 있으면 표시해준다. 문법 에러뿐만 아니라 코딩 스타일을 정할 수 있어서 협업할 때 좋다.
사용하려면 npm이 필요하다.
ESLint 설정 파일은, .eslintrc.js 또는 .eslintrc.json와 같은 이름으로 만들어진다.
플러그인이나 규칙에 대한 정의를 json 형식으로 넣어 설정을 변경할 수 있다.
coding style 추가하기 -ESLint 설정 파일
extends 부분에는 확장 설정을 넣는다.
이번 과제에서는 eslint 기본설정으로 두고 했다.
다시 설정해보고 싶다면, ESLint 설정파일을 지우고 다시 시도하면 된다.
자주 쓰이는 airbnb사의 코딩 스타일
"extends": "eslint:recommended"코드 규칙 추가하기 -ESLint 설정 파일
"rules"라고 쓰인 부분에 원하는 설정을 추가하고 뺄 수 있다.
이번 과제에서는 아래처럼 설정해서 ;세미콜론과 ""쌍따옴표를 규칙으로 설정했다.
"rules": {
"semi": ["error", "always"]
"quotes": ["error", "double"]
}npm run lint 의 원리
node모듈을 사용하는 프로젝트에서 npm키워드는 하나의 명령어처럼 사용된다.
package.json 파일에 프로그램을 실행, 개발하기 위해 필요한 모듈들이 어떤 것들인지 명시되어 있다. (= 제품 설명서 개념)
실제 모듈은 node_modules폴더에 다 들어있다.
"scripts": {
//이 프로젝트가 돌아가기위해 반드시 필요한 모듈들이 무엇인지
"test": "jest",
"test:example": "jest test-example/",
"test:passme": "jest pass-me/",
"test:watch": "jest --watch",
"lint": "eslint **/*.js --quiet",
"submit": "node .travis/submit.js"
},
"dependencies": {},
//이 프로젝트를 개발하는 환경에서 필요한 모듈이 무엇인지
"devDependencies": {
//npm으로 실행시킬 수 있는 명령어를 정의
"eslint": "^6.8.0",
"jest": "^25.4.0"
}이번 과제에서는
Jest설치=> package.json파일의 devDependencies항목에 jest가 추가되어 있는지 확인=> 테스트케이스 작성=> testing 실행 시 명령어 npm run test:example,
Jest로 pass-me의 코드를 작성한 후 testing 실행 시 명령어 npm run test:passme,
ESLint설치=> package.json파일의 devDependencies항목에 eslint가 추가되어 있는지 확인=> 설정한대로 코드모양이 통일되었는지 확인할 때 명령어 npm run lint 를 사용했다.
Error
ESLint를 이용한 linting은 node환경에서 진행되는데
node환경에서는 document 또는 window 객체와 같은 DOM을 사용할 수 없다. Jest는 다행히 DOM테스팅을 무리없이 실행하였다.
ESLint는 document 또는 window객체를 사용하면, 해당 객체가 정의되지 않았다고 판단하고 에러를 낸다. 이를 회피할 수 있는 옵션에는 몇가지가 있는데 과제에 적용시킨 방법은
"browser": true이다.
환경env 설정을 추가한 후 document 객체가 정의되지 않았다 에 해당하는 오류가 잡혔다.
global.functionName(para){}코드에서 global을 제거하고 함수를 선언해주면 함수에 대한 오류를 잡을 수 있다.
"env": {
"commonjs": true,
"es6": true,
"node": true,
"browser": true
}다른 해결방법들도 찾아봐야겠다.
