VS Code หรือ Visual Studio Code นั้นเป็นโปรแกรมประเภท Editor ที่มีความเร็วเวลาเปิดแก้ไขโค๊ดและมี Extension มากมายเพื่อช่วยให้พัฒนาได้สะดวกมากยิ่งขึ้นจึงเป็นที่นิยมในกลุ่มนักพัฒนา ข้อดีของ VS Code คือ
download และติดตั้ได้ที่ https://code.visualstudio.com/
เมื่อดาวน์โหลดและติดตั้งโปรแกรมเสร็จแล้ว ก็เปิดโปรแกรมขึ้นมา
เข้าไป ติดตั้ง Plugin เพื่อใช้งานได้เลย โดยไปที่ Extension ค้นหา vscode-icons จากนั้นก็ติดตั้ง
เราสามารถเข้าไปตั้งค่าการใช้งานเบื้องต้นผ่านไฟล์ settings.json ได้เลย
{
"editor.fontSize": 15,
"editor.tabSize": 2,
"editor.wordWrapColumn": 80,
"editor.fontLigatures": true,
"editor.snippetSuggestions": "top",
"editor.minimap.enabled": true,
"editor.semanticHighlighting.enabled": false,
"files.trimTrailingWhitespace": true,
"html.suggest.html5": true,
"stylelint.enable": true,
"window.zoomLevel": 0,
"javascript.validate.enable": false,
"extensions.autoUpdate": true,
"terminal.integrated.fontSize": 13,
"vsicons.projectDetection.disableDetect": true,
"vsicons.dontShowNewVersionMessage": true,
"editor.formatOnSave": false,
"prettier.singleQuote": true,
"prettier.printWidth": 80,
"prettier.trailingComma": "all",
"prettier.semi": true,
"prettier.useTabs": false,
"prettier.bracketSpacing": true,
"workbench.iconTheme": "vscode-icons",
"editor.wordWrap": "on",
}
รวม keyboard shortcuts สำหรับใช้งาน VS CODE
Key | ความหมาย |
---|---|
Ctrl+G | ค้นหาเลขแถว |
Ctrl+P | ค้นหาไฟล์โดยการพิมพ์ชื่อไฟล์ได้เลย |
Ctrl+D | ค้นหาข้อความรอบละ 1 ข้อความที่ซ้ำๆ กัน |
Ctrl+F | ค้นหาข้อความในไฟล์ เลือกพิมพ์เล็ก พิมพ์ใหญ่ได้ตามต้องการ |
Ctrl+S | บันทึกไฟล์ |
Ctrl+B | เปิด-ปิด Sidebar |
Ctrl+K | เคลียร์ข้อความใน terminal |
Shift+Alt+F | จัดรูปแบบโค้ด |
Ctrl+Shift+P | แล้วพิมพ์ Open Keyboard Shortcuts เพื่อแก้ไข shortcuts ต่างๆตามต้องการ |
Ctrl+Shift+5 | เพื่อเปิด split terminal |
XAMPP เป็นโปรแกรม Web Server จำลอง มีไว้เพื่อทอสอบสคริปต์ PHP เป็นโปรแกรมที่ใช้งานได้ฟรี
เมื่อติดตั้ง XAMPP แล้ว มันจะมาพร้อมกับ Apache, MariaDB, PHP, และ Perl
สำหรับวิธีการติดตั้งมีขั้นตอน ดังนี้
Node.js® เป็น Runtime JavaScript ที่มีการทำงานแบบ Asynchronous
Node.js® เป็นภาษา JavaScript ที่ ได้รับการออกแบบมาเพื่อสร้าง Applications ที่ปรับขนาดได้ รองรับการเชื่อมต่อจำนวนมากได้พร้อม ๆ กัน แต่ถ้าไม่มี Process ให้จัดการ Node.js จะเข้าสู่โหมด sleep นอกจากนี้ Node.js® ยังเป็น Cross Platform Enviroment แถมยังเป็น Open Source ด้วย ปัจจุบัน NodeJS ถูกนำมาทำเป็น Web Server , Mobile Hybrid , TVOS และอื่น ๆ อีกมากมาย
สามารถดาวน์โหลดและติดตั้งเพื่อเริ่มต้นการใช้งาน https://nodejs.org/en/download/ โดยเลือก Windows Installer ให้เหมาะสมกับสเปคของเครื่องคอมพิวเตอร์ที่ใช้งาน
เมื่อ ดาวน์โหลด และติดตั้งเสร็จแล้ว เปิด Comman Promt พิมพ์คำสั่ง node -v (คำสั่งตรวจสอบเวอร์ชั่นของ Node.js) จากนั้นกด enter ได้เลย
หลังจากติดตั้ง node.js แล้ว ผู้ใช้สามารถใช้งาน node.js ได้ โดย สร้าง app แสดงข้อความง่ายๆ Hello World
const http = require('http');
const hostname = '127.0.0.1';
const port = 3000;
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello World');
});
server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});
Composer เป็นเครืองมือที่ใช้จัดการ Library ของ PHP
ซึ่งสามารถติดตั้งหรือลบ Package ต่าง ๆ ได้ที่ Project ของเรา โดยที่เราไม่ต้องเข้าเว็บไซต์เพื่อไปดาวน์โหลด Package นั้นแล้วนำมาใช้งาน ลักษณะการใช้งานคือ ให้ระบุ Package ที่ Project ของเรา โดยใส่ไว้ในไฟล์ composer.json จากนั้น composer จะทำการติดตั้งหรืออัพเดท Package ที่เราต้องการใช้งานให้เลย
JSONView เป็น Extension ที่ช่วยจัดการข้อมูลในรูปแบบของ Json ให้ดูง่ายขึ้น
เข้าไปติดตั้งได้ที่ https://chrome.google.com/webstore/detail/jsonvue/chklaanhfefbnpoihckbnefhakgolnmc
Wappalyzer เป็น Extension ที่จะทำให้เราสามารถดูได้ว่าเว็บไซต์ที่เราสนใจนั้น ใช้เทคโนโลยีตัวไหนอยู่บ้าง สามารถส่องดูได้ตั้งแต่ ภาษาที่เขียน, frameworks, platfrom ecommerce เครื่องมือ analytic และอื่นๆอีกมากมาย
เข้าไปติดตั้งได้ที่ https://chrome.google.com/webstore/detail/wappalyzer-technology-pro/gppongmhjkpfnbhagpmjfkannfbllamg/related?hl=th