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เพื่อจัดรูปแบบโค้ดให้สวยงามและอ่านง่าย

Top comments (0)