สาวก Vue.js เปลี่ยนมาใช้ VSCode ยังไงไม่ให้หัวเสีย
ก่อนหน้านี้ผมใช้ Atom.io มาอยู่พักใหญ่ๆ ติดตั้ง Plugin ต่างๆไว้มากมาย จนรู้สึกว่าว่าเนี่ยแหละเข้ามือเราที่สุดละ แต่ปัญหาใหญ่ที่สุดของ Atom.io ที่ผมเจอก็คือ มันช้าครับ โดยเฉพาะเวลาที่เราเปิดไฟล์ขนาดใหญ่ๆ บางครั้งถึงขั้นค้างกันไปเลยก็มี จึงเป็นที่มาว่าทำไมผมถึงเริ่มมองหาทางเลือกใหม่ๆ
VSCode ออกมาได้พักใหญ่ๆแล้ว และหลายๆคนที่กำลังอ่านบทความนี้อยู่ก็น่าจะใช้กันอยู่แล้ว แต่ที่ผมไม่ได้ใช้มันสักทีก็เพราะทุกครั้งที่พยายามลองเปลี่ยนมาใช้ VSCode มันจะมีความรู้สึกขัดใจ ในจุดเล็กๆน้อยๆ เต็มไปหมด และทำให้ต้องตัดสินใจย้ายกลับไปใช้ Atom.io ทุกครั้งไป
จนมาครั้งนี้ที่ผมตั้งใจว่าจะต้องใช้ VSCode ให้ได้ ถ้าตรงไหนมันขัดใจก็ต้องแก้ให้ได้ จนสุดท้าย ตอนนี้ผมทำให้ VSCode มันเป็นอย่างที่ผมชอบและอยากให้เป็นได้แล้ว และจะมาเล่าให้ฟังว่าผมทำอะไรกับมันไปบ้าง
เรื่องแรกที่ต้องโม ก็คือ Theme
ผมอยากได้ Theme ที่เรียบๆ โทนสีมืดๆหน่อย ก็เลยไปจบที่ One Dark Pro
ส่วน Icon ผมใช้ Material Icon Theme เพราะรองรับไฟล์ได้หลากหลายและสวยดี
ทำให้ Support Vue.js
ปัญหานี้แก้ไม่ยากเพราะตอนนี้ vscode เป็นที่นิยมในหมู่คนเขียน Vue.js ก็เลยมีคนทำ Plugin ดีๆออกมาให้ได้เลือกใช้กัน ซึ่ง Plugin ที่ผมใช้อยู่ตอนนี้ก็มีดังนี้
1. Vetur
ติดตั้งตัวนี้ตัวเดียวก็ได้มาเกือบครบแล้ว ทั้ง Syntax-highlighting, Snippet, Emmet, Linting / Error Checking, Formatting, Auto Completion และ Debugging
2. Vue VSCode Snippets
เป็น Plugin ต่อยอดมาจาก Vetur โดยจะเพิ่ม Snippets มาให้เราใช้อย่างจุใจ
3. Vue Peek
Plugin ตัวนี้ช่วยให้เราสามารถ Go To Definition และPeek Definition ได้ง่ายแค่ปลายนิ้ว
ตั้งค่าให้ Emmet ทำงานกับ Vue.js ได้
ติดตั้ง ESLint
และตั้งค่าให้ ESLint รู้จัก Vue.js
ปิด formatOnPaste
ตอนที่เราไป Copy Code HTML จากที่อื่นมาวางในไฟล์ Vue.js นั้น ตัว VSCode จะพยายามช่วยเราจัด Format ให้เราโดยอัตโนมัติ และมันมักจะจัดให้เราไม่ค่อยได้เรื่องเท่าไหร่ ผมเลยปิดมันซะดีกว่า
"editor.formatOnPaste": false,เปลี่ยนจาก highlight ทั้งบรรทัดเป็นแค่ gutter
"editor.renderLineHighlight": "gutter",ปิด occurrencesHighlight ซะ
Option นี้ถูกเปิดโดย Default แต่เป็นตัวที่ทำให้ VSCode น่ารำคาญมาก คือเมื่อเราเอา Cursor ไปวางไว้ที่ตัวแปร มันจะชอบไป highlight คำที่เหมือนกันในไฟล์นั้นให้ ซึ่งบางที่เราก็ไม่ได้อยากเห็นนะ คือถ้าอยากเห็นเราจะ highlight คำนั้นเอง ไม่ใช่แค่เอา Cursor ไปว่างก็ highlight ให้แล้ว ว่าแล้วก็ปิดซะ
"editor.occurrencesHighlight": false,Matching Tag HTML
เรื่องสุดท้ายคือ ใน Atom.io มันจะ matching tag html ให้เรา Auto แต่ใน VSCode ดันไม่มี ซึ่งก็มีคนใจดีทำ Plugin ไว้ให้ ชื่อว่า highlight-matching-tag
เหมือนจะจบแล้ว แต่ highlight-matching-tag มันยังไม่สวยอะ ผมเลยต้อง Custom มันเองอีกนิดหน่อย
และได้ออกมาเป็นแบบนี้
เอาประมาณนี้ก่อนก็แล้วกันนะ
เพราะก็ไม่อยากติดตั้งอะไรเยอะ กลัวว่าจะหนักแล้วทำให้ช้าอีก(อุตส่าห์ หนี Atom.io มาแล้ว)
