목적

개발자 간의 코드 스타일 통일, Lint 규칙에 맞춰 작업하여 코드 퀄리티의 일관성과 가독성을 향상

그래서 회사에서 사용하는 business ESLint Config 같은 경우에 기업에서 사용하는 것에 경우 러닝 커브가 크고 둘이서 협업하는데 그렇게 방대한 ESLint 규칙이 필요할 것 같지 않아서 간단하게 가는건 어떨지 생각이 들었음.

{
  "extends": "eslint:recommended",
  "env": {
    "browser": true,
    "node": true,
    "es2021": true
  },
  "parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module"
  },
  "rules": {
    "semi": ["error", "always"], // 세미콜론
    "quotes": ["error", "single"], // 인용부호
    "indent": ["error", 2], // 들여쓰기
    "no-unused-vars": ["error", { "argsIgnorePattern": "^_" }], // 사용하지 않는 변수
    "no-console": ["error", { "allow": ["warn", "error"] }], // 프로덕션 환경에서 불필요한 로그 출력 방지
    "prefer-const": "error", // const 권장
    "camelcase": ["error", { "properties": "never" }], // 변수명 카멜케이스
    "max-len": ["error", { "code": 120, "ignoreUrls": true }], // 코드 화면 가시성 최적화
    "no-multiple-empty-lines": ["error", { "max": 1, "maxEOF": 1 }], // 연속된 빈 줄을 최대 1개로 제한
    "comma-dangle": ["error", "always-multiline"], // 객체 or 배열 마지막 요소, 강제
    "curly": ["error", "all"], // 블록문 중괄호 
    "brace-style": ["error", "1tbs"], // 중괄호 스타일 강제
    "no-use-before-define": ["error", { "functions": false }], // 호이스팅 버그 방지
  }
}

ESLint

정의된 컨벤션을 기준으로 이를 준수하지 않은 코드, 사용되지 않는 변수나 잘못된 문법과 같은 안티 패턴을 사전에 검출하여 방지하는 정적 분석 도구.

--fix를 통해 자동으로 수정할 수 있고 직접 규칙을 수정할 수 도 있으나 엄격한 규칙 세트들을 가져와 사용할 수 도 있음

Prettier

편집기에서 텍스트를 일관되게 작성할 수 있도록 도움을 주는 포맷팅 도구

들여쓰기, 공백, 따옴표, 줄바꿈 등 순전히 스타일에만 집중한다.

이 둘은 서로 상호 보완적인 관계로 코드의 품질과 일관된 스타일을 동시에 관리할 수 있으나 둘의 겹치는 일부 코드 스타일 규칙을 가지고 있어 일반적으로 eslint-config-prettier 패키지를 통해 겹치는 ESLint이 스타일 규칙을 제외시키는 것이 일반적인 설정 방법이다.

ESLint Extension을 에디터에 설치해야 하는데 ESLint Extension은 에디터에 직접 적용되어 동작하고, 해당 프로젝트의 ESLint를 우선적으로 찾아 참조한다. 만약 ESLint가 프로젝트 내에 존재하지 않으면 Global로 설치된 ESLint를 찾아 참조하게 된다.

마찬가지로 Prettier Extension도 설치가 되어 있기를 바란다.

https://velog.io/@cataiden/eslint-prettier

Eslint-Flat-Config