Daily Logs/TIL (Today I Learned)

숏폼 프로젝트 ES LINT , prettier 설정 및 트러블 슈팅

Jcob.moon 2024. 12. 8. 14:01

ESLINT DELETE CR 에 대한 오류



.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',
  },
};

.eslintrc.js 파일 수정 후  rules부분에 endOfLine:'auto'를 추가했습니다.

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: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto',
      },
    ],
    '@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',
  },
};



.prettierrc 파일 도 endOfLine을 추가했습니다.

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 100,
  "arrowParens": "always",
  "orderedImports": true,
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "endOfLine": "lf"// 추가 부분
}


ESLint에서 발생하는 "Delete ␍ (prettier/prettier)" 오류는 코드에 CRLF(Windows 스타일의 줄 바꿈)가 포함되어 있을 때 발생합니다. 이는 주로 Windows에서 코드 작성 시 발생하는 문제입니다.
이를 해결하기 위해프리티어 파일에

"endOfLine": "lf"

를 추가하고 eslint 파일 룰 부분에도 이부분을 추가하였습니다.

'prettier/prettier': [
  'error',
  {
    endOfLine: 'auto',
  },
],



추가로 현재 되어있는 ESLint 설정 .eslintrc.js 에 대해서 정리 해봤습니다.

parser: '@typescript-eslint/parser',


이 설정은 ESLint가 TypeScript 코드를 이해하도록 돕는 파서를 설정합니다.
@typescript-eslint/parser는 TypeScript 코드 분석을 위한 ESLint 파서입니다. 

parserOptions: {
  project: 'tsconfig.json',
  tsconfigRootDir: __dirname,
  sourceType: 'module',
},

 

  • project: ESLint가 TypeScript 코드의 문법과 타입을 분석하기 위해 사용할 tsconfig.json 파일을 지정합니다.
  • tsconfigRootDir: tsconfig.json의 경로를 정의하는 옵션입니다. 프로젝트의 루트 디렉터리인 __dirname을 지정하여 프로젝트의 경로를 명확히 합니다.
  • sourceType: 'module'을 설정하면 ECMAScript 모듈을 사용할 수 있습니다. 즉, import와 export 구문을 사용하도록 합니다.
{
  "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "ES2021",
    "sourceMap": true,
    "outDir": "./dist",
    "baseUrl": "./",
    "incremental": true,
    "skipLibCheck": true,
    "strictNullChecks": false,
    "noImplicitAny": false,
    "strictBindCallApply": false,
    "forceConsistentCasingInFileNames": false,
    "noFallthroughCasesInSwitch": false,
    "esModuleInterop": true,
    "typeRoots": ["./node_modules/@types", "./src/types"]
  }
}

 

plugins: ['@typescript-eslint/eslint-plugin'],

이 설정은 TypeScript와 관련된 ESLint 플러그인인 @typescript-eslint/eslint-plugin을 사용하도록 합니다. TypeScript에서의 코딩 규칙을 ESLint에 적용할 수 있게 됩니다.

extends: ['plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended'],

 

  • plugin:@typescript-eslint/recommended: TypeScript에 대해 권장되는 ESLint 규칙을 적용합니다.
  • plugin:prettier/recommended: Prettier와 충돌하지 않도록 ESLint 규칙을 설정합니다. Prettier는 코드 스타일을 자동으로 포맷팅하고, ESLint는 그 스타일을 강제합니다. 이 설정은 두 가지를 통합하여 코드 스타일 관련 규칙을 일관되게 적용할 수 있게 합니다.
env: {
  node: true,
  jest: true,
},

 

  • node: Node.js 환경에서 실행되는 코드에 맞게 환경 설정을 적용합니다.
  • jest: Jest 테스트 프레임워크에서 사용하는 전역 변수 및 설정을 인식합니다.
ignorePatterns: ['.eslintrc.js'],

ESLint가 특정 파일을 검사하지 않도록 설정하는 옵션입니다. 여기서는 .eslintrc.js 파일을 ESLint 검사의 대상에서 제외시킵니다.

rules: {
  'prettier/prettier': [
    'error',
    {
      endOfLine: 'auto',
    },
  ],
  '@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',
},

 

  • prettier/prettier: Prettier 규칙을 ESLint와 통합하여 적용합니다. endOfLine: 'auto'는 줄 바꿈 스타일을 자동으로 설정하되, 운영 체제에 맞는 스타일(CRLF 또는 LF)을 사용하도록 합니다.

  • @typescript-eslint/interface-name-prefix: 인터페이스 이름에 I 접두사를 붙이지 않도록 설정합니다. 기본적으로 TypeScript에서는 인터페이스 이름에 I를 붙이는 규칙이 있지만 이를 비활성화합니다.

  • @typescript-eslint/explicit-function-return-type: 함수의 반환 타입을 명시하지 않아도 되도록 설정합니다.

  • @typescript-eslint/explicit-module-boundary-types: 모듈 경계에서의 타입을 명시하지 않아도 되도록 설정합니다.

  • @typescript-eslint/no-explicit-any: any 타입 사용을 허용합니다.


다음은 현재 적용되어 있는 pettier 설정 입니다.

"singleQuote": true,

문자열을 쌍따옴표 (") 대신 홑따옴표 (')로 감싸도록 설정합니다.

"semi": true,

문장 끝에 세미콜론 (;)을 반드시 추가하도록 설정합니다.

"useTabs": false,

탭 대신 스페이스를 사용하여 들여쓰기를 합니다.

"tabWidth": 2,

들여쓰기에 사용할 공백의 개수를 설정합니다. 여기서는 2개의 공백을 사용하도록 설정합니다.

"trailingComma": "all",

객체나 배열의 마지막 항목 뒤에 항상 쉼표를 추가하도록 설정합니다.

"printWidth": 100,

한 줄에 작성할 수 있는 최대 문자 수를 설정합니다. 100자로 설정하면 100자 이상은 줄 바꿈을 하도록 합니다.

"arrowParens": "always",

화살표 함수에서 인자가 하나라도 있을 경우 괄호를 항상 사용하도록 설정합니다.

"orderedImports": true,

import 구문을 알파벳 순서로 정렬하도록 설정합니다.

"bracketSpacing": true,

객체 리터럴에서 중괄호 {와 } 사이에 공백을 추가하도록 설정합니다.

"jsxBracketSameLine": false,

JSX에서 >가 마지막 줄에 올 때, 닫는 괄호를 새로운 줄로 내려서 작성하도록 설정합니다.

"endOfLine": "lf"

줄 바꿈을 LF (Unix 스타일)로 설정합니다. 이 설정은 파일의 줄 끝에 LF만 사용되도록 강제합니다.

참고자료 :