ESLint
·3분 읽기·5 views
console.log()
(function() {})()
위에 코드를 실행하면 TypeError가 나타난다. 이유는? 실제로 실행되는 코드는
console.log()(function() {})()
이렇게 인식하기에 세미콜론이 없어 타입 에러가 났다.
코드의 가독성을 높이고 잠재적인 오류와 버그를 제거해 단단한 코드를 만드는 것이 목적이다.
eslint 설치
npm i eslint
app.js
console.log()
(function() {})()
여기서 바로 빌드하면 안되고, lint는 configuration이 있어야 하기에 아래 파일을 생성한다.
.eslintre.js
module.exports = {}
실행
npx eslint app.js
검사 규칙을 미리 정해놓았다.
no-unexpected-multilne는 코드 사이에 줄바꿈이 필요한데 적용되지 않아 에러가 발생하도록 하는 eslint 규칙중 하나이다.
.eslintre.js
module.exports = {
rules: {
"no-unexpected-multilne": "error"
}
}
실행
npx eslint app.js
를 실행하면
코드 사이에 기대하지 않은 줄바꿈이 있다라는 에러메세지가 나타난다.
console.log();
(function() {})();
세미콜론을 붙여주면 에러가 사라진다.
그렇다면 세미콜론이 엄청나게 많은건 어떻게 처리해야될까? no-extra-semi 이라는 규칙이 있다. 이를 적용해주면
app.js
console.log();;;;;;
(function() {})();
.eslintre.js
module.exports = {
rules: {
"no-unexpected-multilne": "error",
"no-extra-semi": "error",
}
}
를 실행하면
불필요한 세미콜론이 있다라는 에러메세지가 나타난다.
npx eslint app.js --fix
app.js
console.log();
(function() {})();
이렇게 코드가 변한 것을 확인할 수 있다.
위와 같은 규칙을 미리 정해놓은 것을 eslint:recommened 설정이다.
.eslintre.js
module.exports = {
extends: [
"eslint:recommened",
]
}
위와 같이 작성해주면 eslint에서 정해놓은 규칙을 다 적용이 되고 틀린 문법들을 수정해준다.
--fix 역할까지 같이 동작해준다.
기본 규칙 외에 다른 규칙들도 존재한다.
위에 처럼 귀찮게 하나씩 다 설정하기 보다는 --init 옵션으로 간단하게 구성할 수 있다.
npx eslint --init
? How would you like to use ESLint?
? What type of modules does your project use?
? Which framework does your project use?
? Where does your code run?
? How would you like to define a style for your project?
? Which style guide do you want to follow?
? What format do you want your config file to be in?
ESLint는 현재 코드의 오류와 버그의 가능성을 찾아 초기에 바로 잡으려고 한다. 프리디어는 코드를 포매팅하여 읽기 수월한 코드로 만들어준다. (코드 정리)
코드는 최대한 깔끔하게 레거시를 만들지 않아야한다. 그래야 서비스의 수명이 길어지기 때문이다. 나 혼자서 짜는 코드라면 이상해도 되지만 같이 협업을 하는 것이기에 읽기 편한 코드로 작성해햐 한다! 코드를 깔끔하게 짜는 규칙이 이미 정해져 있고 이를 자동화할 수 있는 도구의 도움을 받는 것이 좋다!