ปลั๊กอิน Sublime Text

ทุกนาทีที่คุณเริ่มพัฒนาเว็บไซต์ เครื่องมือแรกที่จะใช้คือเครื่องมือแก้ไขข้อความ ไม่ว่าจะเป็นเครื่องมือแก้ไขข้อความที่เรียบง่ายอย่างกระดาษโน้ตหรือ IDE ขนาดใหญ่

ในตอนนี้ Addy และ Matt มาดูคอลเล็กชันปลั๊กอินของพวกเขาสำหรับ Sublime Text และพูดคุยกันว่าแต่ละปลั๊กอินจะช่วยในขั้นตอนการทำงานได้อย่างไร

การควบคุมแพ็กเกจ

หากต้องการรับแพ็กเกจ (หรือปลั๊กอิน) ที่อ้างอิงในตอน คุณต้องติดตั้งการควบคุมแพ็กเกจ ซึ่งสะดวกและง่ายต่อการติดตั้ง และคุณสามารถดูวิธีการได้ที่นี่

JSHint

JSHint เป็นเครื่องมือวิเคราะห์ JavaScript ซึ่งจะตรวจสอบ JavaScript และไฮไลต์ข้อผิดพลาดหรือแนวทางปฏิบัติที่ไม่ถูกต้องที่อาจเกิดขึ้นในโค้ด

ตัวอย่างเช่น หากคุณพิมพ์ชื่อตัวแปรผิดโดยไม่ได้ตั้งใจ เช่นด้านล่าง JSHint จะชี้ว่าไม่เคยมีการกำหนด fo และจะทำให้เกิดข้อผิดพลาด

var foo = { bar: 'Hello, World.' };
var msg = fo.bar;

ปลั๊กอิน JSHint จะระบุปัญหาโดยการแสดงกล่องสีเหลืองรอบข้อความที่เกี่ยวข้อง แล้ววางเคอร์เซอร์ในโค้ดส่วนนั้นจะทำให้ข้อความแสดงข้อผิดพลาดปรากฏที่ด้านล่างซ้ายของ Sublime

ปัญหาอื่นๆ ที่จะตรวจพบมีดังนี้

• ตัวแปรที่กำหนดไว้แต่ไม่เคยใช้
• หลีกเลี่ยงการสร้างฟังก์ชันภายในลูป
• การใช้วิธีเปรียบเทียบที่เหมาะสม

หากต้องการติดตั้งแพ็กเกจ SublimeLinter-JSHint คุณจะต้องติดตั้งแพ็กเกจ SublimeLinter ด้วยและทำตามวิธีการติดตั้งในหน้าแพ็กเกจ SublimeLinter-JSHint

นักพัฒนาซอฟต์แวร์บางรายอาจพบว่าการใส่ปลั๊กอิน JSHint Gutter ก็มีประโยชน์เช่นกัน โดยจะวางจุดเล็กๆ ในรางน้ำของบรรทัดใดก็ตามที่มีปัญหา JSHint

JSCS

JSCS จะไฮไลต์ตำแหน่งที่ JavaScript ไม่เป็นไปตามสไตล์การเขียนโค้ดที่เฉพาะเจาะจง

เช่น JSCS ใช้เพื่อกำหนดว่าควรใช้เว้นวรรคหลังคีย์เวิร์ด เช่น "if" หรือกำหนดว่าปีกกาควรอยู่ในบรรทัดเดียวกันหรือบรรทัดใหม่ของเมธอด

แพ็กเกจ SublimeLinter-JSCS ไฮไลต์ปัญหาต่างๆ ในบรรทัดในรูปแบบที่คล้ายกับ JSHint เพื่อให้แก้ไขปัญหาได้ง่ายๆ

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

ข้อดีที่ดีที่สุดคือ เมื่อใช้แพ็กเกจ JSCS-Formatter คุณจะแก้ไขปัญหาโดยอัตโนมัติในหน้าเว็บได้ด้วยการกด ctrl + shift + p พิมพ์ "JSCS Formatter: Format this file" แล้วกด Enter คุณดูข้อมูลเพิ่มเติมได้ในบล็อกโพสต์ของ Addy

