module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'next/core-web-vitals',
'plugin:react/recommended',
'airbnb',
'eslint-config-prettier',
'plugin:prettier/recommended',
'prettier',
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 18,
sourceType: 'module',
},
plugins: ['react', '@typescript-eslint'],
rules: {
'react/jsx-filename-extension': [1, { extensions: ['.ts', '.tsx'] }],
'react/react-in-jsx-scope': 'off',
'react/function-component-definition': 'off',
'react/jsx-props-no-spreading': 'off',
'no-nested-ternary': 'off',
'no-restricted-syntax': 'off',
'consistent-return': 'off',
'default-param-last': 'off',
'react/require-default-props': 'off',
'no-use-before-define': 'off',
'@typescript-eslint/no-use-before-define': ['error'],
'@next/next/no-img-element': 'off',
'import/no-extraneous-dependencies': 'off',
'react/button-has-type': 'off',
},
};
[1 { extensions: ['.ts' '.tsx'] }]
jsx
파일 확장자에 대한 규칙을 설정해주는 룰입니다.
저희는 tsx
와 ts
로 작성 중이므로 이를 다음과 같이 설정해주었습니다.
맨 위의 첫 번째 줄에 React
를 import
할 때마다 오류가 생기는 현상이 발생하므로 해제하였습니다.
컴포넌트는 함수 선언문으로 써야 한다는 룰입니다.
현재 모두가 화살표 함수를 선호하므로 해제하였습니다.
...props
로 prop 값을 넘기는 것을 막는 룰입니다.
현재 모두가 { ...props}
로 집어넣는 컨벤션을 선호합니다. 따라서 해제하였습니다.
해당 룰은 중첩된 삼항연산자의 허용여부를 강제하는 룰입니다. 저희는 중첩을 2번까지만 허용하기로 컨벤션을 협의하였습니다. 중첩을 허용하기 위해 off로 지정하였습니다.
syntax를 제한시켜주는 룰입니다.
하지만 현재 저희는 syntax를 제한시키는 협의는 없었으므로 해제했습니다.
항상 일관된 리턴을 내뱉도록 하는 규칙인데, 분기점이 많을 경우 불필요한 return null
까지도 강제하여 넣어야 했습니다.
따라서 생산성에 도움이 되지 않을 것 같다는 판단하에 해제했습니다.
params
를 넘겨줄 때, default
값을 설정해주는 param
을 모두 마지막에 배치시키도록 합니다. 이는 기존 넘기는 params
의 순서가 달라 가독성이 떨어지는 효과로 인해 설정하지 않았습니다.
해당 룰은 defaultProps
를 사용하도록 강제합니다. 우리는 현재 타입스크립트로 충분히 타입을 전달하므로 사용을 중지합니다.
타입스크립트에서 React
에 대한 정의를 하기 전에 사용했다는 오류가 나옵니다. 이를 정확히 인식 시켜주기 위해 다음을 적어주었습니다.
no-use-before-define
을 껐으므로, 타입스크립트의 룰에서는 에러를 반환하도록 하였습니다.
next.js
에서 제공하는 Image
컴포넌트는 매우 특별합니다.
무려 최적화 기능을 제공해주는데요, 그렇기 때문에 다른 컴포넌트들보다 더욱 까다로운 옵션들을 제공해주어야 합니다.
예를 들면, 이미지 출처의 hostname
을 적어주어야 한다는 것들이 존재하고, 이미지 자체에 대한 스타일링이 제한적이라는 단점도 존재해요.
(현재는 컨테이너 안에 넣어둠으로써 이미지를 구현했습니다.)
따라서, 이것이 매우 불편하다 싶으면, img
로 작업할 수 있도록 설정해주었답니다!
외부에 있는 dependencies
를 불러올 때, 무조건 dependencies
에 넣으라고 하는 룰입니다.
그렇지만 stylelint
등은 굳이 dependencies
에 넣을 필요가 없습니다. 런타임에서는 동작하지 않는 린트이기 때문입니다. 따라서 이를 해제했습니다.
버튼의 경우 항상 타입을 지정하도록 설정한다는 룰입니다.
대다수의 버튼 타입이 button
임에도 해당 타입을 계속해서 명시해야 한다는 점은 꽤나 생산성에 있어 불편하게 작용하였습니다. 따라서 해제했습니다.
index파일에서 모듈을 impot 없이 한번에 export 하려니 생긴 Prefer default export오류
off값으로 설정해서 import 없이도 가능하게 해주었다.
[ 'error' 'ignorePackages' { ts: 'never' tsx: 'never' } ]
같은 위치의 파일을 './파일명'이렇게 불러오게되면 오류가 나타남 그래서 값과 같은 설정을 했으며, 만약 다른 파일에 지장이간다면 이 부분을 삭제하고 매번 절대경로로 불러와야된다.
Interface내에서 params를 선언하지 않았다는 오류를 발견하여 Eslint를 이와같이 설정하면 사라진다. Type과 Interface내에서 선언한것을 사용을 안했다면 오류를 호출하지 않게해준다.
기본 파라미터에 동적으로 할당하지 말라는 규칙이다.
객체의 경우, parameter에서 할당하여 새롭게 프로퍼티를 추가할 수 있도록 하였다. 아직까지는 parameter
에서 값을 동적으로 추가해서 할당하는 것에 대한 단점을 발견하지 못했기에, 이는 생산성에 도움을 줄 것이다.
연산자가 ===
일 때, scss
구문에서는 ==
로 권장하는 오류가 발생합니다. 따라서 수정합니다.
해당 룰은 키워드 값에 소문자 또는 대문자를 지정합니다.
기존 emtion스타일에 대문자가 소문자로 변하는 상황이 발생하여 이 값을 null로 설정하면 대문자와 소문자를 그대로 사용합니다. 따라서 해제하였습니다.
Prettier로 인해 길어지는 코드는 쪼개지게 됩니다. 이때, scss
표준 가이드에서는 >
이후에 새로운 라인을 생성하지 못하게 하고 있습니다. 따라서 null
을 통해 해제하였습니다.