โปรแกรมแก้ไขรหัสต้นฉบับด้วย vscode (visual studio code)

ปรับปรุง : 2566-02-24 (แก้โค้ด)

โปรแกรมแก้ไขรหัสต้นฉบับ (Source Code Editor) โปรแกรมแก้ไขรหัสต้นฉบับด้วย Vscode คือ โปรแกรมสำหรับสร้าง และปรับปรุงแก้ไขรหัสต้นฉบับ หรือแฟ้มอักขระ สำหรับเขียนโปรแกรม หรือข้อความ หรือจัดการข้อมูล ก่อนนำไปใช้ประมวลผลในโปรแกรมอื่น ซึ่งโปรแกรมแก้ไขโค้ดที่น่าสนใจมีหลายโปรแกรม เช่น vscode, sublime, atom, pycharm, notepad, editpus

พ.ค.2561 น้อง ม.1 เริ่มเรียน coding แล้ว

จากการติดตามข่าวการพัฒนาหลักสูตรของกระทรวงศึกษาธิการ พบว่า เปิดเรียนปี 2561 เด็ก ๆ จะได้เรียนเขียนโปรแกรมภาษา Python ในหนังสือเรียน "วิชาวิทยาการคำนวณ" ชั้น ม.1 บทที่ 3 พบว่าต้องเรียนเกี่ยวกับ 1) รู้จักไพทอน 2) ตัวแปร 3) ชนิดข้อมูลพื้นฐาน 4) การแปลงชนิดข้อมูล 5) การเขียนโปรแกรมไพทอนในโหมดสคริปต์ 6) ฝึกเขียนโปรแกรมกับเต่าไพทอน 7) การทำงานแบบวนซ้ำ 8) การทำงานแบบมีทางเลือก
การเขียนโปรแกรมจำเป็นต้องมีเครื่องมือในการเขียนโค้ด (Coding) คือ editor ซึ่งมีให้เลือกหลากหลาย เมื่อสืบค้นจากอินเทอร์เน็ตพบว่า vscode เป็นโปรแกรมที่ได้รับความนิยมเป็นอันดับหนึ่ง จากการจัดอันดับในหลายแหล่ง เป็นหนึ่งในผลิตภัณฑ์ของไมโครซอฟต์ จึงมีความน่าเชื่อถือ ประกอบกับใช้งานได้ยืดหยุ่น มีโหมดที่ใช้งานได้โดยไม่ต้องติดตั้ง
access.log (1.1GB)
access.log.rar (แปลง 1.1 GB เหลือ 24 MB)
พบว่า EditPlus Text Editor v3.12 แจ้ง Warning : File is too large! ผลของความพยายาม continue คือ Out of memory และเปิดไม่ได้ สรุปคือไม่สามารถเปิดแฟ้มเกิน 1023MB เนื่องจากแฟ้มมีขนาด 1154MB

Visual Studio Code ของ Microsoft
VScode คือ โปรแกรมสำหรับสร้าง และปรับปรุงแก้ไขรหัสต้นฉบับ หรือแฟ้มอักขระ สำหรับเขียนโปรแกรม หรือข้อความ หรือจัดการข้อมูล ก่อนนำไปใช้ประมวลผลในโปรแกรมอื่น เช่น excel หรือใช้กับตัวแปลภาษาที่ต้องการ เช่น php, java, python, html
VScode คือ โปรแกรมขนาดเล็ก มีเฉพาะสิ่งจำเป็น แต่ทรงพลังในการแก้ไขรหัสต้นฉบับ สามารถใช้งานได้ทั้งบน Windows, MacOS และ Linux โปรแกรมสนับสนุนการทำงานของ JavaScript, TypeScript และ Node.js และมีส่วนขยาย (Extension) ให้โหลดมาใช้เพื่อรองรับการทำงานของภาษาอื่น เช่น C++, C#, Java, Python, PHP, Go , ASP
การติดตั้ง สามารถเลือกแบบ unzip ที่ไม่ต้อง install แล้วเลือกโปรแกรม code.exe : pin to taskbar ให้เรียกใช้ได้ง่าย หากไม่ใช้งาน โปรแกรมก็จะไม่ถูกโหลดเข้าสู่หน่วยความจำ

VSCode-win32-x64-1.46.1.zip
ขนาดแฟ้ม 79.2 MB

แหล่งอ้างอิงอันดับความนิยม
software.com: top5
Best 11 code editors
Best 13 text editors
Best 16 code editors

เขียน .html "hello world" แบบ Open in default browser

ติดตั้ง

ใช้งาน

ผลลัพธ์

เมื่อเขียน Code ด้วยภาษา HTML แล้วต้องการประมวลผล ก็จะเปิดดูผลใน Browser ดังนั้นการติดตั้ง extension จะช่วยให้การเปิด code ใน Browser ทำได้ง่ายขึ้น
1. Download : code.visualstudio.com/download
ทำการ unzip แล้วพบแฟ้ม code.exe ให้กด double click เพื่อใช้งาน
2. เขียนโค้ดด้วย java script ชื่อ hello.htm แล้วติดตั้ง open in default browser

