HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🌟
Programmers 최종 플젝 6조
/
📄
[프론트] 린터, 포맷터 룰 세팅
📄

[프론트] 린터, 포맷터 룰 세팅

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', }, };
 

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