나의 전용 템플릿 엔진(?) 제작기 - Prettier

개요

ESLint용 패키지도 추가해서 배포까지 완료하였다.
ESlint의 경우 설치 패키지등이 많아서 복잡했지만, Prettier의경우 단일패키지만 깔고 모두 프로젝트에 위임할것이기때문에 굉장히 쉬울 것 이다.

환경구성

my-monorepo-template/      
├── packages/
│   ├── eslint-config/
│   ├── **prettier-config/**
│   ├── tsconfig/
│   ├── react-template/
│   └── nextjs-template/
├── package.json
└── pnpm-workspace.yaml

기존 구조에서 packages/prettier-confing 부분에 넣을예정이다

초기설정

1. 패키지내부에 폴더랑 파일을 추가해 주도록한다
2. mkdir -p packages/prettier-config cd packages/prettier-config # 패키지 초기화 pnpm init
3. 내부 파일을 만들어서 넣는다
4. # 다음 파일들 생성 touch index.js
5. prettier 패키지를 설치한다.
6. pnpm --filter **${본인 패키지 이름}**/prettier-config add prettier

코드

1. pacakge.json

    {
      "name": "@rendardev/prettier-config",
      "homepage": "https://github.com/RendarCP/rendar-mono-template",
      "repository": {
        "type": "git",
        "url": "git+https://github.com/RendarCP/rendar-mono-template.git",
        "directory": "packages/prettier-config"
      },
      "version": "1.0.0",
      "description": "Prettier configurations for Rendar Mono Template",
      "main": "index.js",
      "files": [
        "index.js",
        "README.md"
      ],
      "publishConfig": {
        "access": "public"
      },
      "license": "MIT",
      "dependencies": {
        "prettier": "^3.4.2"
      },
      "peerDependencies": {
        "prettier": ">=3.0.0"
      }
    }
   

2. peerDependecies에 최소 패키지 버전을 명시해준다
3. index.js

    module.exports = {
      printWidth: 80, // 한 줄의 최대 길이를 80자로 제한
      tabWidth: 2, // 들여쓰기 시 탭 너비를 2칸으로 설정
      useTabs: false, // 들여쓰기에 탭 대신 스페이스 사용
      semi: true, // 문장 끝에 세미콜론 추가
      singleQuote: true, // 작은따옴표 사용
      quoteProps: "as-needed", // 객체의 속성에 필요한 경우에만 따옴표 추가
      trailingComma: "es5", // ES5에서 유효한 후행 쉼표 추가 (객체, 배열 등)
      bracketSpacing: true, // 객체 리터럴의 중괄호 사이에 공백 추가 ({ foo: bar })
      arrowParens: "avoid", // 화살표 함수의 매개변수가 하나일 때 괄호 생략 (x => x)
      proseWrap: "preserve", // 마크다운 등의 prose 텍스트의 줄바꿈을 보존
      endOfLine: "auto", // 운영체제에 따라 자동으로 개행 문자 설정
      htmlWhitespaceSensitivity: "css", // CSS display 속성 값에 따라 HTML 공백 처리
      embeddedLanguageFormatting: "off", // 템플릿 리터럴 내부 등의 포매팅 비활성화
    };
   

4. 최소 기능을 추가해준다 (이외 기능은 프로젝트에 위임)

배포

npm에 배포를 해보자

pnpm publish-prettier

https://www.npmjs.com/package/@rendardev/prettier-config

매울 잘 배포되었음을 확인할수 있다.

사용방법은 패키지 링크 참조바랍니다.

https://github.com/RendarCP/rendar-mono-template/tree/main/packages/prettier-config

마무리

기본적인 lint와 prettier설정은 완료되었다 tsconfig부분이 남아있으나,

일단 기본적인 설정은 완성된것 같다.

아래는 참고했던 린트설정 패키지인데 네이버페이, 트리플의 코드를 참고하였다

https://github.com/NaverPayDev/code-style

https://github.com/titicacadev/triple-config-kit