[Convi] ESLint / Prettier 세팅

박종대·2022년 9월 29일
1

Convi

목록 보기
1/9

오늘은 Project Setting 과정에 대해 정리하려 합니다.

생성

먼저 저는 react와 typescript를 사용할 것이기 때문에 아래의 cli로 프로젝트를 생성했습니다.

create-react-app convi --template=typescript

ESLint & Prettier

이제 Code convention을 맞추기 위해 Eslint와 Prettier를 세팅하려 합니다. 개인 프로젝트이긴 하지만 저도 모르게 Code convention이 달라지는 경우가 존재해서 간단한 convention 정도는 맞추려 합니다. Eslint와 Prettier의 설치에 대해서는 생략하고 바로 적용하는 부분부터 알아보겠습니다. 그 전에 저는 Eslint와 Prettier의 차이가 궁금합니다.

  • ESLINT

함수를 정의할 때 function 키워드를 사용하거나 arrow function으로 정의할 수 있습니다. 이런 '함수 정의 방식' 같은 코딩 스타일을 eslint에서는 통일 시켜 줄 수 있습니다.

또한 콜백 함수를 전달할 때에도 코드를 다음과 같은 방식들로 작성할 수 있을 것입니다.

list.filter(element => element === true) // 1
list.filter((element) => { return element === true; }) // 2 

코딩 스타일의 일관성을 유지 시켜줌으로써 Code quality를 높여 주는 것이 eslint의 장점입니다.

  • PRETTIER

prettier는 말 그대로 텍스트의 일관성을 유지시켜 줍니다. tab 키의 width는 몇 칸으로 할 거냐, 줄 바꿈 할 것이냐, 들여쓰기 할 것이냐 등 입니다.

  • 적용

개인 프로젝트이기 때문에 최대한 기본적인 rule들만 적용하려 합니다. typescript를 사용할 것이기 때문에 typescript-eslint와 airbnb eslint 설정을 적용할 것입니다.
다음은 적용시킬 eslintrc.js 파일입니다.

module.exports = {
	env: {
		browser: true,
		node: true,
		es2021: true,
		jest: true,
	},
	root: true,
	parser: '@typescript-eslint/parser',
	parserOptions: {
		ecmaFeatures: {
			jsx: true,
		},
	},
	plugins: ['@typescript-eslint', 'react', 'jsx-a11y', 'import', 'react-hooks', 'prettier'],
	extends: ['plugin:@typescript-eslint/recommended', 'plugin:import/typescript', 'airbnb', 'airbnb/hooks', 'prettier'],
	rules: {
		'react/jsx-filename-extension': ['error', { extensions: ['.tsx', '.ts', 'js', 'jsx'] }],
		'import/extensions': [
			'error',
			'ignorePackages',
			{
				js: 'never',
				mjs: 'never',
				jsx: 'never',
				ts: 'never',
				tsx: 'never',
			},
		],
		'import/no-unresolved': 'warn',
		'import/no-named-default': 'warn',
		'import/no-cycle': 'warn',
		'import/prefer-default-export': 'off',
		'prettier/prettier': ['error'],
		'arrow-body-style': 'off',
		'prefer-arrow-callback': 'off',
	},
	settings: {
		'import/resolver': {
			node: {
				extensions: ['.ts', '.tsx', '.js', '.jsx'],
			},
		},
	},
};

다음은 적용시킬 .prettierrc.js 파일입니다.

module.exports = {
  "$schema": "http://json.schemastore.org/prettierrc",
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "printWidth": 100,
  "proseWrap": "always",
  "quoteProps": "as-needed",
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false
}

rules attribute에서 직접 규칙을 설정하거나 이미 적용된 extends의 규칙을 오버라이딩 할 수 있습니다.
기본 rules 들은 ESLint Rules 에서, react plugin 관련 rules 들은 React Rules 에서 import 관련 rules들은 Import Rules 에서 확인 가능합니다.

  • react/jsx-filename-extension
    jsx 문법을 포함하는 파일에 대한 확장자를 명시, 현 프로젝트에서는 .tsx, .jsx, ts, js 파일에 대해 jsx 문법 포함을 허용한다는 의미.
  • arrow-body-style, prefer-arrow-callback
    해당 rule 두가지를 off 시킨 이유는 제가 원하는 rule은 아니었고 prettier를 적용하려면 부득이하게 off 시켜야 한다고 합니다. (관련 문서) 추가적으로 관련 문서에서는 extends에서 plugin:prettier/recommended를 추가해도 같은 결과를 얻을 것이라고 말합니다.
  • import/prefer-default-export
    export할 모듈이 하나일 때는 default로 export 하라는 부분에 대한 설정입니다. 저는 off로 하겠습니다.
  • import/extensions
    import 할 때 확장자명에 대한 설정입니다. 저는 js, mjs, jsx, ts, tsx에 대한 확장자는 생략해서 import 하도록 설정하겠습니다.
  • plugin
    ESlint 기본 규칙 외에도 추가적인 규칙을 사용할 수 있도록 해주는 plugin

  • extends
    다양한 기업들이 공개해놓은 설정을 그대로 가져와 사용할 수 있게 해줍니다. 저는 airbnb 설정을 extends 했습니다.

  • env
    자바스크립트가 실행되는 환경에 따라 접근할 수 있는 전역 변수들이 존재합니다. env에서는 실행 환경에서 기본적으로 제공되는 전역 객체에 대해 미리 알려줄 수 있습니다. 저는 browser와 node등을 true로 설정하겠습니다. 추가적으로 jest는 테스팅 라이브러리를 사용하기 위해 true로 설정했습니다.

Formatting (문서 서식)

이제 개발자가 eslint 설정에 맞게 개발하지 않으면 프로그램은 warning이나 error등 다양한 형태로 개발자에게 알려주게 될 것입니다. 여기서 조금 더 편해지고 싶습니다. eslint 설정에 맞게 자동으로 코드를 변경시켜 주고 싶습니다.

  • yarn run lint:fix
    package.json에 다음과 같은 script를 추가합니다.

    "lint": "eslint ./src/**/*.{ts,tsx,js,jsx}",
    "lint:fix": "eslint --fix ./src/**/*.{ts,tsx,js,jsx}"

이후 yarn run lint:fix를 실행하면 src 아래 소스코드들을 자동으로 formatting 시켜 줍니다.

  • formatting shortcut key
    vscode 에디터에서 오른쪽 마우스를 클릭하면 나타나는 컨텍스트 메뉴에 Format Document라는 메뉴가 있습니다. 해당 메뉴를 클릭 혹은 shortcut key를 입력하면 자동으로 formatting 됩니다. 저는 formatting shortcut key를 Ctrl+Shift+I로 변경하였습니다.

  • format on save
    에디터 저장 시에 자동으로 formatting 시킬 수 있습니다. Ctrl+Shift+P 키를 입력하여 open settings에 진입합니다.

    이후 format on save에 체크 하면 됩니다.

profile
Frontend Developer

0개의 댓글