DEV Community

Cover image for แชร์ไฟล์ Prettier ง่ายๆ แค่ปลายนิ้ว!
Passakon Puttasuwan
Passakon Puttasuwan

Posted on

แชร์ไฟล์ Prettier ง่ายๆ แค่ปลายนิ้ว!

เคยไหม? เขียนโค้ดเสร็จ แต่ format ไม่สวย อ่านยาก 😩

Prettier ช่วยคุณได้! 🪄

Prettier เป็นตัวจัดรูปแบบโค้ดอัตโนมัติ ช่วยให้โค้ดของคุณสวยงาม อ่านง่าย และเป็นระเบียบ โดยไม่ต้องเสียเวลาจัด format เอง

เมื่อสร้างโปรเจ็กต์มากขึ้นเรื่อยๆ ฉันได้มองหาวิธีที่จะแบ่งปันไฟล์กำหนดค่า Prettierโชคดีที่ Prettierรองรับฟีเจอร์นี้แล้ว

คุณต้องเผยแพร่โมดูลที่มีการตั้งค่า Prettier ที่ปรับแต่งเองเท่านั้น

วิธีทำ

1.สร้างไฟล์

  • package.json เก็บข้อมูลโมดูล
  • index.json เก็บการตั้งค่า Prettier

2.ใส่ข้อมูลในไฟล์

package.json

{
  "name": "@your-name/prettier-config",
  "version": "1.0.1",
  "description": "Prettier Config",
  "main": "index.json",
  "license": "MIT",
  "keywords": [
    "prettier",
    "prettier-config"
  ],
  "repository": {
    "type": "git",
    "url": "https://github.com/"
  },
  "homepage": "https://github.com/"
}
Enter fullscreen mode Exit fullscreen mode

index.json

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "none",
  "printWidth": 100
}
Enter fullscreen mode Exit fullscreen mode

3. publish โมดูล

4. ใช้ในโปรเจ็กต์อื่น

หากคุณต้องการใช้การตั้งค่า Prettier ที่แชร์ไว้ในโปรเจ็กต์อื่น คุณต้องอ้างอิงถึงมันในไฟล์ manifest package.json ของโปรเจ็กต์ของคุณโดยเพิ่มพารามิเตอร์ prettier:

ตัวอย่าง

{
  "name": "my-cool-library",
  // ...
  "prettier": "@your-name-here/prettier-config"
  // ...
}
Enter fullscreen mode Exit fullscreen mode

แค่นี้ก็เรียบร้อย!

ลองใช้ Prettierเพื่อจัดรูปแบบโค้ดให้สวยงามและอ่านง่าย

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs