ESLint, Prettier 설정하기

ESLint, Prettier 설정하기

🔹ESLint

ESLint는 코딩 컨벤션에 위배되는 코드를 작성하거나 잘 못된 코드를 검출해주는 도구다.
해당 도구를 연결하는 것만으로 잘못된 코드 습관을 고치는데 크게 도움이 된다.
쓸데없이 import나 선언해두고 사용하지 않는 변수를 잡아주는 것은 시작에 불과하다.
미리 잘못된 코드들을 잡아주다보니 추후 버그가 나올 가능성이 현저히 줄어드게 된다.(그렇다고 만능은 아니지만 많은 부분에서 크게 도움이 된다. ts와 ESLint의 조합이란....)

🔹Prettier

Prettier는 코드 포맷터이다. 다양한 언어와 도구에서 지원이 되는데, 일관된 코드를 작성할 수 있게 도와주어 코드를 짜는데 있어서 가독성을 높여준다.
특히 협업을 할때, 누구는 2개의 탭을 넣고 누구는 4개의 탭을 넣게되어 쓸데없는 깃의 꼬이는 현상도 막아주고 일관된 코드를 작성해준다.
코드 스타일의 규칙을 초반에 정해놓고 설정만 해두면 prettier가 전담해서 코드를 일관성 있게 작성해주니 이후부터 코드 작성 스타일에 대한 스트레스와 시간을 절약해주는 좋은 도구이다.

🔹VSCode에서 사용법

VSCode에서 플러그인 설치 후 설정을 통해 연결할 수 있다.
ESLint를 검색하고 설치하면 된다.

Prettier도 마찬가지로 검색하면 바로 나오므로 설치해서 사용하면 된다.

🔹프로젝트별 ESLint설정법

프로젝트 최상단에 .eslintrc.cjs 또는 .eslintrc.json형태로 파일을 생성한다.
아래는 vite에서 react개발을 하면서 사용한 옵션들이다.

.eslintrc.cjs

module.exports = {
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime',
    'plugin:react-hooks/recommended',
  ],
  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
  settings: { react: { version: '18.2' } },
  plugins: ['react-refresh'],
  rules: {
    'react-refresh/only-export-components': 'warn',
  },
};

✨ 옵션별 설명

• env: 코드가 실행되는 개발 환경을 말한다. 브라우저, node서버, 등 목적에 맞게 작성한다. 환경의 설정값을 통해 eslint가 api와 전역변수들을 이해하고 분석해준다.
• extends: 공개된 설정들을 그대로 가져와서 해당 프로젝트에 적용하는 옵션(airbnb, goggle, facebook등 대기업에서 배포한 기술도 적용 할 수 있다.)
  • react/recommened: React프로젝트에 맞는 권장하는 규칙과 설정을 제공한다.(JSX, React 권장 패턴, 관행 등)
  • react-hooks: React Hook(useState, useEffect, useCallback등)관련된 권장 규칙과 설정을 제공
  • jsx-runtime: jsx의 관련된 규칙이 작성되어 있다.작성 형식, 태그닫기, 명명규칙 등을 도와주고 가독성을 높여준다.
• plugins: 기본적으로 제공하는 규칙 외에 추가적으로 적용할 규칙에 사용할 플러그인을 작성
• rules: extends옵션에서 설정된 규칙 외에 덮어쓰고 싶은 규칙을 작성할 때 사용되며, 규칙에 대한 내용을 세세하게 작성하기 위해 사용하는 옵션
• parserOptions: javascript코드를 이해하기 위해 Eslint에서 사용하는 파서를 구성한다. ECMAScript버전(ecmaVersion), sourceType: 소스유형
• ignore: eslint의 설정을 무시할 파일이나 디렉토리를 설정할 수 있다.

자세한 설정에 대한 내용은 아래 URL을 참고하자.
[https://eslint.org/docs/latest/use/configure/]

🔹프로젝트별 Prettier설정법

프로젝트별로 협업하는 사람들마다 스타일의 형태가 다양하다. 나만의 방식을 추구하고 싶겠지만, 협업이다보니 다수의 의견을 따라야 하는 경우가 있다. 이런 경우 나만의 VSCode에 설정한 Prettier가 아닌 프로젝트 최상단에 .prettierrc를 추가하고 옵션을 설정하면 된다.

아래는 .prettierrc 예시이다.
.prettierrc

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80
}

✨ 옵션별 설명

• printWidth: 최대 줄 너비를 지정
• tabWidth: 각 들여쓰기 수준에 대한 공백 또는 탭의 수를 지정
• useTabs: true설정시 Prettier는 들여쓰기에 공백 대신 탭을 사용
• semi: 명령문 끝에 세미콜론을 포함 여부
• singleQuoute: 문자열 리터럴에 작은땀옴표 또는 큰따옴표 사용여부 결정
• quouteProps: Javascript또는 JSON에서 개체 키를 처리하는 방법을 지정 "as_needed" 옵션은 필요한 경우에만 따옴표로 변환, "consistent"는 모든 키에 일관된 따옴표를 지정 "preserve"는 원래 따옴표를 유지
• jsxSingleQuoute: singleQuoute와 유사한 옵션이지만 jsx속성에 해당
• traillingCommna: 여러 줄 개체 리터럴 및 배열에 후행 쉼표를 포함 여부("all" 모든 여러 줄 배열 및 객체의 후행 쉼표, "es5" 해당 되는 경우 배열 및 객체의 후행 쉼표, "none" 후행 쉼표 없음)
• bracketSpacing: 개체 리터럴 대괄호({}) 사이에 공백을 포함할지 여부
• arrowParents: 화살표 함수 매개변수 주위에 괄호를 추가할지 여부("avoid" 매개변수가 하나만 있는 경우 괄호 없음, "always" 항상 괄호 추가)