ปากกาไฮไลต์สี

เครื่องมือเน้นสี จะเพิ่มสีในพื้นหลังของ การกำหนดสีใดๆ ใน CSS หรือ Sass

คุณสามารถกำหนดว่าจะให้แสดงเป็นการขีดเส้นใต้พร้อมพื้นหลังแบบเต็ม เมื่อคุณวางเมาส์เหนือเส้นนั้น หรือให้แสดงสีบนพื้นหลังคำจำกัดความเสมอ เพียงไปที่ "การตั้งค่าแพ็กเกจ" > "เครื่องมือเน้นสี" > "การตั้งค่า - ค่าเริ่มต้น" เพื่อดูการตั้งค่าเริ่มต้น และแก้ไขการตั้งค่าใน "การตั้งค่า - ผู้ใช้"

สำหรับการไฮไลต์พื้นหลังแบบเต็ม ให้เพิ่มข้อมูลต่อไปนี้ในไฟล์ "การตั้งค่า - ผู้ใช้"

{
  "ha_style": "filled"
}

สีรางน้ำ

สีรางน้ำเป็นอีกทางเลือกหนึ่งนอกเหนือจากไฮไลต์สี แทนที่จะแสดงสีที่ด้านบนของตัวแปรสี ระบบจะใส่สีลงในช่องว่างของเส้นตรงแทน

ตัวเลือกสี

หากคุณต้องการวิธีเลือกสีจากหน้าจอที่ง่ายและรวดเร็ว คุณอาจเลือกแพ็กเกจตัวเลือกสี

กด ctrl + shift + c และบูม - คุณมีตัวเลือกสีให้แล้ว

AutoFileName

AutoFileName เป็นปลั๊กอินขนาดเล็กที่เรียบง่าย ซึ่งจะให้รายการไฟล์ที่เป็นไปได้ขณะที่คุณพิมพ์ ซึ่งมีประโยชน์มากหากคุณพยายามพิมพ์ชื่อรูปภาพหรือเพิ่มไฟล์ CSS หรือ JS เนื่องจากช่วยประหยัดเวลาและที่สำคัญกว่าคือลดความเสี่ยงของการพิมพ์ผิด

คำนำหน้าอัตโนมัติ

เราทุกคนเคยมีช่วงเวลาที่นึกขึ้นได้ว่าลืมเพิ่มพร็อพเพอร์ตี้ CSS ที่มีคำนำหน้า เพียงใช้ Autoprefixer เพียงเรียกใช้ใน CSS แล้วระบบจะ เพิ่มคำนำหน้าทั้งหมดที่คุณต้องการ

ซึ่งหมายความว่าเราเริ่มจากสิ่งนี้..

.container-thingy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

..ตามลำดับต่อไปนี้ เพียงกด ctrl + shift + p และพิมพ์ "CSS คำนำหน้าอัตโนมัติ" แล้วกด Enter

.container-thingy {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}

คุณยังสามารถกำหนดเบราว์เซอร์และเวอร์ชันของเบราว์เซอร์ที่ต้องการรองรับได้ในการตั้งค่าแพ็กเกจ โปรดดูหน้าการควบคุมพัสดุภัณฑ์สำหรับข้อมูลเพิ่มเติม

เพิ่มเติม...

มีปลั๊กอินอื่นๆ อีกมากมายสำหรับ Sublime Text ดังนั้นอย่าลืมดูการควบคุมแพ็กเกจ

หากต้องการคำแนะนำและเคล็ดลับเพิ่มเติม โปรดดูชุดสไลด์ที่ยอดเยี่ยมบนแป้นพิมพ์ลัดและปลั๊กอินอื่นๆ สำหรับ Sublime Text ของ WesBos

WesBos ยังได้เขียนหนังสือชื่อ "Sublime Text for the Power User" ซึ่งคุณอาจจะสนใจเช่นเดียวกัน :)