[ 개발 이슈 ] maxlen 적용 이슈

eslint 는 prettier 를 사용해서 공통된 형식을 적용하기 위해서 여러 코드 규칙을 적용해둔 상황에서 tsx 파일에서 보이던 maxlen 룰이 ts 파일에서는 적용되지 않았고

100줄이 넘어가는 내용을 prettier 는 설정에 따라 줄을 넘겼고 그 내용은 화살표 함수가 있던 코드였기 때문에 eslint 의 arrow-body-style, implicit-arrow-linebreak 규칙에 따라 함수형식이 올바르지 않아 오류가 발생했다.

상황 정리 :

1. ts 파일에서 maxlen 규칙이 적용되지 않음
2. 화살표 함수가 포함된 코드가 100줄이 넘어가 prettier 함수의 리턴 내용을 줄바꿈함
3. arrow-body-style, implicit-arrow-linebreak 규칙에 따라 올바르지 못한 함수 형식이라 오류를 띄움

조치 내용:

1. eslint.js > rules > max-len: ['error', { code: 100 }] 적용
2. eslint.js > rules > implicit-arrow-linebreak: 'warn' 적용

결과 :

ts 파일에도 maxlen 룰이 적용됨 implicit-arrow-linebreak 를 경고만 뜨게 해두어 줄이 넘어가도 경고가 뜨는 상황이다.

근본적인 문제는 해결하지 못한 상황이고 코드 규칙 또한 조금 더 다듬을 필요성을 느낌 추후 적절한 해결방법을 찾는다면 세팅을 다시 할 예정임

결론 : eslint 는 prettier 합이 잘 맞아야한다.

eslint 규칙세트 적용 상황

//eslint.js 
module.exports = {
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:@next/next/recommended',
    'airbnb',
    'airbnb/hooks',
    'airbnb-typescript',
  ],
  rules: {
    'no-console': 'off',
    'no-alert': 'off',
    'linebreak-style': 'off',
    'object-curly-newline': 'off',
    'no-tabs': 'off',
    'max-len': ['error', { code: 100 }],
    'import/order': [
      'error',
      {
        groups: [
          ['builtin', 'external'],
          ['index', 'sibling', 'parent', 'internal', 'object', 'type'],
        ],
      },
    ],
    'react/jsx-one-expression-per-line': 'off',
    'react/function-component-definition': [
      'error',
      { namedComponents: ['function-declaration', 'arrow-function'] },
    ], // 함수용 컴포넌트 정의 방식
    'react/jsx-props-no-spreading': 'warn', // props를 펼침연산자(spread operator)를 쓰는 것 제한
    'react/require-default-props': 'off', //  default props 설정해줘야 하는 것 제거
    'react/no-array-index-key': 'warn', // 배열안에서 index 값을 keys 로 쓰는 것을 제한
    '@typescript-eslint/semi': 'off',
    '@typescript-eslint/ban-types': 'warn', // 직접적으로 type 을 {} 로 주는 것을 제한
    '@typescript-eslint/indent': 'off',
    'import/no-named-as-default': 'off',
    'import/prefer-default-export': 'off',
    'class-methods-use-this': 'off', // class 설계시 this 사용 관련
    'arrow-body-style': 'warn', // arrow function body 스타일 관련
    'implicit-arrow-linebreak': 'warn',
  },
  ...
 }

prettier

//prettierrc.js 
module.exports = {
  proseWrap: 'never',
  arrowParens: 'always',
  bracketSameLine: false,
  bracketSpacing: true,
  endOfLine: 'lf',
  jsxSingleQuote: false,
  semi: false,
  singleQuote: true,
  tabWidth: 2,
  trailingComma: 'all',
  printWidth: 100,
  useTabs: false,
  singleAttributePerLine: false,
}