Sublime Text 3 ตกแต่งยังไงกันบ้าง มาแบ่งปันกัน

ก่อนจะเข้ามาดู Package หรือ Config ต่างๆ เนี่ย ต้องบอกก่อนว่าส่วนใหญ่ใช้ Ruby on Rails และ Angular ซะส่วนใหญ่ จึงเลือกสี และธีมที่เห็นถึง Class, Variable, Method และ อื่นๆ ที่ได้อย่างชัดเจน (+ ความชอบเข้าไปด้วย ฮ่าๆ) มาเริ่มกันดีกว่า


เริ่มต้นกันที่สี ธีม ไอคอนและฟอนต์ก่อนละกัน (ความสวยงามทำให้น่ามองอยู่เสมอ 😍)
  1. Theme นี้ใช้ Materialize Package จากนั้นเลือก “Material Solarized Dark.sublime-theme” หลังติดตั้งเสร็จ
  2. เปิด User Configuration แล้วใส่โค้ดตามข้างล่างนี้ ถ้าถามว่าคืออะไรบ้าง นี่จำไม่ได้แล้ว(แต่คำก็พอรู้บ้างแหละว่าคืออะไร) เพราะตอนปรับๆ นี่เปลี่ยน true false ไปมาทุกอันจนถูกใจ
{
...
"material_theme_accent_lime": true,
"material_theme_arrow_folders": true,
"material_theme_bold_tab": true,
"material_theme_bullet_tree_indicator": true,
"material_theme_compact_sidebar": true,
"material_theme_contrast_mode": true,
"material_theme_small_statusbar": true,
"material_theme_tabs_autowidth": true,
"material_theme_tabs_separator": true
}

3. Color Scheme นี้ใช้ RailsBase16 Color Schemes Package แล้วเลือกเป็น RailsBase16-solarized.dark หลังติดตั้งเสร็จ

4. Icon ใช้เป็น A File Icon package ติดตั้งผ่านของ Sublime ได้เลย

5. Font ใช้เป็น Fira Code ข้อนี้ต้องโหลดมาลงที่เครื่องก่อนเนาะ แล้วก็ไป Config

"font_face": "Fira Code"

เท่านี้ก็ได้รูปร่างหน้าตาต่างๆ เหมือนภาพข้างต้นแล้วว

อ้ออ มี Config ทั้งหมดของเจ้าของบล็อกเนาะ จะเป็นพวกยิ๊บๆ ย่อยๆ นี่แหละที่ช่วยให้ดูได้ง่ายขึ้นบ้าง ช่วยคุม Style การเขียนต่างๆ บ้าง เช่น ใช้ Space แทน Tab หรือ Trim White Space เป็นต้น
{
"always_show_minimap_viewport": true,
"bold_folder_labels": true,
"color_scheme": "Packages/RailsBase16 Color Schemes/RailsBase16-solarized.dark.tmTheme",
"draw_minimap_border": true,
"ensure_newline_at_eof_on_save": true,
"font_face": "Fira Code",
"font_size": 16,
"highlight_line": true,
"ignored_packages":
[
"Vintage"
],
"indent_guide_options":
[
"draw_normal",
"draw_active"
],
"material_theme_accent_lime": true,
"material_theme_arrow_folders": true,
"material_theme_bold_tab": true,
"material_theme_bullet_tree_indicator": true,
"material_theme_compact_sidebar": true,
"material_theme_contrast_mode": true,
"material_theme_small_statusbar": true,
"material_theme_tabs_autowidth": true,
"material_theme_tabs_separator": true,
"move_to_limit_on_up_down": true,
"tab_size": 2,
"theme": "Material Solarized Dark.sublime-theme",
"translate_tabs_to_spaces": true,
"trim_trailing_white_space_on_save": true
}
มาดูภายในกันต่อว่ามีอะไรบ้าง …

ส่วนใหญ่ก็จะเป็น Popular package ทั่วไปแหละ ซึ่งหาดูได้ตามบล็อกทั่วไปเลย

  1. SideBarEnhancements ตัวนี้ก็จะทำให้เวลาคลิกขวาตรง Sidebar จะมี Function การทำงานที่เยอะขึ้น
ตัวอย่าง SideBarEnhancements

2. BracketHighlighter ก็ตามชื่อเลย Highlight วงเล็บ ต่างๆ ที่เป็น Block ของมัน เช่น if..else, for และยังรวมถึง HTML tag ด้วย

ตัวอย่าง BracketHighlighter

3. Emmet เหมาะสำหรับคนเขียนเว็บซึ่งจะช่วยได้เยอะมากกก มากยังไงมาดู 👇🏻

ตัวอย่าง Emmet เล็กๆ น้อยๆ

4. SublimeLinter อันนี้ก็ตามชื่อเหมือนกันคือเป็น Linter แล้ว Linter คืออะไรหน่ะหรอ? นั่นสิอธิบายเป็นความหมายจริงๆ ไม่ออกแหะ แต่คิดว่าน่าจะเอาไว้คุม Style การเขียนโค้ดต่างๆ ให้ไปในทิศทางเดียวกัน ไม่ว่าทำงานหลายคน หรือว่าคนเดียวก็ตาม รวมทั้งเช็คการ Assign ค่าต่างๆ ด้วย

ตัวอย่าง SublimeLinter

แต่ SublimeLinter นี่ก็ต้องลง Linter ของแต่ละภาษานะ แล้วก็ต้องมี Linter Config ด้วย จากตัวอย่างได้ลง SublimeLinter-tslint package (TypeScript)ไว้ แล้วจะไปอ่านไฟล์ tslint.json

5. Color Highlight ก็ไม่มีอะไรมาก อะไรเกี่ยวกับ “สี” ก็จะขึ้นเป็นสีหมด ชื่อสีเอย โค้ดสีเอย เป็นต้น

ตัวอย่าง Color Highlight

6. GitGutter ก็ใช้ดูการเปลี่ยนแปลงในไฟล์เนาะว่า บรรทัดนี้ เพิ่ม หรือแก้ไข เพิ่มเอา Stage แล้วอะไรประมาณนี้

7. ERB Snippets ก็เป็น Snippet เนาะ อารมณ์เหมือนเป็น Shotcut ซักอย่าง พิมพ์สั้นๆ แล้วกด Tab หรือ Enter ก็จะเป็นคำที่เราต้องการ

อันนี้แล้วแต่ว่าเขียนภาษาอะไรซึ่งในข้อนี้ยกตัวอย่างเป็น ERB คือของ Template ของ Rails (สามารถเขียน Snippet ข้อมาเองได้น้าาา ถ้าเอาที่เราต้องการไม่มีจริงจริ๊งงง)

ตอนนี้ Snippet ที่ใช้จะมี Typescript, SCSS แล้วก็ ERB นี่แหละ

8. Color Highlight Syntax ของภาษาต่างๆ ที่เราใช้ เดิมๆ Sublime Text 3 ก็มีมาให้เยอะอยู่ละ แต่บางตัวก็อาจจะยังไงไม่มี

ส่งท้าย

นี่ก็เป็น Sublime Text 3 ของผมเนาะถ้าใครมี Package ไหนดีๆ แนะนำกันมาได้นะครับผม ขอบคุณครับที่อ่าน หรือเลื่อนๆ มาถึงตรงนี้ 😊