<script>
var hello = function() {
  alert('hello world');
}
hello();
</script>

3. เปิด Extensions โดยคลิ๊ก Menu bar, View, Extensions หรือ Ctrl+Shift+X
4. ค้น และเลือก Open in default browser แล้วกด install แล้วกลับไปหน้าแท็บที่มี code อยู่
5. กด Right click บน code จะพบตัวเลือก Open in Default Browser ให้คลิ๊กเลือก
6. หรือกด Short cut Ctrl+1 คือ open in default browser
7. ตัวอย่าง code เป็นเรื่อง Anonymous function หาอ่านเพิ่มได้ครับ

เปิด Terminal สั่งงาน Batch file ได้เลย

เราสามารถเปิด Terminal มาพิมพ์คำสั่งเพื่อสั่งงานได้ หาก code ที่เขียนเป็น Batch file สามารถเลือก Menu bar, Terminal, Run Active File ก็จะเปิด Batch file มา run ใน Default Shell ที่กำหนด กรณีนี้มี Default shell เป็น Windows Powershell เลือกเปลี่ยนได้เป็น Command Prompt ให้ทำแทนได้ ดังนั้นการเขียน Batch file แล้วสั่ง Run ก็ทำได้ด้วยการเลือก Run Active File
คำสั่งภายใน และคำสั่งภายนอกของ DOS
การเขียน Batch file

เปิดได้หลาย Terminal รองรับ Shell ที่ต้องใช้

โปรแกรม vscode สามารถเรียก Terminal มาทำงานได้หลายหน้าต่าง แต่ละหน้าต่างแบ่งได้หลายแท็บ ได้แก่ Problems , Output , Debug console , Terminal ทำให้สามารถทำหลายงานได้พร้อมกัน จากตัวอย่างนี้มี DOS, Power Shell และ Bash Shell
Bash Shell ที่มาพร้อมกับ Git for windows

Run task : PHP บน Terminal

.vscode/tasks.json
{ "version": "2.0.0", 
"tasks": [
{ "label": "myecho", "type": "shell", "command": "echo Hello" },
{ "label": "php1", "type": "shell", "command": "php ${file}" },
{ "label": "php2", "type": "shell", "command": "C:\\xampp\\php\\php.exe ${file}" } 
] }

เมื่อเขียน code จนแล้วเสร็จ เช่น hello.php และต้องการจะสั่ง run ผ่าน terminal ใน vscode ก็ต้องสร้าง Workspace folder ด้วยการเลือก Add folder to workspace ผ่าน Menu bar, file เพื่อใช้เป็นพื้นที่ทำงาน และเก็บ code ทั้งหมดไว้ในพื้นที่นี้

จากนั้นก็เลือก Menu bar , Terminals , Configure Tasks , Create tasks.json file from template แล้วเลือก Other Example to run an arbitrary external command (คำสั่งภายนอกโดยพลการ) จะได้ Folder ชื่อ .vscode ใน Workspace folder และได้แฟ้ม tasks.json และมีรายการงาน (Tasks) ชื่อ myecho , php1 , php2 จากนั้นเปิดแฟ้มที่ต้องการ run แล้วสั่ง Terminal, Run task แล้วเลือกชื่องาน เช่น myecho แล้วจะมีตัวเลือกมาอีกหลายรายการ สรุปว่าให้เลือก Continue without scanning the task output

https://code.visualstudio.com/docs/editor/tasks
http://www.thaiall.com/php

Extension : Remote - WSL (Windows Subsystem Linux)

การใช้งาน vscode และเปิด Terminal สามารถเปิด WSL ซึ่งเป็น Linux Shell บน Windows 10 จากภาพจะพบว่ามี Shell ได้ 4 แบบ แต่การใช้ WSL บน vscode จำเป็นต้องติดตั้ง extension เพิ่ม หรือมี Linux shell ตัวอื่นอยู่ และเป็นการใช้งานแบบ Lightweight ที่สามารถทำงานกับ Hardware ในปัจจุบัน ซึ่งไม่ได้ติดตั้งทุกอย่างไว้ล่วงหน้า จะใช้งานอะไรก็ต้องติดตั้งเพิ่ม ตัวอย่างนี้ใช้งานคำสั่ง Linux shell ได้หลายคำสั่ง

$pwd
$env
$echo $BASH_VERSION
$echo $SHELL
$cat /etc/passwd |grep burin

Run task : python in Terminal หรือ install python extension

{ 
"label": "python1",        
"type": "shell",
"command": "python ${file}",
"group": {
 "kind": "build",
 "isDefault": true
},
"presentation": {
 "reveal": "always",
 "panel": "new",
 "focus": true
}
}

