TIL-23.05.23

 

 

문제점:

프로젝트 초기 세팅을 하면서 기술매니저님께 eslint를 적용해 코드품질을 향상하라는 조언을 받았다.

근데 문제는, eslint를 프로젝트에 적용해본적이 거의 없다는것..

ESLint란 코드에 있는 문법적인 오류를 잡고 코드 문법을 강제하는 등의 코드 품질 향상을 위해서 사용한다.

곁들여 코드 스타일도 통일성을 주기위해 Prettier를 같이 세팅한다.

프리티어 세팅을 해본적이 있어 사용법을 알지만, ESLint 세팅법을 몰라 참고자료를 찾아 익히기로 했다.

 

 

 

 

시도한점

프로젝트 내에서 ESLint 패키지를 설치해 준 뒤, 루트 위치에 .eslintrc 파일을 생성

파일 내부에 어떠한 코드 규칙을 따를 것인지 작성하는것이다. 내가 적용하기로 한 코드 문법은 많이들 사용하는 airbnb

 

module.exports = {
  env: {
    browser: true,
    es2021: true,
    amd: true,
  },
  extends: [
    'eslint:recommended',
    'airbnb',
    'plugin:prettier/recommended',
    'plugin:react/jsx-runtime',
  ],
  rules: {
    'import/no-unresolved': 'off',
    'react/prop-types': 0,
    'no-extra-semi': 'error',
    'react/jsx-props-no-spreading': 'off',
    'no-unused-vars': 'warn',
    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
    'react/self-closing-comp': [
      'error',
      {
        component: false,
        html: false,
      },
    ],
  },
};

extends 항목에 'airbnb'의 코드 규칙을 따른다 명시해주고, 내 필요에 맞게 추가적인 규칙들을 설정해주었다.

프로젝트 초기 세팅 시 필요한 규칙들만 오버라이딩한것이지만,  프로젝트를 진행하면서 불편한? 혹은 필요한 규칙들을 팀원과 상의해 추가할 예정이다. ESLint없이 프로젝트를 진행했을때보다 분명히 더 깐깐한 느낌을 받겠지만,  이번 프로젝트는 적용해보면서 필요성을 느껴볼예정이다.

 

 

 

알게된점

프로젝트 세팅에 있어서 필요조건일수도 있는 ESLint,,, 근데 살짝 코딩을 작성해보니 구몬 선생님같은 깐깐함을 바로 느끼게 해주었다.

규칙을 따르며 코드를 작성하니 아무래도 코드품질이 좋아지겠지