공유 Prettier 구성을 만드는 방법

This post was originally posted over on my personal website. Maybe you want to check it out [HERE].

여러 프로젝트에서 스타일 지정 및 보푸라기 도구에 대한 구성을 일관되게 유지하는 것은 어려울 수 있습니다. 많은 도구가 한 번 생성되어 모든 곳에서 사용되는 공유 구성을 지원합니다. 이 기사에서는 더 예쁘게 공유 구성을 만드는 방법을 알아봅니다.

동기 부여

최근에 우리는 Typescript 코드를 작성하는 방법에 대한 공통 스타일을 갖고 싶다고 결정했습니다. 이렇게 하면 다른 사람이 작성한 코드 또는 몇 달 전에 직접 작성한 코드를 더 쉽게 읽고 이해할 수 있습니다. 따라서 우리는 Prettier 통합에 동의했습니다. 형식화된 독단적인 코드입니다.

수십 개의 모든 프로젝트에서 처음으로 prettier를 채택했을 때 우리는 한 프로젝트에서 다른 프로젝트로 구성을 복사/붙여넣기했습니다. 필요에 맞게 구성을 업데이트하면서 프로젝트에서 일관되지 않은 옵션에 직면했습니다. 그래서 우리는 동시에 모든 프로젝트에 대해 전역적으로 더 예쁜 옵션을 변경하는 방법을 알아내야 했습니다. 운 좋게도 더 예쁜 관리자가 당신을 덮었습니다. 그들은 이미 그 문제를 생각했고 별도의 npm 패키지를 만들어 여러 프로젝트에서 구성을 공유하는 기본 방법을 제공합니다. ( Sharing Configurations )

이 가이드에서는 경이로운 플러그인Tailwind Prettier plugin과 같이 더 예쁜 플러그인이 있는 여러 프로젝트를 충족하기 위해 공유 구성을 구성하는 방법을 보여드리고자 합니다. 그러나 프로젝트에 이 특정 프로젝트에만 일부 특수 구성 옵션이 필요한 경우 확장 가능하도록 합니다.

시작하다

우선 저장소를 초기화해야 합니다. 저는 TypeScript를 좋아하기 때문에 공유 구성 자체가 TypeScript로 작성되고 빌드 단계를 통해 자바스크립트로 트랜스파일되기를 원했습니다. Rollup.js를 사용하여 이 작업을 수행하지만 Webpack도 트릭을 수행해야 합니다. 그래서 시작하자..

Typescript 설치는 프로젝트 루트에서 npm i -D typescript를 실행하고 tsconfig.json를 생성하여 간단하게 설치할 수 있습니다. 나는 이것을 사용하고 있습니다 :

{
  "compilerOptions": {
    "target": "es6",
    "module": "ESNext",
    "strict": true,
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "outDir": "dist",
    "declaration": true,
    "declarationDir": "dist/types",
    "declarationMap": true,
    "resolveJsonModule": true,
    "baseUrl": ".",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2015",
      "es2017"
    ]
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

이제 rollup.config.js를 추가하여 Rollup.js 설정을 초기화하고 싶습니다.

import excludeDependenciesFromBundle from 'rollup-plugin-exclude-dependencies-from-bundle';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from 'rollup-plugin-typescript2';
import { visualizer } from 'rollup-plugin-visualizer';

// eslint-disable-next-line @typescript-eslint/no-var-requires
const packageJson = require('./package.json');

export default {
    input: 'src/index.ts',
    inlineDynamicImports: true,
    output: [
        {
            file: packageJson.main,
            format: 'cjs',
            exports: 'default',
            sourcemap: true,
        },
    ],
    plugins: [
        excludeDependenciesFromBundle(),
        resolve(),
        commonjs(),
        typescript({
            useTsconfigDeclarationDir: true,
        }),
        visualizer({
            filename: 'package-deps.html',
            template: 'sunburst',
            gzipSize: true,
            brotliSize: true,
        }),
    ],
};

I will skip the installation of the necessary dependencies, as I think already know this when you are interested in creating a shared prettier config ;)

이제 마침내 src 폴더에 공유 구성을 실제로 만들 준비가 되었습니다.

import type { Config } from 'prettier';

const defaultConfig: Config = {
    singleQuote: true,
    bracketSameLine: true,
    tabWidth: 4,
    plugins: [],
    overrides: [
        {
            files: '**/*.{json,yml,yaml}',
            options: {
                tabWidth: 2,
            },
        },
        {
            files: '**/*.{yml,yaml}',
            options: {
                singleQuote: false,
                bracketSpacing: false,
            },
        },
    ],
};

export default defaultConfig;

마지막으로 이 프로젝트에서 바로 빌드한 구성을 사용하는 멋진 작은 트릭을 보여드리고 싶습니다. 프로젝트 루트에 prettier.config.js 파일을 생성하면 됩니다. 거기에 다음 내용을 넣습니다.

/** @type {import('prettier').Options} */
module.exports = require('./dist/prettier-config');

우리는 실제로 빌드 모듈을 가져오고 다시 내보내서 더 예쁜 명령이 찾을 수 있도록 합니다. 그러나 참고: 관련 빌드 단계가 있으므로 공유 구성의 변경 사항을 프로젝트에 적용하려면 먼저 빌드해야 합니다!