Eslint 초기 사용법
Eslint 학습 및 공부 내용을 기록하기 위한 포스트입니다.
Eslint 를 사용하기 위한 간단한 방법을 포스팅한다.
보통 개인프로젝트로 개발할때는 크게 신경을 안쓰고 하는경우도 있는데 Eslint 를 습관화 하는 버릇을 들이자.
1. Eslint 받기
node 설치가 우선되어야 하지만, 여러 포스팅(Webpack 포함)에 해당 내용은 잘 정리되어 있으니 넘어가도록 한다.
npm i eslint
를 통해서 먼저 eslint 라이브러리를 다운받자.
이후에 간단하게 명령어를 통해 기초 셋팅을 잡도록 한다.
npx eslint --init
위 명령어를 실행한 후 내가 원하는 환경을 차례로 설정을 한다.
1-1. How would you like to use ESLint?
본인이 syntax only, syntax, find problems, code style 중 어떤 부분까지 체크할 지를 선택한다.
1-2. What type of modules does your project use?
본인이 module을 사용할 것인지, CommonJS를 사용할 것인지 선택한다.
1-3. Which framework does your project use?
최근에는 React, Vue 등 여러 라이브러리 혹은 프레임웍을 사용하다보니 이런 부분을 선택하라고 나온다.
각 프로젝트의 성격에 맞게 선택하면 된다.
1-4. Does your project use TypeScript?
TypeScript 사용 여부를 선택한다.
1-5. Where does your code run?
내 코드가 어디서 돌아갈지를 선택한다.
1-6. What format do you want your config file to be in?
eslint 설정파일을 어떤 형식으로 설정할 것인지를 선택한다.
본인은 js파일로 설정을 할 예정이기 때문에 Javscript를 선택하였다.
6번까지 선택을 마치면 성공 메시지와 함께 .eslintrc.js 파일이 생선되는것을 확인할 수 있다.
// .eslintrc.js
module.exports = {
"env": {
"browser": true,
"es2021": true
},
"plugins": [
// 이곳에 플러그인을 추가하면 된다.
]
"extends": "eslint:recommended", // eslint 에서 제공하는 추천 린팅을 extends 하여 사용한다.
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"rules": {
// 이곳에 원하는 rules 를 추가하면 된다.
}
}
처음 파일이 생성된 후 이제 본인의 판단에 따라 필요한 플러그인 혹은 파서, 룰 등을 알맞게 넣어서 사용하면 될 것이다.
2. 사용방법
웹팩을 빌드하거나, 소스를 배포할경우 package.json에 script 파일을 통해 명령어를 설정한다.
lint도 동일하게 설정해서 사용할 수 있다.
{
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"lint": "eslint src --fix" // eslint [검사할 범위] [옵션]
},
"devDependencies": {
"eslint": "^8.13.0"
}
}
설정 후
npm run lint
명령어를 통해 간단하게 설정한 범위를 검사할 수 있다.
이떄 --fix 옵션을 통해 공식 문서에서 제공하는 eslint에서 자동 수정이 가능한 부분들은 자동으로 수정을 하게 된다.
예를 들면
// eslint 검사 전
console.log();;;;;;;
// 검사 후
console.log();
이런 간단한 것 부터 자세한 부분은 차차 더 확인해 가면서 본인만의 스타일을 찾아가는것이 좋을 것 같다.
Gatsby router 활용에 대한 포스트 입니다.