ESLint 를 이용한 코드 규격화

ESLint란?

다양한 사람들이 하나의 프로젝트를 작업하다 보면 서로 다른 코딩 규칙들로 스트레스를 받는다.

설령 규칙을 모두 정의 했다고 해도 실제 작업시 실수로 인한 오류들이 많이 발생 할 것이다.

자동으로 코딩 규칙을 검사 해 줄 수는 없을까? 이를 해결하고자 나온 것이 바로 ESLint 이다.

 

설치방법

eslint 설치

$ yarn add eslint --dev

 

 

* Webpack을 설치하면 "If ESLint is installed globally, then make sure '@typescript-eslint/eslint-plugin' is installed globally as well."와 같은 오류가 발행 할 수도 있다. 그럴 땐 다음과 같이 설치하여 해결하자.

$ yarn add @typescript-eslint/eslint-plugin --dev

 

VSCode의 settings.json (* Workspace 내 파일이 아니다. VSCode 앱 설정을 의미) 에 eslint 설정(저장시 자동 수정 기능)을 추가한다.

* 중요* 여기서 기본적으로 제공되는 formatter 기능은 기능을 꺼주도록 하자.

"typescript.format.enable": false,
"editor.formatOnSave": true,

"eslint.alwaysShowStatus": true,
"eslint.autoFixOnSave": true,
"eslint.validate": [
        "javascript",
        "javascriptreact",
    {
        "language": "typescript",
        "autoFix": true
    },
    {
        "language": "typescriptreact",
        "autoFix": true
    }
]

 

.eslintrc 파일 생성

프로젝트 Root 폴더에서 다음과 같이 실행하면 .eslintrc 라는 파일이 생성된다.

$ npx eslint --init

 

설정 옵션은 다음과 같다. (본인 옵션에 맞게끔 선택)

How would you like to use ESLint? > To check syntax and find problems  What type of modules does your project use? > JavaScript modules (import/export)  Which framework does your project use? > React  Does your project use TypeScript? > Y Where does your code run? > Check Browser & Node (click space to check) What format do you want your config file to be in? > JavaScript Would you like to install them now with npm? > Y

 

* 만약 실행시 다음과 같은 에러가 발생한다면?

"Failed to load plugin '@typescript-eslint' declared in '.eslintrc.jsFailed to load plugin '@typescript-eslint' declared in '.eslintrc.js': Cannot find module 'typescript' Referenced from"와 같은 에러가 발생한다면 타입 스크립트를 로컬로 설치해 주자.

$ yarn add typescript --dev

 

Code formatting을 위한 prettier 패키지를 설치

$ yarn add --dev prettier eslint-plugin-prettier eslint-config-prettier

 

* eslint-config-prettier는 prettier 에서 관리 해 줄 수 있는 코드 스타일의 ESLint 규칙을 비활성화 시켜준다. 이것을 사용하게 된다면 ESLint 는 자바스크립트 문법 관련된 것들만 관리하게 되고, 코드스타일 관련 작업은 prettier 가 담당하게 된다.

 

Visual Studio Code Extension 설치

VSCode Extension인 Eslint 를 설치한다.

 

Prettier 적용을 위한 .eslintrc 수정

{
    ...
    extends: [
        ...
        "plugin:prettier/recommended",
        "prettier/react", // React 사용시만 추가
        ...
    ],
    ...
}

 

.prettierrc.js 파일 생성

module.exports = {
	bracketSpacing: true,
	jsxBracketSameLine: true,
	singleQuote: true,
	semi: true,
	trailingComma: 'all',
	useTabs: true,
	tabWidth: 4,
	printWidth: 200,
	eslintIntegration: true,
	formatOnSave: true,
};

 

추가 옵션은 (이곳)에서 확인하도록 한다.

 

AirBnB esLint 스타일 적용

여러 esLint 스타일이 있지만 가장 인기있는 airbnb 스타일을 기본으로 구성하고 이를 개조하는편이 빠르다.

$ npx install-peerdeps --dev eslint-config-airbnb

 

* 서버와 같이 react를 사용하지 않는곳에서는 eslint-config-airbnb-base를 설치하는 편이 보다 가볍다. (귀찮으면 그냥 일반 모듈 설치)

$ npx install-peerdeps --dev eslint-config-airbnb-base

 

 

.eslintrc 수정

{
	...
	extends: ['eslint:recommended', 'plugin:@typescript-eslint/eslint-recommended'],
    ...
}

위를 다음과 같이 수정 한다.

react hooks를 사용한다면 airbnb/hooks 또한 같이 추가 해 준다.

{
	...
	extends: ['airbnb', 'airbnb/hooks'],
    ...
}

 

설정 커스터마이징

airbnb esLint는 꽤나 까다로운 규칙들을 갖고 있다.

이는 팀에 맞게 커스터마이징 하도록 한다.

 

.eslintrc 파일 수정

rules 부분에 필요한 옵션을 켜거나 끌 수 있다.

{
	...
	"rules": {
		"react/prefer-stateless-function": 0,
		"react/jsx-filename-extension": 0,
		"react/jsx-one-expression-per-line": 0
	}
    ...
},

 

esLint 검사 무시하기

몇몇 특정 파일(빠른 테스트용 임시 파일)은 굳이 강력한 문법 검사가 필요 없을 때가 있다. 이럴때는 esLint 검사를 꺼두어 편하게 테스트 할 수 있다. 작업 파일 최상단에 다음과 같이 주석을 달아 주면 해당 파일은 esLint 검사를 건너뛰게 된다.

/* eslint-disable */