ติดตั้งเครื่องมือ ต่าง ๆ เพื่อไว้สำหรับ DEV

ติดตั้งเครื่องมือ ต่าง ๆ เพื่อไว้สำหรับ DEV
by pairat.p | มีผู้อ่านล่าสุดเมื่อ 11 ชั่วโมงที่แล้ว

จำนวนผู้อ่าน
494
หัวข้อย่อย
5
ถูกใจ
1

Visual Studio Code หรือ VSCode เป็นโปรแกรม Code Editor ที่ใช้ในการ Coding ซึ่งทาง Microsoft ก็ให้ใช้งานได้แบบฟรีและในบทความนี้เราจะมาติดตั้ง Tools ต่าง ๆ เพื่อให้สะดวกในงาน DEV

ติดตั้ง VSCode และส่วนเสริม รวมถึงการ Config เพื่อใช้งานส่วนเสริมต่าง ๆ

VS Code หรือ Visual Studio Code นั้นเป็นโปรแกรมประเภท Editor ที่มีความเร็วเวลาเปิดแก้ไขโค๊ดและมี Extension มากมายเพื่อช่วยให้พัฒนาได้สะดวกมากยิ่งขึ้นจึงเป็นที่นิยมในกลุ่มนักพัฒนา ข้อดีของ VS Code คือ 

  • สามารถติดตั้งทั้งบน Windows , MacOS และ Linux รองรับการเขียนโค๊ดได้หลายภาษา
  • สามารถเชื่อมต่อกับ Git ได้ง่าย
  • สามารถปรับเปลี่ยน Themes ได้ มีส่วน Debugger และ Commands
  • มีเครื่องมือและส่วนขยายต่าง ๆ ไว้ให้ใช้งานอีกมากมาย  
  • รองรับหลายภาษาทั้ง JavaScript, TypeScript และ Node.js เป็นต้น
     

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 เพื่อใช้เป็นเว็บ SERVER ภายในเครื่องของเรา

XAMPP เป็นโปรแกรม Web Server จำลอง มีไว้เพื่อทอสอบสคริปต์ PHP เป็นโปรแกรมที่ใช้งานได้ฟรี
เมื่อติดตั้ง XAMPP แล้ว มันจะมาพร้อมกับ Apache, MariaDB, PHP, และ Perl
สำหรับวิธีการติดตั้งมีขั้นตอน ดังนี้

  1. เข้าไปที่ https://www.apachefriends.org/download.html เพื่อทำการดาวน์โหลด XAMPP จากนั้นเลือกเวอร์ชั่นที่ต้องการดาวน์โหลด จากนั้นคลิกที่ปุ่ม Download (64 bit)
  2. ติดตั้งและเปิด Xampp Control Panel เปิดใช้งาน คลิกปุ่ม START
  3. เปิดเว็บ Browser พิมพ์ http://localhost/dashboard/

 

 

 

วิธีติดตั้ง NodeJS สำหรับ Windows ไว้ใช้งาน

 

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

  1. Create file index.js ใส่ Code คำสั่งลงใน file
  2. เปิด comman prompt  cd ไปที่ project 
  3. ใช้คำสั่ง node index.js
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 เพื่อดาวน์โหลด Package ต่าง ๆ มาไว้ใช้งาน

   Composer  เป็นเครืองมือที่ใช้จัดการ Library ของ PHP

     ซึ่งสามารถติดตั้งหรือลบ Package ต่าง ๆ ได้ที่ Project ของเรา โดยที่เราไม่ต้องเข้าเว็บไซต์เพื่อไปดาวน์โหลด Package นั้นแล้วนำมาใช้งาน  ลักษณะการใช้งานคือ ให้ระบุ Package ที่ Project ของเรา โดยใส่ไว้ในไฟล์ composer.json จากนั้น composer จะทำการติดตั้งหรืออัพเดท Package ที่เราต้องการใช้งานให้เลย

วิธีติดตั้งโปรแกรม Composer

  1. เข้าไปที่ https://getcomposer.org/download/ จากนั้นให้กดที่ Composer-Setup.exe เพื่อดาวน์โหลดไฟล์ 
  2. เมื่อดาวน์โหลดไฟล์เสร็จแล้ว ก็จะได้ตัวติดตั้งที่ชื่อ Composer-Setup
  3. ให้ทำการ Double Click ที่ไฟล์ Composer-Setup เพื่อทำการติดตั้งโปรแกรม จากนั้นจะแสดงหน้าจอ Composer Setup ให้กดปุ่ม Next > เพื่อไปขั้นตอนต่อไป
  4. โปรแกรมจะแสดงหน้าจอตรวจสอบการตั้งค่า
  5. เมื่อการตรวจสอบเบื้องต้นผ่านแล้ว จะแสดงหน้าจอเกี่ยวกับการตั้งค่า Proxy จากนั้นให้กดปุ่ม
  6. จากนั้นจะแสดงหน้าจอ พร้อมสำหรับการติดตั้ง ให้กดปุ่ม Install เพื่อติดตั้งโปรแกรม composer
  7. จากนั้นก็จะทำการติดตั้ง
  8. เมื่อติดตั้งเสร็จแล้ว จะแสดงข้อมูลเกี่ยวกับคำสำคัญในการติดตั้ง ให้กดปุ่ม Next >
  9. ตรวจสอบว่า Composer ที่ติดตั้งไปแล้วนั้นสามารถใช้งานได้หรือไม่ โดยการเปิด Command Prompt ขึ้นมา แล้วให้พิมพ์คำสั่ง composer -v จากนั้นให้กด Enter หลังจากนั้นจะแสดงโลโก้ Composer แสดงว่าติดตั้งได้สมบูรณ์พร้อมใช้งาน

 


 

แนะนำ Google Extension ที่น่าใช้งาน

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