แบบที่ 1. ใช้ python แบบ run task
1. ติดตั้ง python ให้ใช้งานผ่าน DOS Prompt แสดงว่าใช้ python ได้แล้ว
2. เขียน code ในแฟ้ม x.py เพื่อทดสอบ เพียงบรรทัดเดียว คือ print(5);
3. แก้ไขแฟ้ม tasks.json ก็เพิ่ม task เข้าไป เป็นการต่อยอดจากบทเรียนก่อนหน้านี้
4. การ run ให้เลือก run build task .. จะพบผลลัพธ์ใน Terminal ทันที ไม่ต้องเลือก run task .. เพราะจะถามว่าเลือกงานใดอีกครั้ง ผมว่าเสียเวลาตอบ แต่การ run build task .. จะเลือกจาก recently used tasks
แบบที่ 2. ใช้ python extension
1. ติดตั้ง python extension รอสักครู่
2. พบรุ่นของ python มุมล่างซ้ายของ vscode เมื่อคลิ๊กและเลือกจะสร้างแฟ้ม settings.json พบ "python.pythonPath": "C:\\Users \\burin \\AppData \\Local \\Programs \\Python \\Python38 \\python.exe"
3. พบสัญลักษณ์ > มุมบนขวาเพื่อ run Python file in terminal
4. ผลการ run พบใน termnial ซึ่งต่างกับการเลือก run แบบ run build task ..

การใช้ vscode ที่เชื่อม github.com

การทำงานร่วมกันเป็นทีม ผ่านบริการ git บน github.com เริ่มจากเปิดโปรแกรม vscode มอง Activity Bar ด้านซ้าย (Menubar, View, Appearance, Show Activity Bar) มอง Source Control หรือ Explorer จะพบรายการแฟ้ม (Menubar, View, Open View..., Source Control = Ctrl-Shift-G) เพื่อดำเนินการต่าง ๆ ในลำดับต่อไป ที่มาของบทเรียนนี้ ถูกเตรียมขึ้น เพื่อตอบข้อซักถามของ ณัฐภัทร คำมูล (นน) ที่จะใช้ vscode เชื่อม github.com โดยบทเรียนแรกเน้นการสร้าง และลบแฟ้ม ส่วนบทเรียนที่สองเน้นการอัพโหลดภาพเข้า git ที่มี Contributors หลายคน

บทเรียนที่ 1: github.com
1. Menubar, View, Command Palette... = Ctrl-Shift-P
2. Git: Clone = https://github.com/thaiall/www 
3. Select Repository Location = e:\vscode
4. Explorer = Ctrl-Shift-E
5. New file : test.htm (in workspace : "hello world" + Ctrl-s)
6. SOURCE CONTROL: GIT ... (Ctrl-Shift-G = Changes Check)
7. Commit All = "burin change it" for commit
8. Push (switch to github.com to check)
9. Right click on file in Explorer and delete
10. Command Palette... = Ctrl-Shift-P
11. Git: Commit All + Git: Push (check in github)
12. Explore, Delete Folder : www (permanent)
13. Clone [www] again to up skill
บทเรียนที่ 2: github.com
1. Menubar, View, Command Palette... = Ctrl-Shift-P
2. Git: Clone = https://github.com/thaiall/mygitfriends
3. Select Repository Location = e:\vscode
4. Git: Pull (Update files before Change and Push)
5. Explorer = Ctrl-Shift-E
6. use windows explorer : copy burin.jpg to e:\vscode\mygitfriends
7. Command Palette... = Ctrl-Shift-P
8. Git: Commit All + Choose a repository
9. Git: Push + Choose a repository (check in github)
10. Delete : burin.jpg
11. Git: Commit All + Git: Push : again (check in github)

อ่านเพิ่มเติม

Regular expression

โปรแกรมที่ใช้เตรียมรหัสต้นฉบับ (Source Code) ของนักพัฒนามีให้เลือกมากมาย ตั้งแต่ยุค DOS ก็มี edit ขยับขึ้นมาเป็น notepad และอีกมากมาย เช่น Q , Sidekick , IDE Group ปัจจุบัน vscode เป็นที่นิยมอย่างมาก สำหรับ notepad++ , atom, sublime , editplus , textpad ต่างก็ค้นข้อมูล และแทนที่ ได้ด้วยคุณสมบัติ Regular expression ซึ่งเป็นแพรทเทิร์นสำหรับค้นหา เช่น การค้น comment ใน html และลบทิ้ง ทำโดยค้นด้วยคำว่า  แล้วก็แทนที่ด้วยค่าว่าง เป็นต้น

Data cleansing : Regular Expression

Regular expression คือ แพรทเทิร์นสำหรับค้นหา ส่วน Wildcards คือ สัญลักษณ์ตัวแทน ใน DOS เช่น * หรือ ? ซึ่งการใช้ทำ Data Cleansing เพื่อเตรียมข้อมูลในรูปแบบที่ต้องการ ก็ทำได้ง่ายเมื่อใช้การค้นหาและแทนที่ด้วย Regular Expression เพื่อเปลี่ยนรูปแบบข้อมูลในเบื้องต้น

