GetNotes logo
GetNotes
กลับไปหน้า Tools

GetNotes Tools

CorentinTh/it-tools

Tool นี้คืออะไร

ชุดเครื่องมือออนไลน์ที่รวบรวมยูทิลิตี้ที่มีประโยชน์สำหรับนักพัฒนาและคนทำงานสาย IT ช่วยให้การทำงานสะดวกและรวดเร็วขึ้นผ่านอินเทอร์เฟซที่ใช้งานง่าย

ข้อมูลโปรเจกต์

ดาว

40K

Forks

5.3K

License

GPL-3.0

อัปเดต GitHub ล่าสุด

24 ก.ค. 2569

เพิ่มใน GetNotes

13 ก.ค. 2569

Repository

CorentinTh/it-tools

เหมาะกับงาน

Developer Toolsเพิ่ม Productivityออกแบบ UI/UX

เหมาะกับอาชีพ

ProgrammerUX/UI DesignerProduct Designer

Ecosystem

Vue

แปลและเรียบเรียงโดย AI

เนื้อหาฉบับภาษาไทย

ใช้อ่านเพื่อทำความเข้าใจเบื้องต้น โปรดตรวจสอบรายละเอียดสำคัญกับเอกสารต้นฉบับด้านล่าง

ฟังก์ชันการทำงานและ Roadmap

โปรดตรวจสอบที่ issues เพื่อดูฟีเจอร์ที่กำลังจะถูกนำมาใช้งาน

หากคุณมีไอเดียสำหรับเครื่องมือใหม่ สามารถส่ง feature request ได้เลย!

การติดตั้งใช้งานเอง (Self host)

โซลูชันสำหรับการติดตั้งใช้งานเองใน homelab ของคุณ

จาก docker hub:

sh
docker run -d --name it-tools --restart unless-stopped -p 8080:80 corentinth/it-tools:latest

จาก github packages:

sh
docker run -d --name it-tools --restart unless-stopped -p 8080:80 ghcr.io/corentinth/it-tools:latest

โซลูชันอื่นๆ:

การมีส่วนร่วม (Contribute)

การตั้งค่า IDE ที่แนะนำ

VSCode พร้อมกับ extension ดังต่อไปนี้:

พร้อมการตั้งค่าดังนี้:

json
{
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "i18n-ally.localesPaths": ["locales", "src/tools/*/locales"],
  "i18n-ally.keystyle": "nested"
}

การรองรับ Type สำหรับการ Import .vue ใน TS

โดยปกติแล้ว TypeScript ไม่สามารถจัดการข้อมูล type สำหรับการ import ไฟล์ .vue ได้ ดังนั้นเราจึงใช้ vue-tsc แทน tsc CLI สำหรับการตรวจสอบ type และใน editor เราจำเป็นต้องใช้ TypeScript Vue Plugin (Volar) เพื่อให้ TypeScript language service รับรู้ถึง type ของ .vue

หากคุณรู้สึกว่า TypeScript plugin แบบ standalone ทำงานช้าเกินไป Volar มี Take Over Mode ที่มีประสิทธิภาพสูงกว่า ซึ่งคุณสามารถเปิดใช้งานได้ตามขั้นตอนดังนี้:

  1. 1ปิดการใช้งาน TypeScript Extension ที่ติดมากับตัวโปรแกรม1. รัน `Extensions: Show Built-in Extensions` จาก command palette ของ VSCode 2. ค้นหา `TypeScript and JavaScript Language Features` คลิกขวาแล้วเลือก `Disable (Workspace)`
  2. 2รีโหลดหน้าต่าง VSCode โดยรัน Developer: Reload Window จาก command palette

การตั้งค่าโปรเจกต์

sh
pnpm install

การ Compile และ Hot-Reload สำหรับการพัฒนา

sh
pnpm dev

การ Type-Check, Compile และ Minify สำหรับ Production

sh
pnpm build

การรัน Unit Tests ด้วย Vitest

sh
pnpm test

การ Lint ด้วย ESLint

sh
pnpm lint

การสร้างเครื่องมือใหม่

ในการสร้างเครื่องมือใหม่ มีสคริปต์สำหรับสร้าง boilerplate ของเครื่องมือใหม่ เพียงรันคำสั่ง:

sh
pnpm run script:create:tool my-tool-name

สคริปต์จะสร้างไดเรกทอรีใน src/tools พร้อมไฟล์ที่จำเป็น และทำการ import ใน src/tools/index.ts คุณเพียงแค่ต้องเพิ่มเครื่องมือที่ import เข้าไปในหมวดหมู่ที่เหมาะสมและเริ่มพัฒนาเครื่องมือนั้นได้เลย

ผู้มีส่วนร่วม (Contributors)

ขอขอบคุณทุกคนที่มีส่วนร่วมในโปรเจกต์นี้!

contributors

เครดิต (Credits)

เขียนด้วย ❤️ โดย Corentin Thomasset

โปรเจกต์นี้ถูก deploy อย่างต่อเนื่องโดยใช้ vercel.com

กราฟผู้มีส่วนร่วมถูกสร้างขึ้นโดยใช้ contrib.rocks

IT Tools - Collection of handy online tools for devs, with great UX | Product Hunt IT Tools - Collection of handy online tools for devs, with great UX | Product Hunt

ไลเซนส์ (License)

โปรเจกต์นี้อยู่ภายใต้ GNU GPLv3

เอกสารโปรเจกต์

อ่านเอกสารต้นฉบับ

README วิธีติดตั้ง วิธีใช้งาน และข้อกำหนดจาก repository ต้นฉบับ

ดูไฟล์บน GitHub
logo

Functionalities and roadmap

Please check the issues to see if some feature listed to be implemented.

You have an idea of a tool? Submit a feature request!

Self host

Self host solutions for your homelab

From docker hub:

sh
docker run -d --name it-tools --restart unless-stopped -p 8080:80 corentinth/it-tools:latest

From github packages:

sh
docker run -d --name it-tools --restart unless-stopped -p 8080:80 ghcr.io/corentinth/it-tools:latest

Other solutions:

Contribute

Recommended IDE Setup

VSCode with the following extensions:

with the following settings:

json
{
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "i18n-ally.localesPaths": ["locales", "src/tools/*/locales"],
  "i18n-ally.keystyle": "nested"
}

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

  1. 1Disable the built-in TypeScript Extension1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette 2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
  2. 2Reload the VSCode window by running Developer: Reload Window from the command palette.

Project Setup

sh
pnpm install

Compile and Hot-Reload for Development

sh
pnpm dev

Type-Check, Compile and Minify for Production

sh
pnpm build

Run Unit Tests with Vitest

sh
pnpm test

Lint with ESLint

sh
pnpm lint

Create a new tool

To create a new tool, there is a script that generate the boilerplate of the new tool, simply run:

sh
pnpm run script:create:tool my-tool-name

It will create a directory in src/tools with the correct files, and a the import in src/tools/index.ts. You will just need to add the imported tool in the proper category and develop the tool.

Contributors

Big thanks to all the people who have already contributed!

contributors

Credits

Coded with ❤️ by Corentin Thomasset.

This project is continuously deployed using vercel.com.

Contributor graph is generated using contrib.rocks.

IT Tools - Collection of handy online tools for devs, with great UX | Product Hunt IT Tools - Collection of handy online tools for devs, with great UX | Product Hunt

License

This project is under the GNU GPLv3.

#converter#developer-productivity#developer-tools#frontend#javascript#productivity#tool#tools#typescript#vuejs#website