@jihyunlab/prettier-config

Prettier는 작성된 코드를 정해진 코딩 스타일로 변환해 주는 코드 포맷터입니다.
@jihyunlab/prettier-config는 타입스크립트를 위한 Prettier 설정을 제공합니다.

설치

프로젝트 폴더에서 @jihyunlab/prettier-config를 설치합니다.

npm i --save-dev @jihyunlab/prettier-config prettier eslint-config-prettier eslint-plugin-prettier

---

구성

Prettier 구성

prettier.config.mjs 파일을 생성하고 수정합니다.

├─ prettier.config.mjs
└─ ...

import { jihyunlabPrettierConfig } from '@jihyunlab/prettier-config';

export default {
  ...jihyunlabPrettierConfig,
};

Prettier Ignore 구성

.prettierignore 파일을 생성하고 수정합니다.

├─ .prettierignore
└─ ...

/node_modules
/build
/dist
/coverage

ESLint 구성

ESLint 사용 시, eslint.config.mjs 파일을 수정합니다.

├─ eslint.config.mjs
└─ ...

import eslint from '@eslint/js';
import tsEslint from 'typescript-eslint';
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
import { jihyunlabEslintConfig } from '@jihyunlab/eslint-config';

export default tsEslint.config(
  {
    ignores: ['node_modules', 'dist', 'build', 'coverage'],
  },
  {
    languageOptions: {
      parserOptions: {
        project: './tsconfig.eslint.json',
        tsconfigRootDir: import.meta.dirname,
      },
    },
  },
  {
    files: ['**/*.ts', '**/*.tsx', '**/*.cts', '**/*.mts'],
    extends: [
      eslint.configs.recommended,
      ...tsEslint.configs.recommendedTypeChecked,
      jihyunlabEslintConfig,
      eslintPluginPrettierRecommended,
    ],
  }
);

VSCode 구성, 플러그인 설치

VSCode 사용 시, 설정 파일을 생성, 수정하고 플러그인을 설치합니다.

.vscode/settings.json 파일을 생성하고 수정합니다.

├─ .vscode
│  └─ settings.json
└─ ...

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

확장 탭에서 Prettier 플러그인을 설치합니다.

---

라이센스

Open source licensed as MIT.