https://devahoy.com/posts/regular-expressions-101/

ตัวอย่าง ข้อมูล 
abc123 toe tie top
#def:567#
<a href="hello.htm">hello</a>
one>two>three>four
five>six
ตัวอย่าง pattern สำหรับ replace
1.  ทุกตัวอักษร เป็น a : . เป็น a
2. คำที่ขึ้นต้นด้วย t ลงท้ายด้วย e : t.e เป็น ค่าว่าง
3. ที่ไม่ใช่ตัวอักษร เป็น a : \W เป็น a
4.  ทุกตัวเลข เป็น a : \d เป็น a
5.  ไม่ใช่ตัวเลข เป็น a : \D เป็น a
6. whitespace(tab, space, line break) เป็น a : \s เป็น a
7. ที่ไม่ใช่ whitespace เป็น a : \S เป็น a
8. x, y หรือ z เป็น a : [xyz] เป็น a
9. ไม่ใช่ x, y หรือ z เป็น a : [^xyz] เป็น a
10. เลข 0 ถึง 9 เป็น a : [0-9] เป็น a
11. ตัวอักษร x ถึง z เป็น a : [x-z] เป็น a
12. แทรกข้อความต้นบรรทัดด้วย a : ^ เป็น a
13. แทรกข้อความสิ้นบรรทัดด้วย a : $ เป็น a
14. กลุ่มคำ abc หรือ def เป็น a : (abc|def) เป็น a
15. เปลี่ยนทุกบรรทัด เป็น a ทุกบรรทัด :  .* เป็น a 
16. หาข้อความที่มี A ต่อท้าย ก็เปลี่ยน เป็น a : .*A เป็น a
17. ขึ้นต้น ab ลงท้ายด้วย df เป็น a : ab(.*)df เป็น a
18. หา x ที่ซ้ำกัน 2 ตัว เป็น a : x{2} เป็น a
19. ลบ link ให้เลือกแต่ ข้อความ : <a href=(.*)>(.*)</a> เป็น \2
20. ลบวันที่ : \d{4}-\d{2}-\d{2} เป็น ช่องว่าง
21. ปัดบรรทัด หลังเครื่องหมาย > : > เป็น >\n
22. ลบตัวอักษรให้เลือกเฉพาะตัวเลข [!-/a-z}-๙]

ปรับโค้ด 9146 ของ suwatjanee ที่ตั้งใจให้ผิด 4 จุด

ต้นฉบับ และที่แก้ไขแล้ว
+ adminlte357.php
+ suwatjanee_4_errors
+ suwatjanee_solved

การใช้โปรแกรม vscode ทำ code cleaning
1. การใช้ Regular expression ในการ replace ด้วยการกด ctrl-h เพื่อสั่งแทนที่ < ด้วย \n<
2. เมื่อต้องการค้นหา /* ให้ใช้ \/\* แล้วแทนที่ด้วย \n/*
3. เมื่อต้องการค้นหา */ ให้ใช้ \*\/ แล้วแทนที่ด้วย */\n
เปิดเว็บเพจ http://localhost/suwatjanee_solved.php
1. พบ Parse error : syntax error if บรรทัดที่ 161 จึงแก้ไขบรรทัดที่ 161 จาก doconnect() เป็น doconnect();
2. พบ Parse error : syntax error else บรรทัดที่ 161 จึงแก้ไขบรรทัดที่ 161 จาก doquery($drop_sql) เป็น doquery($drop_sql);
3. พบ Parse error : syntax error } บรรทัดที่ 230 จึงแก้ไขบรรทัดที่ 230 ซึ่งโปรแกรม vscode ฟ้องว่า ไม่คาดหวัง unexpected } จึงต้องเลือกระหว่าง 1) ลบ } ออก 1 ตัว จากที่มี } } หรือ 2) หาว่า { หายไปจากบรรทัดไหน เมื่ออ่าน code โดยละเอียด พบว่า บรรทัดที่ 218 ต้องมี { หลัง if เพื่อให้การทำงานสมบูรณ์
4. หลังแก้ไขในข้อ 3 โปรแกรมเริ่มแสดงผลได้ปกติ แต่พบ Warning mysql บรรทัดที่ 282 จึงเปิดบริการ mysql
5. ทดสอบ add พบว่าข้อมูลไม่แสดงผล ตามที่ควรจะเป็น เมื่อใช้ phpmyadmin ตรวจสอบ พบว่า ข้อมูลเข้าในตาราง แต่ไม่แสดงรายการระเบียนบนเว็บเพจ
6. พบฟังก์ชันผิด แต่ไม่มีข้อความ error หรือ warning ในบรรทัดที่ 292 จึงแก้ไขจาก fetch_object; เป็น fetch_object();
7. ถ้าบรรทัดแรก เปลี่ยนจาก ini_set('error_reporting', E_WARNING); เป็น ini_set('error_reporting', E_ALL); ก็จะพบ 292 เพื่อแก้ไข fetch_object ได้อย่างรวดเร็ว

ปรับข้อมูล ที่นิสิตส่งรายชื่อสมาชิกกลุ่มใน FB

พบข้อมูลที่นิสิตโพสต์รายชื่อกลุ่มใต้โพสต์ที่กำหนดในเฟสบุ๊ค แล้วนำข้อมูลมาจัดเรียงใน vscode โดยทำการลบชื่อให้เหลือแต่รหัสนิสิตและรหัสกลุ่ม แล้วสลับตำแหน่งรหัสนิสิตกับรหัสกลุ่ม ด้วยความสามารถของ regex (Regular Expression) แล้วสั่งจัดเรียงใหม่ตามรหัสนิสิตให้ตรงกับในใบรายชื่อ
1. Ctrl+A เพื่อเลือกข้อมูลทั้งหมด
2. สั่ง Replace ด้วย 1) Ctrl-H หรือ 2) Right click หรือ Ctrl-Shift-P เลือก Command Palette แล้วพิมพ์ Replace แล้ว Enter
3. พิมพ์สั่ง Replace : Find " (.*) " ด้วย "," เพื่อลบข้อมูลให้เหลือเฉพาะคอลัมแรกกับสุดท้ายที่เป็นเลขที่กลุ่มกับรหัสนิสิต
4. พิมพ์สั่ง Replace : Find "(.*),(.*)" ด้วย "$2,$1" เพื่อสลับตำแหน่งเอารหัสนิสิตมาอยู่คอลัมแรก เลขที่กลุ่มไปอยู่คอลัมที่สอง
5. เมื่อมีคำค้น และคำแทนที่แล้ว ก็สั่งแทนที่ทั้งหมด (Replace All) ด้วย Ctrl+Alt+Enter
6. พิมพ์สั่ง Sort Lines Ascending
7. มีตัวอย่างแฟ้มที่ tec1001_631_group.txt
เช่น "99 นาย บุรินทร์ รุจจนพันธุ์ 6314010001"

