Tslint & Prettier

การตั้งค่าให้ Prettier กับ ESLint อยู่ร่วมกันอย่างสันติสุข

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

Lint นั้นเอาใว้เช็ค code syntax ของ JavaScript เพื่อไม่ให้เกิด 🐛 bug หรือ 🚫 error ขึ้นมาโดยที่เราไม่รู้ตัวว่าเขียนอะไรผิดๆ ลงไป หรือยังสมารถเช็ค code quality ได้

การตั้งค่า Prettier ให้อยู่ร่วมกับ ESLint 🤝

ใน Lint เองไม่ได้มีแค่ กฎของการเช็ค code quality หรือ syntax แต่ยังมีเรื่องการทำ code formatter ด้วย ทำให้ถ้าหากใช้ร่วมกับ Prettier ก็มีแต่จะตีกันไปมา และแต่ล่ะตัวก็เก่งในแบบของตัวเอง Lint เก่งด้าน code quality, syntax check และ Prettier เองก็เก่งด้านการทำ code formatter ให้สวยงามตรงมาตฐาน

Install

npm install --save-dev tslint-config-prettier

เพิ่ม "tslint-config-prettier" ไปที่ส่วน "extends" และสำคัญก็คือต้องใว้ลำดับสุดท้าย

#tslint.json
{
  "extends": [ "tslint:recommended", "tslint-config-prettier" ]
}

#package.json
{
  "scripts": {
    "tslint-check": "tslint-config-prettier-check ./tslint.json"
  }
}

เรียกใช้งาน

npm run tslint-check

Example

ผลลัพธ์

ผลลัพธ์จะเจอ conflict ที่ซ้ำกันคือ quotemask ซึ่งจะทำให้พอรันเรา format ด้วย prettier จะได้ "" ออกมา แต่พอรันเช็คด้วย tslint จะไม่ผ่าน

การตั้งค่าให้ Prettier กับ ESLint อยู่ร่วมกันอย่างสันติสุข🤝Medium

อ่านเพิ่มเติม

Integrating with Linters · Prettierprettier.io

อ่านเพิ่มเติม