Typescript
typescript + react eslint룰 설정
심재철
2020. 5. 29. 10:18
.eslintrc.js
const path = require('path');
module.exports = {
/**
eslint는 자바스크립트만 해석할 수 있다.
eslint가 타입스크립트를 해석 할수 있게끔 parser를 지정해주자.
*/
parser: '@typescript-eslint/parser',
plugins: [
'@typescript-eslint', // 타입스크립트 문법이 들어있다.
'react' // 리액트 문법이 들어있다.
],
env: {
browser: true, // 브라우저 환경에서 eslint를 사용하겠다.
},
extends: [
// @typescript-eslint/eslint-plugin에서 추천하는 규칙들로 타입스크립트 파일을 검사하겠다.
'plugin:@typescript-eslint/recommended',
/**
eslint에 prettier를 붙여서 사용할건데, eslint와 prettier 둘다 포매팅 관련 룰을 가지고 있다.
그래서 eslint의 포매팅 관련 룰을 사용하지 않고 prettier의 룰로 대체시켜야한다.
eslint에 prettier를 붙이기 위해 eslint-config-prettier를 설치해야한다.
위에서 추가한 plugin:@typescript-eslint/recommended 에는 eslint의 포매팅 룰이 들어가있는데
이걸 prettier의 포매팅 룰로 교체시켜야한다.
eslint의 타입스크립트 포매팅 기능을 제거하고,
prettier의 타입스크립트 포매팅 기능을 사용하겠다는 의미이다.
*/
'prettier/@typescript-eslint',
/**
포매팅 능력은 eslint보다 prettier가 월등하다.
따라서, eslint의 react 포매팅 기능을 제거하고 prettier의 react 포매팅 기능을 켜주자.
*/
'prettier/react',
/**
eslint-plugin-prettier를 활성화 시킨다.
이 플러그인은 prettier의 에러를 eslint 에러로 찍히게 만들어준다.
반드시 마지막에 위치해야 한다.
*/
'plugin:prettier/recommended'
],
parserOptions: {
project: path.resolve(__dirname, './tsconfig.json'),
tsconfigRootDir: __dirname,
ecmaVersion: 2018, // 최신 ES 문법을 컴파일한다.
sourceType: 'module', // Allows for the use of imports
ecmaFeatures: {
jsx: true // Allows for the parsing of JSX
}
},
rules: {
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/no-unused-vars': 'off',
},
settings: {
react: {
version: 'detect' eslint-plugin-react가 자동으로 프로젝트의 React 버전을 탐지한다.
}
}
};