imkopkap

2 Package ของ Atom ที่ผมชอบ

ใช้เวลา 7 นาที 04/07/2016

ว่าด้วยเรื่อง Package ของ Atom แน่นอนว่ามีมากมายให้เลือกใช้ไม่แพ้เจ้า package ของ sublime เลย ในบทความนี้ผมจะแนะนำ 2 Plugin ซึ่งไม่เกี่ยวกับการช่วยเขียนโค้ดนะครับ แต่เป็น Package ที่เป็นลูกเล่นของเจ้า Atom นั่นเอง ซึ่งตอนนี้ผมยังไม่เคยเห็นของ sublime ไม่แน่ใจว่าทำได้หรือเปล่า เรามาดูของ Atom กันครับ

 

1.Activate power mode

ตัวแรกเลยคือ Activate power mode เป็น Package ที่ไว้ทำ Effect ลูกเล่นระเบิด เมื่อเราพิมพ์อักษรไปหนึ่งตัวมันจะทำการสั่นหน้าจอของ Atom แล้วปล่อยลำแสงออกมา ช่วงที่ใช้แรกๆจะรู้สึกตื่นเต้นแต่ถ้าใช้เขียนโค้ดติดต่อกันไปนานๆ อาจจะทำให้ปวดตาและเมาหัวได้ครับ

 

Atom power mode
รูปจาก Package ของ Activate power mode

 

วิธีการติดตั้ง

1. เปิดโปรแกรม Atom แล้วไปที่ File > setttings

 

file

 

2. ไปที่ Package แล้วพิมพ์ช่องค้นหาว่า Activate power mode จากนั้นกดติดตั้ง

 

active power mode

 

2. Rainbow strings

สำหรับตัวนี้ผมมองว่ามันไม่ใช่ Package นะครับ จะออกแนวเป็น Stylesheet (CSS) มากกว่า ต้องทำความเข้าใจกันก่อนนะครับ เจ้า Atom ถูกสร้างมาจาก Electron ซึ่งเป็นตัวที่ไว้สร้าง Desktop App (โดยใช้ภาษาเว็บ)

 

แน่นอนว่าเราก็สามารถทำการแก้ไข Stylesheet ของ Atom ได้เช่นกันครับ ถ้าล้วงความลับได้มากๆสามารถสร้างธีมของ Atom กันได้เลยทีเดียว ซึ่งการทำ Rainbow string นี้ไม่สามารถใช้ได้กับ HTML และ CSS

 

ภาพจาก Rainbow strings ใน Medium
ภาพจาก Rainbow strings ใน Medium

 

วิธีการติดตั้ง

  • สำหรับ Windows ให้เข้าไปที่ File > stylesheet
  • สำหรับ Mac ให้เข้าไปที่ Atom > stylesheet

 

แล้ว Copy โค้ดด้านล่างไปแปะไว้ จากนั้นกด Save จะเห็นการเปลี่ยนแปลง

html /deep/ .source .string {
  @s: 85%;
  @l: 75%;
  background: linear-gradient(-45deg,
    hsl(0, @s, @l), hsl(60, @s, @l),
    hsl(120, @s, @l), hsl(180, @s, @l),
    hsl(240, @s, @l), hsl(300, @s, @l), hsl(360, @s, @l));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

 

บันทึกแนะนำ