Data cleansing : รหัสนิสิต เพื่อเช็คชื่อใน excel

# การจัดการข้อมูลให้ได้มาเฉพาะรหัสนิสิต
1. คัดลอกข้อมูลจาก comment ใน facebook.com
2. วางใน vs code
3. สั่งแทนที่ [ก-ฮ] ด้วย space หรือลบทุกอย่างที่ไม่ใช่ตัวเลข [!-/a-z}-๙]
4. สั่งแทนที่ 63 ด้วย \n63 เพราะรหัสนิสิตขึ้นต้นด้วยเลขปีนี้
5. สั่งแทนที่ space ด้วย \n
6. ต้องการจัดเรียงบรรทัด ให้กด f1 เพื่อ install
7. ค้น Sort Lines Assending แล้วติดตั้ง
8. สั่ง ctrl-a เลือกทั้งหมดแล้ว right click เลือก Command Palette (Ctrl-Shift-P)
9. พบ Sort Lines Assending ขึ้นมาแสดงบรรทัดแรก คลิ๊กสั่งได้เลย
10. บรรทัดที่ไม่ใช่ เหลือแต่บรรทัดที่มีรหัสนิสิต และตรวจสอบ

# การตรวจสอบด้วยวิธีจับคู่ข้อมูลใน excel
1. อธิบาย excel function
2. MATCH(B5,G$3:G$32,0) 0 คือ จับคู่แบบตรงเงื่อนไขทุกประการ และแสดงลำดับที่พบในรายการ
3. IFERROR(wow(),"error") ตรวจสอบ error กรณีนี้ไม่มีฟังก์ชัน wow
4. IF(IFERROR(MATCH(B5,G$2:G$32,0),0)>0,"มา","-") แสดงคำว่า มา ถ้าพบในรายการ
5. นำรหัสนิสิตที่มาเรียนไปวางใน G3 - G32
6. นำรหัสนิสิตที่มีชื่อลงทะเบียนเรียนวางใน B3 - B32
7. นำฟังก์ชันตรวจสอบไปวางในเซล C3 แล้วคัดลอกไปจนถึง C32
8. นับจำนวนด้วย =COUNTIF(C2:C32,"มา")
- [แฟ้มตัวอย่าง](http://www.thaiall.com/office/check_class_from_fb_comment.xlsx)

การคัดลอกข้อมูลจาก timeshighereducation.com มาใช้

ขั้นตอนการปรับปรุงเว็บเพจ (12 กรกฎาคม 2563)
1. เปิด https://www.timeshighereducation.com/world-university-rankings/2020/world-ranking#!/page/0/length/-1/sort_by/rank/sort_order/asc/cols/stats
2. เปลี่ยนจาก Show 25 entries เป็น All entries 
3. save as เป็น World University Rankings 2020 _ Times Higher Education (THE).html (Webpage, Complete / HTML Only (*.html,*.htm)) ไปในพื้นที่ทำงาน
4. เปิดแฟ้ม [World .. .html] ที่มีขนาดถึง 1072 KB ด้วย editor ที่ถนัด เช่น editplus หรือ notepad++ หรือ sublime หรือ atom หรือ vscode 
5. ใน Source code มองเห็น tag คือ class="toggle-cols" บรรทัดยาว 9 แสนกว่าตัวอักษร หรือบรรทัดที่ 294
6. ใน vscode กด Alt+Z = Toggle word wrap แล้ว copy บรรทัดนี้ บรรทัดเดียว โดย 1) เลือกบรรทัด แล้วกด Ctrl+C เฉพาะบรรทัดนี้ 2) กด Ctrl+A เลือกทั้งหมดแล้วกดปุ่ม Del 3) กด Ctrl+V แฟ้มนี้จะเหลือบรรทัดเดียว
7. สั่ง Replace All ด้วย Ctrl+H แบบใช้ Regular Expression เตรียมที่จะใช้ \n
- https://docs.microsoft.com/en-us/visualstudio/ide/using-regular-expressions-in-visual-studio?view=vs-2019
- คำว่า <tr เป็น \n<tr (ได้ข้อมูลจำนวน 1261 บรรทัด)
- คำว่า class="rank sorting_1 sorting_2" เป็น ว่างเปล่า
- คำว่า class=" name namesearch" เป็น ว่างเปล่า
- คำว่า class="ranking-institution-title" เป็น ว่างเปล่า 
- คำว่า data-position="title" data-mz="" เป็น ว่างเปล่า
- คำว่า class="location" เป็น ว่างเปล่า
- คำว่า class=" stats stats_number_students" เป็น ว่างเปล่า 
- คำว่า class=" stats stats_student_staff_ratio" เป็น ว่างเปล่า
- คำว่า class=" stats stats_pc_intl_students" เป็น ว่างเปล่า
- คำว่า class=" stats stats_female_male_ratio" เป็น ว่างเปล่า
- คำว่า class="btn btn-purple btn-margin" data-position="explore" data-mz="" เป็น ว่างเปล่า	
- คำว่า class="btn btn-purple btn-margin" data-position="uni-apply" data-mz=""
- คำว่า <div><span><a href="(.*)">(.*)</a></span></div> เป็น <div><span>$2</span></div> ของ vscode หรือ <div><span>\2</span></div> ของ editplus
- คำว่า  _blank"="" เป็น ว่างเปล่า
- คำว่า (Explore|Apply|gold|silver|enhanced) เป็น ว่างเปล่า
- http://www.thaiall.com/topstory/timeshighereducation_2019_2020.php

