Missing return type on function 이 자꾸 떠서 보기 싫다. 그래서 rules 부분을 아래와 같이 설정해준다.
아래 설정에서 none을 warn으로 변경하면 경고를 띄우고, error를 띄우면 에러를 발생시킨다.
{
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"],
"extends": [
"plugin:react/recommended",// Uses the recommended rules from @eslint-plugin-react"plugin:@typescript-eslint/recommended",
"prettier/@typescript-eslint",
"plugin:prettier/recommended"
],
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"semi": 2,
"@typescript-eslint/explicit-function-return-type": [
"none",
{ "allowTypedFunctionExpressions": true }
]
},
"settings": {
"react": {
"version": "detect"
}
}
}자바스크립트 2개월차라 자바스크립트 문법이나 함수들을 능숙하게 다룰 줄 몰랐고 실무에서 리액트와 함께 Typescript(타입스크립트)를 사용한다는 사실을 알고도 적용할 엄두를 못 내고 있었는데 이번에 리덕스와 타입스크립트를 함께 공부해보면서 에러를 많이 뱉어 사용하지 않았던 eslint도 같이 적용해 프로젝트를 시작하게 되었다. 이 글은 ts와 eslint를 조합하면서 겪은 애로사항(최소 6시간 이상의 삽질)을 겪을 사람들을 위해서 아주 간단하게 정리했다. 이 이상으로 rules(에어비앤비 등등)을 적용할 분들은 지인의 도움을 받기를 추천한다.
CRA
cra에 typescript를 적용해보자
npx create-react-app my-app --template typescriptESLINT + PRETTIER
ESLINT
eslint linting 라이브러리 eslint,eslint가 typescript를 lint 할 수 있도록 허용해주는 parser인 @typescript-eslint/parsertypescript에 구체화된 ESLINT rule들을 잔뜩 포함하는 플러그인인 @typescript-eslint/eslint-plugin
npm i -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin설치 후에는 configuration을 위해 프로젝트 디렉토리 최상단(root 디렉토리)에 .eslintrc.json 을 만들고 아래 코드를 저장한다.
{
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"],
"extends": ["plugin:@typescript-eslint/recommended"],
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"semi": 2
}
}
이제 타입스크립트와 eslint를 함께 사용할 기본적인 준비가 되었다.
리액트와 타입스크립트를 사용하기 위해서는 eslint-plugin-react 을 설치해줘야한다.
npm i -D eslint-plugin-react그리고 eslintrc.json을 이렇게 수정한다.
{
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"],
"extends": [
"plugin:react/recommended",// Uses the recommended rules from @eslint-plugin-react"plugin:@typescript-eslint/recommended"
],
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"semi": 2
},
"settings": {
"react": {
"version": "detect"
}
}
}PRETTIER
prettier: 코드 포매팅을 자동으로 해주는 라이브러리eslint-config-prettier: 프리티어와 충돌을 일으킬 수 있는 ESLint의 규칙들을 비활성화한다.eslint-plugin-prettier: ESLint의 규칙으로 prettier를 작동하게 해준다.
아래와 같이 설치한다.
npm i -D prettier eslint-config-prettier eslint-plugin-prettier설치 후 .prettierrc 파일을 프로젝트 디렉토리 최상단(root 디렉토리)에 만들어서 아래의 코드를 저장한다.
{
"singleQuote": true,
"semi": true,
"useTabs": false,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 80
}
이 rule들은 원하는대로 수정하면 되는데 이는 주제에서 벗어나기 때문에 따로 찾아보고 설정하기로 하자.
다음으로 .prettierrc 이후 .eslintrc.js 파일을 수정해준다.
{
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"],
"extends": [
"plugin:react/recommended",// Uses the recommended rules from @eslint-plugin-react"plugin:@typescript-eslint/recommended",
"prettier/@typescript-eslint",
"plugin:prettier/recommended"
],
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"semi": 2,
"@typescript-eslint/explicit-function-return-type": [
"warn",
{ "allowTypedFunctionExpressions": true }
]
},
"settings": {
"react": {
"version": "detect"
}
}
}
.prettierrc 파일은 rule을 아래와 같이 변경도 가능하다.
{
"singleQuote": true,
"semi": true,
"useTabs": false,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 80,
"orderedImports": true,
"bracketSpacing": true,
"jsxBracketSameLine": false,
"arrowParens": "avoid"
}
결과적으로 아래와 같이 강제로 공백을 넣었을 때 Delete `.................................`라는 에러를 eslint가 뱉어주는 것을 볼 수 있고 Ctrl+S(저장)을 하면 프리티어에 의해 autoFixOnSave되어 코드가 규칙에 맞춰 정리된다.
