ESLint 설치

YEZI🎐·2022년 6월 7일

ESLint

Javascript

목록 보기

1/13

제로베이스 JS과제에서
네이밍에 유의하고 일관된 코딩 컨벤션을 유지한다. 이를 위해 ESLint는 반드시 사용한다.
라고 쓰여진 부분이 있었다.

나란 닝겐 ESlint는 들어본 적도 없었고 때문에 설치가 별거 아닌데도 많이 헤맸다.
또 다시 설치할 나를 위해,,

ESlint란

ES(EcmaScript) + Lint(에러 코드 표식)
JavaScript는 동적 분석을 하는데 ESlint는 코드를 정적으로 분석을 한다.
때문에 프로그램을 실행하지 않고도 코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동으로 검출해준다. 추가적으로 간단한 코드 포맷팅 기능도 있다.

설치

터미널을 열어 설치한다.

$ npm i -D eslint

나는 하나하나 설정하기 귀찮아서 글로벌로도 설치할거다.

$ npm i -g eslint

Eslint 실행

$ eslint -v

설치 완료 된 후 초기화

$ eslint --init

단계별 질문이 나오는데 각자 타입에 맞게 설정해준다.

// ESLint의 사용 목적은 무엇인가요?
? How would you like to use ESLint? … 
To check syntax only
❯ To check syntax and find problems
To check syntax, find problems, and enforce code style

// 어떤 타입의 모듈을 사용하나요?
? What type of modules does your project use? … 
❯ JavaScript modules (import/export)
CommonJS (require/exports)
None of these

// 어떤 프레임워크에서 사용할 것인가요?
? Which framework does your project use? … 
React
Vue.js
❯ None of these

// 타입 스크립트를 사용하나요?
? Does your project use TypeScript? › No / Yes

// 어떤 환경에서 코드가 동작하나요?
? Where does your code run? … (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
✔ Node

// 어떤 포맷으로 ESLint 설정파일을 생성할까요?
? What format do you want your config file to be in? … 
JavaScript
YAML
❯ JSON

ESLint 세팅을 해준다.

{
	"env": {
		"browser": true,
		"es2021": true,
		"node": true
	},
	"extends": "eslint:recommended",
	"parserOptions": {
		"ecmaVersion": "latest",
		"sourceType": "module"
	},
	"rules": {
		// "off" or 0
		// "warn" or 1
		// "error" or 2
		"no-unused-vars": "off",	// 미사용변수
		"no-console": "off",		// console
		"semi": "warn"				// 세미콜론
	}
}

Tip

한 파일 전체를 eslint 적용 안하고 싶을 때 파일 맨 윗줄에 추가 : 파일 전체 적용 안함
```
/* eslint-disable */
```

적용하지 않고자 하는 코드 바로 윗줄에 추가 : 일부 코드 적용 안함
```
// eslint-disable-next-line
```

References

YEZI🎐

까먹지마도토도토잠보🐘

다음 포스트

스택 (Stack)

1개의 댓글

청포도봉봉이

2022년 6월 8일

좋은 글 감사합니다😊

답글 달기