eslint

eslint 란

• Javascript linter 중 하나
  => 소스 코드에 문제가 있는지 탐색 을 도와주는 도구
• 정적 코드 분석 도구
• 일관된 코딩 스타일 유지하게 도와주며 일반적 오류 자동 감지 & 수정

eslint 핵심 기능

• 코드 검사 및 규칙 적용
• 다양한 플러그인 지원
• 사용자 지정 규칙 및 구성
• IDE 통합
• CI/CD 파이프라인 과 통합

eslint option

• env : 코드 실행 환경에 대한 정보 설정
  => env : { browser : true } ( 브라우저에서 실행되는 코드 )
• globals : 전역 변수 정의하거나 무시 가능
  => globals : { MyGlobal : "readonly" } ( MyGlobal 를 readonly 로 전역 선언 )
• parser : 코드 파싱 유형 결정
  => parser: "@typescript-eslint/parser" ( 해당 parser 를 활용해 typescript 분석 )
• parserOptions : 지정 파일을 사용해 타입 검사를 수행하도록 parser 에게 지시
  => parserOptions : { project : "tsconfig.json" }

---

• extends : 다른 ESLint 구성 확장
  => extends:[ "plugin:@typescript-eslint/recommended", ]
  ( ESLint 에서 제공하는 기본 규칙 사용 가능 )
• plugins : ESLint 플러그인 설정
  => plugins : ["plugin:@typescript-eslint/recommended"]

extends vs plugins

• extends 는 다른 구성 파일을 가져와서 적용
• plugins 는 특정 규칙을 포함하는 플러그인 로드해 사용

---

• rules : 사용자 지정 규칙 설정
  => rules : {
  "no-console" : "error",
  "no-unused-vars":"warn",
  "@typescript-eslint/consistent-type-definitions":"off"
  }
  ( console log 시 Error 발생! , 사용하지 않는 변수 선언시 Warn 발생! , 밑에 rule 은 사용 X )
• ignorePatterns : - 무시할 파일 패턴 설정
  => ignorePatterns : ["node_modules/"]
  ( 해당 Directory File 들 무시 )
• override : 일부 File 만 다른 설정을 적용할 시 에 사용
  => "overrides" : { "files" : "/src" }
  ( files 로 경로 지정 )

eslint in VScode ( typescript )

1. npm install eslint
2. .eslintrc 에 Setting 작성
3. package.json 에 "eslint \"{src,apps,libs,test}/*/.ts\" --fix" script 작성

예시 .eslintrc.js

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: 'tsconfig.json',
    tsconfigRootDir: __dirname,
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint/eslint-plugin'],
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  root: true,
  env: {
    node: true,
    jest: true,
  },
  ignorePatterns: ['.eslintrc.js'],
  rules: {
    '@typescript-eslint/interface-name-prefix': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    "@typescript-eslint/no-duplicate-imports": "error",
    "@typescript-eslint/no-empty-function":'off',
  },
};