การสร้างเว็บเพจ แสดงรายการเว็บเพจ จากแฟ้มใน folder

microsoft/../regex_vscode

การใช้ editor สร้าง webpage ด้วยการสั่งเปลี่ยน data เป็น html code ด้วยการนำข้อมูลรายการแฟ้ม *.htm มาสร้างแฟ้มผ่านคำสั่ง dir แล้วใช้ editor สั่งแทนที่เป็น html code ตามที่ต้องการ ซึ่งการ replace ต้องใช้ Regular Expression ซึ่งประยุกต์ได้กับการทำ Data Cleansing กรณีมีข้อมูลจำนวนมาก เช่น access.log
1. dir *.htm > list.htm
2. ใช้ vscode , open file = list.htm
3. Menu bar, edit, replace หรือ Ctrl+H
4. กด Alt+R เป็น Use Regular Expression มีสัญลักษณ์คือ (.*)
5. สั่งแทนที่ด้วย Regex คือ (.*) (.*) (.*).htm
เป็น <a href="$3.htm">$3.htm</a> $1<br/>
6. ตัวอย่างผลลัพธ์
<a href="hello.htm">hello.htm</a> 12/24/2019 04:48 PM<br/>

การใช้ vscode เช็คความเข้าคู่ของ block ใน joom.htm

joom.htm คือ เว็บเพจแบบเป็น static นำเสนอเลเอาท์แบบ responsive web design ที่ใช้ block ด้วย div แทนการใช้ table มีการใช้ css ทั้ง External CSS, Internal CSS, Inline CSS ทดสอบด้วย Page speed, insight ได้คะแนน 100 แต่ถ้าใช้ truehits.net ก็จะได้ไม่ถึง จึงเตรียมไว้ 2 หน้า คือ joom.htm และ joom100.htm เพื่อเปรียบเทียบผลการตรวจสอบใน Page speed เมื่อใช้ vscode เปิดรหัสต้นฉบับ กด Ctrl+F พบ <div และ /div จำนวนเท่ากัน คือ 84 คู่

การเขียนภาษา java บน vscode

