웹사이트 검색

비주얼 스튜디오 코드 - VSCode /w. TypeScript 모노레포에서 Prettier


저는 현재 모노레포 세팅에서 VSCode 확장을 통해 Prettier를 사용하고 있습니다. 문제는 Prettier가 제 api 폴더에서는 완전히 작동하지 않는다는 것입니다. 기본 줄 길이를 무시하고 세미콜론이 자동으로 추가되지 않습니다. 이상하게도 www 폴더는 평소대로 작동하며 Prettier 기능이 누락된 부분이 없습니다.

Prettier 설정은 VSCode의 "사용자 설정"을 통해 전역으로 설정됩니다.

  • www - NextJS
  • api - 아폴로 서버
|--- api
    |--- package.json
    |--- tsconfig.json 
    |--- server.ts
|--- www
    |--- pages
         |--- index.tsx
    |--- package.json
    |--- tsconfig.json 

www/tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "noUnusedLocals": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  }
}

api/tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "target": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist",
    "baseUrl": ".",
    "paths": {
      "*": ["node_modules/*", "src/types/*"]
    }
  }
}

답변 #1

원하는 모든 옵션과 함께 .prettierrc를 프로젝트 루트에 추가해 보세요.