ESLint 및 Prettier 줄바꿈 오류 해결 방안

문제 발생 상황

환경:

• 운영 체제는 Windows입니다.
• VSCode를 사용하여 프로젝트를 개발하고 있습니다.
• 프로젝트는 Mac 사용자가 생성했으며, Mac/Linux 환경의 기본 줄바꿈 방식인 LF를 사용하고 있습니다.
• ESLint와 Prettier가 설정된 프로젝트입니다.

프로젝트 ESLint 설정:

• ESLint는 plugin:prettier/recommended를 통해 Prettier 규칙을 ESLint 규칙으로 통합하고 있습니다.
• Prettier 규칙 위반 시 ESLint가 오류로 보고하도록 설정되어 있습니다.
• Prettier는 기본적으로 줄바꿈 방식을 Unix 스타일(LF)로 강제하고 있습니다.

문제 증상

pnpm i 실행 후 ESLint 및 Prettier에서 다음과 같은 오류가 발생하였습니다:

• [eslint] prettier/prettier: Delete ␍

Prettier가 줄바꿈 방식으로 LF를 요구했으나, Windows 환경에서 파일이 CRLF로 변환된 것이 원인으로 보입니다.

문제 원인

운영 체제 별 줄바꿈 차이:

• Mac 사용자는 기본적으로 LF 줄바꿈 방식을 사용하지만, Windows에서는 Git의 core.autocrlf 설정에 따라 파일을 CRLF로 변환합니다.
• Prettier는 줄바꿈 방식을 엄격히 검사하며, CRLF를 허용하지 않고 LF를 요구합니다.

Git의 줄바꿈 변환:

• Windows의 기본 설정인 core.autocrlf=true로 인해 파일을 Git 저장소에서 내 컴퓨터의 작업 디렉토리로 가져오면 CRLF로 변환됩니다.

Prettier와 ESLint 규칙의 엄격성:

• Prettier는 줄바꿈 방식의 일관성을 유지하도록 강제하며, ESLint는 Prettier 규칙 위반을 오류로 보고합니다.

해결 방법

1. Git 전역 설정 변경

리모트 레포지토리를 로컬로 클론할 때, 줄바꿈 방식을 LF로 고정하여 CRLF로 변환되는 문제를 방지합니다.

git config --global core.autocrlf false
git config --global core.eol lf

• git config --global core.autocrlf false: Git이 줄바꿈을 자동 변환하지 않도록 설정합니다.
• git config --global core.eol lf: 파일을 항상 LF 줄바꿈 방식으로 저장하도록 강제합니다.

2. ESLint와 Prettier 설정 고정을 통한 문제 해결

ESLint와 Prettier 설정을 고정하여 줄바꿈 방식을 강제하는 방법입니다.

Prettier 설정 추가

{
  "endOfLine": "lf"
}

ESLint 규칙 추가

{
  "extends": ["plugin:prettier/recommended"],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "lf"
      }
    ]
  }
}

주의: endOfLine: "auto"는 줄바꿈 방식을 강제하지 않으므로, LF와 CRLF 두 방식 모두 허용합니다.

3. 프로젝트 VSCode 설정

Windows 개발자의 편의를 위해 VSCode에서 파일 생성 시 자동으로 LF 방식으로 생성되도록 설정합니다.

{
  "files.eol": "\n",
  "editor.formatOnSave": true
}

• files.eol: "\n": 새로 생성되는 모든 파일의 줄바꿈 방식을 LF로 강제합니다.
• editor.formatOnSave: true: 저장 시 Prettier 등의 포매터를 자동 실행하여 줄바꿈 방식을 다시 정리합니다.

VSCode에서 수동으로 줄바꿈 방식을 변경하는 방법

VSCode에서 하단 상태 바에 있는 LF 또는 CRLF를 클릭하면 줄바꿈 방식을 선택할 수 있는 옵션이 나타납니다. 하지만, 이 방법은 현재 파일에만 적용되므로, 앞으로 생성되는 모든 파일에 일관된 줄바꿈 방식을 사용하려면 위에서 설명한 방법처럼 설정에서 기본값을 변경하는 것이 좋습니다.

결론

위 해결 방법을 통해 운영 체제 간의 줄바꿈 방식 차이로 인해 발생하는 문제를 완벽히 해결할 수 있습니다. 이 방법을 프로젝트 초기 설정에 포함시키면, 줄바꿈 문제로 인한 불필요한 시간 낭비를 방지하고, 모든 팀원이 동일한 환경에서 작업할 수 있는 기반을 마련할 수 있습니다.

Vue3 + Typescript + Vite + ESLint + Prettier + Pinia + Router + Tailwind

Vite, Vue3, TypeScript, ESLint, Prettier, Pinia, Vue Router, Tailwind CSS 설치 및 설정

목적

• Vite: 빠른 빌드 도구, 서버 실행 중 추가 패키지 설치 반영
• Vue3: 쉽고 직관적인 프레임워크
• TypeScript: JavaScript의 기능 보완
• ESLint: 일관성 있는 코딩을 위한 도구
• Prettier: 일관성 있는 코딩 스타일을 위한 도구 (줄바꿈, 공백 등)
• Pinia: Vuex 대신 사용하는 상태 관리 라이브러리
• Vue Router: URL 라우터
• Tailwind CSS: 유틸리티 기반의 CSS 프레임워크

프로젝트 생성

아래 명령어로 새로운 Vite 프로젝트를 생성합니다:

$ npm create vite@latest 프로젝트명 --template vue-ts

프로젝트 디렉토리로 이동하여 의존성 패키지를 설치하고 개발 서버를 실행합니다:

$ cd 프로젝트명

$ npm install

$ npm run dev

@types/node 설치

Node.js 타입을 제공하는 패키지를 설치합니다:

$ npm install --save-dev @types/node

vite.config.ts 설정

Vite 설정 파일을 작성합니다:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import * as path from "path";

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: { "@": path.resolve(__dirname, "./src") },
  },
});

tsconfig.json 설정

TypeScript 설정 파일을 작성합니다:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

ESLint, Prettier 설치

ESLint와 Prettier를 설치하여 코드 스타일을 일관되게 유지합니다:

$ npm install -D prettier

$ npm install -D eslint

$ npm install -D eslint-plugin-vue

$ npm install -D eslint-config-prettier

$ npm install -D @vue/eslint-config-typescript

.eslintrc.js 파일 작성하기

ESLint 설정 파일을 작성합니다:

module.exports = {
  env: {
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'prettier'
  ],
  rules: [
    // override or add rules settings here
  ]
};

Pinia 설정

Pinia를 설치하고 상태 관리를 위한 플러그인을 추가합니다:

$ npm install pinia

import { createPinia } from 'pinia';

const pinia = createPinia();

...use(pinia);

Vue Router 설정

Vue Router를 설치하고 URL 라우팅을 설정합니다:

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";

const routes: Array = [
  { path: "/", component: () => import("../views/Home.vue") },
  { path: "/about", component: () => import("../views/About.vue") }
];

export default createRouter({
  history: createWebHistory(),
  routes,
});

main.ts 파일에서 Vue Router를 플러그인으로 추가합니다:

import router from "./router";
...use(router);

Tailwind CSS 설정

Tailwind CSS를 설치하고 설정합니다:

$ npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

$ npx tailwindcss init -p

Tailwind CSS 스타일을 적용하려면 main.ts 파일에 아래를 추가합니다:

import 'tailwindcss/tailwind.css';