Environment Variables Manager

ดู แก้ไข และจัดการไฟล์ .env ของคุณแบบภาพ — ไม่ต้องใช้ text editor

มันคืออะไร?

Environment Variables Manager เป็น visual editor สำหรับไฟล์ .env ไฟล์เหล่านี้เก็บค่ากำหนดค่าที่แอปของคุณต้องการตอนรันไทม์ — สิ่งเช่น API keys, database connection strings และ feature flags เพราะพวกมันมักมี secrets ไฟล์ .env จึงถูกเก็บออกจาก Git และออกจาก source code ของคุณ

การแก้ไขไฟล์ .env ใน plain text editor ทำงานได้ แต่ทำผิดพลาดง่าย: ขาด quote, มี space เกิน หรือ commit ไฟล์เข้า Git โดยไม่ได้ตั้งใจ Env Manager ให้คุณอินเทอร์เฟซตารางที่สะอาดเพื่อให้คุณแก้ไข เพิ่ม และเปิดเผย variables ได้อย่างปลอดภัย

เปิด Env Manager

มีสองวิธีในการเปิด:

  • ไปที่ Settings → Environment Variables
  • หรือคลิก ไอคอน env ใน project toolbar (ไอคอนกุญแจเล็กใกล้ด้านบนของ project panel)

Manager เปิดสำหรับโปรเจกต์ที่ใช้งานอยู่ปัจจุบันอัตโนมัติ

ดูและแก้ไข Variables

Manager แสดงคู่ key-value ทั้งหมดจากไฟล์ .env ของคุณในตาราง แต่ละแถวแสดงชื่อ variable ด้านซ้ายและค่าด้านขวา

โดยค่าเริ่มต้น ค่าถูกซ่อน (แสดงเป็นจุด เหมือนช่องรหัสผ่าน) เพื่อปกป้อง secrets บนหน้าจอของคุณ คลิก ไอคอนตา บนแถวใดๆ เพื่อเปิดเผยค่านั้น หรือคลิกไอคอนตาในหัวข้อคอลัมน์เพื่อเปิดเผยค่าทั้งหมดพร้อมกัน

เพื่อแก้ไขค่า คลิกที่มันโดยตรงในตาราง Cell กลายเป็นแก้ไขได้ — พิมพ์ค่าใหม่แล้วกด Enter เพื่อบันทึก ไฟล์ .env ถูกอัปเดตทันที

เพื่อเพิ่ม variable ใหม่ คลิก ปุ่ม + ด้านล่างของตาราง พิมพ์ชื่อ key กด Tab พิมพ์ค่า แล้วกด Enter

ไฟล์ต่อโปรเจกต์

โปรเจกต์ส่วนใหญ่มีไฟล์ .env มากกว่าหนึ่งไฟล์ การตั้งค่าทั่วไปมีลักษณะ:

  • .env — ค่าเริ่มต้นร่วม
  • .env.local — การ override ของ local (ไม่ commit)
  • .env.production — ค่า production

ใช้ dropdown เลือกไฟล์ ด้านบนของ Env Manager เพื่อสลับระหว่างไฟล์เหล่านี้ แต่ละไฟล์ถูกแสดงและแก้ไขแยกกัน

Auto-reload

เมื่อคุณบันทึกการเปลี่ยนแปลงใน Env Manager ค่าที่อัปเดตถูกเขียนไปยังไฟล์ทันที หาก dev server ของคุณรองรับ hot-reload (เช่น Next.js และ Vite ทั้งคู่ทำ) ค่าใหม่จะถูก pick up โดยไม่ต้องรีสตาร์ท server สำหรับ server ที่ไม่ hot-reload environment variables ใช้ปุ่ม restart ใน terminal

ความปลอดภัย

ไฟล์ .env ของคุณอยู่บนเครื่อง local ของคุณ 1DevTool ไม่เคยอัปโหลดค่า environment variable ไปยังเซิร์ฟเวอร์ใดๆ

เมื่อคุณเพิ่มโปรเจกต์ 1DevTool ตรวจสอบว่า .env อยู่ใน .gitignore หรือไม่ หากไม่ แอปจะเพิ่มมันอัตโนมัติเพื่อช่วยคุณหลีกเลี่ยงการ commit secrets โดยไม่ได้ตั้งใจ

เคล็ดลับ: AI agent ของคุณสามารถอ่านชื่อ environment variable (แต่ไม่ใช่ค่า) เพื่อเข้าใจการกำหนดค่าโปรเจกต์ของคุณ — ดังนั้นมันรู้ว่าจะใช้ DATABASE_URL โดยที่คุณไม่ต้องอธิบาย

Environment variables manager