เมื่อเขียน x.java เรียบร้อยแล้ว และต้องการ compile ด้วย javac และสั่ง run ด้วย java สามารถสร้าง label ชื่อ javacompile กับ javarun ใน task.json ไว้สั่งให้ compile x.java โดยเริ่มจากการเลือก folder ที่เก็บรหัสต้นฉบับเข้า Workspace แล้วเขียน code จนแล้วเสร็จ จากนั้นก็จะสั่ง compile และ run ผ่าน Terminal ซึ่ง x.class ที่ได้จาก Terminal กับ java extension อยู่คนละที่กัน

- Menu bar, Add Folder to Workspace
- เลือก C:\Program Files\Java\jdk-14.0.1\bin เพื่อเป็นพื้นที่ทำงานต่อไป
- Menu bar, File, New file หรือ Ctrl+N
- พิมพ์ class x1{public static void main(String args[]){System.out.println(5);}}
- Menu bar, File, Save หรือ Ctrl+S 
- เลือก Folder C:\Program Files\Java\jdk-14.0.1\bin 
- แล้วกรอกชื่อโปรแกรม เช่น x.java แล้วคลิ๊ก Save
- Menu bar, File, Close editor หรือ Ctrl+F4
- Menu bar, File, Open file หรือ Ctrl+O
- Menu bar, Terminal , Configure Task..
- เลือก Create task.json file from template
- เลือก Others Example to run an arbitray (โดยพลการ) external command
พบ task.json
{"version": "2.0.0","tasks": [
{"label": "echo","type": "shell","command": "echo Hello"}
]}
- สร้าง javacompile
{"version": "2.0.0","tasks": [
{"label": "javacompile","type": "shell","command": "javac \"${file}\""}
]}
- Menu bar	, Terminal, Run Task, javacompile พบแฟ้ม x.class
{"version": "2.0.0","tasks": [
{"label": "javarun","type": "shell","command": "java \"${fileBasenameNoExtension}\""}
]}
- อ่านเพิ่ม https://code.visualstudio.com/docs/editor/variables-reference

การใช้ Java Extension Pack บน VSCode

การใช้งาน Extension เริ่มจากกด Ctrl+Shift+X ค้น Java แล้วมองหา Java Extension Pack 0.9.1 แล้วคลิ๊กติดตั้ง ซึ่งปกติแล้ว เมื่อสร้างแฟ้ม x.java โปรแกรมจะรู้ว่ากำลังเขียนภาษา Java ก็จะแนะนำ Extension ตัวนี้มาให้โดยอัตโนมัติ จะช่วยหลายเรื่อง เช่น run และ debug ที่ไม่ต้องไปสร้าง Task ใน Terminal ด้วยตนเอง

- พบ The Java extension pack is recommended for this file type. คลิ๊ก Install
- หลังติดตั้ง Java Extension Pack 0.9.1 พบ 2 หน้าต่างมาให้อ่านกัน คือ Java Overview กับ v0.9.0.md
- อ่านเพิ่ม https://code.visualstudio.com/docs/languages/java
- เมื่อเปิด x.java ขึ้นมา จะมี run กับ debug ให้สั่งคลิ๊กได้โดยง่าย
- คำสั่ง run จะรวมการทำงานของ javac กับ java เป็นขั้นตอนเดียว

#สั่งแทนที่ของเดิมด้วยของใหม่

นักการศึกษาที่มีประสบการณ์ มักให้ความสนใจกับการจัดอันดับสถานศึกษา ว่าสถาบันใดได้อันดับหนึ่งสองสามสี่ ยิ่งสถาบันมีเลขอันดับเลขตัวเดียวยิ่งสะท้อนคุณภาพ เนื่องจากผมมีโอกาสแบ่งปันข้อมูลผลการจัดอันดับ แล้วระบบ ranking ของผม พบเพจนี้ขึ้นมาเบอร์ 1 เลย จึงกลับไปรื้อฟื้นทบทวน และปรับปรุง style ให้ดีขึ้น พบว่า ใน code มีการใช้ tag รุ่นเก่า จึงสั่งแทนที่โดยใช้ editor ซึ่งมีขั้นตอนดังนี้
1. เลือก editor เก่ง ๆ แต่ต้องไม่ใช่ notepad
2. เลือกฟังก์ชัน replace
3. เปิดบริการ regular expression
4. ช่องค้น find ถ้าอักษรตัวเดียวก็ใช้ (.) สองตัวก็ใช้ (..)
5. ช่องแทนที่ replace ก็ใช้ \1 แทนที่ตัวแปรตัวแรก
6. tag อื่น ๆ ก็เปลี่ยนได้ตามประสงค์
กรณีของผมเปลี่ยนจาก แท็กเอชทีเอ็มแอล เป็น ซีเอสเอส ตามภาพผมใช้ Editplus แล้วเลือก Regular Expression #tips #regularexpression #thaiall #find #replace

การใช้ regex บน notepad++ และ vscode ใช้ /1 กับ $1

number to insert ใน notepad++ / input sequential Number ใน vscode

Ctrl + Shift + L = Select All Occurrences
F1 แล้วค้น Input Sequential Number
พิมพ์ 1 คือ เริ่ม 1 แล้วเรียงลำดับ
พิมพ์ 1 + 2 คือ เริ่ม 1 แล้วเรียงเป็นเลขคี่
คำที่ใช้สั่งงาน start-เริ่ม operator-ดำเนินการ step-ขั้น : digit-ตำแหน่งเลข : radix-เลขฐาน
https://marketplace.visualstudio.com/items?itemName=tomoki1207.vscode-input-sequence

Live server

Live Server คือ Extension บน VSCode ที่ช่วยให้ การประมวลผล หรือทดสอบโค้ดที่ทำงานบนเครื่องบริการ อาทิ html หรือ javascript แสดงผลได้โดยง่าย ติดตั้งโดยกด Ctrl+Shift+X = Extensions แล้วค้น Live Server ของ ritwickdey.liveserver แล้วคลิ๊ก install เมื่อพัฒนาโปรแกรมเสร็จแล้ว และต้องการทดสอบ สามารถใช้ Right Click บน code เลือก Open with Live server (Alt+L Alt+O) ก็จะมีหน้าต่าง Explorer ปรากฎขึ้นพร้อมกับเรียกใช้ผ่าน 127.0.0.1 ผ่าน พอร์ต หมายเลข 5500

ปรับข้อมูลใน filezillaserver.log ไปใช้งาน

ชวนมองการใช้ regex
1. พิมพ์สั่ง Replace "[)][>] " ด้วย "\t"
แล้วช่วนใช้คำสั่งอะไรต่อดีครับ
sourceforge.net/../ftpstats/
พัฒนาโปรแกรมด้วยภาษา C (Help) และ Export ผลการอ่านได้ ออกไปเป็น Text เฉพาะคนที่เลือกสนใจขณะ View
เช่น abc (.txt)

การใช้ notepad++ สั่งลบ link

กรณีใช้ notepad++ สั่งลบ link ออกจาก html file สามารถสั่งแทนที่ (Replace) โดยกำหนดคำค้น (Find what) <a href=(.*)>(.*)</a> แล้วแทนที่ด้วย (Replace with) $2 แต่ถ้าใช้ vscode การสั่งแทนที่ด้วย Regular expression ก็จะใช้ได้เหมือนกัน

การใช้ editplus สั่งเพิ่ม "" คลุมตัวแปร

กรณีใช้ editplus สั่งเพิ่ม "" ให้กับค่าของตัวแปร name สามารถสั่งแทนที่ (Replace) โดยกำหนดคำค้น (Find what) <a name=(.*)></a> แล้วแทนที่ด้วย (Replace with) <a name="\1"></a> แต่ถ้าใช้ vscode การสั่งแทนที่ตัวแปรด้วย Regular expression ก็จะใช้ $1 แทน \1

การใช้ notepad++ เปลี่ยน EOL

โค้ด mysql_test357.php ถูกปรับปรุงให้ผ่านการตรวจสอบความถูกต้องทั้ง php และ html format แต่เมื่อนำโค้ดไปแสดง ในเว็บเพจให้สวยงามผ่าน code prettify.js พบว่า บรรทัดกระโดดแบบบรรทัดเว้นบรรทัด ตรวจสอบดูพบว่า source code อยู่ในรูปแบบ Windows (CRLF) จึงใช้ Notepad++ เปลี่ยน EOL จาก Windows (CRLF) เป็น Linux (LF) ซึ่งการเปลี่ยนโค้ดไม่มีผลต่อการประมวลผล แต่จะทำให้ขนาดแฟ้มลดลง บรรทัดละ 1 byte ซึ่งเป็นผลดีต่อประสิทธิภาพของระบบขึ้นอีกหนึ่งประเด็น
พอเปลี่ยนเสร็จ ถึงมาเข้าใจว่า ทำไมค้นหา space+\n ไม่พบ ในระหว่างปรับโค้ด

การใช้ editplus + regex ลบบรรทัด

เมื่อต้องการลบโค้ดหลายบรรทัดที่เหมือนกัน จึงเลือกสั่ง Replace แต่ในบรรทัดมีข้อมูลที่เป็น keyword ต่างกัน จึงต้องใช้ Regular Expression สั่งเลือกข้อมูลด้วย (.*) ดังภาพ แล้วต้องเปลี่ยนจาก ? เป็น \? เพราะเครื่องหมาย ? เป็น Regular Expression จึงต้องเพิ่ม \ เพื่อไม่ให้เครื่องหมาย ? ทำงาน แล้วฟังก์ชันการ replace จะได้ทำงานได้ตามที่สั่งงาน

"ไม่เริ่มต้นในวันนี้ จะไม่มีทางสำเร็จในวันพรุ่ง" โดย โยฮัน ว็อล์ฟกัง ฟ็อน เกอเทอ

Thaiall.com

Truehits.net