Giới thiệu về Visual Studio Code

Visual Studio Code là một trong những trình biên tập & soạn thảo mã nguồn do Microsft phát triển vô cùng phổ biến và được cộng đồng lập trình viên trên thế giới sử dụng rộng rãi. Vì tính gọn nhẹ, đa nền tảng ( có thể sử dụng trên hệ điều hành Windows, Linux, Mac OS) và quan trọng nhất là hoàn toàn miễn phí, cho phép cộng đồng phát triển extension (tính năng mở rộng) đó là lí do hiện tại VS Code được cộng đồng lập trình viên yêu thích và ứng dụng để phát triển nhiều ngôn ngữ lập trình khác nhau.

Với góc nhìn cá nhân của mình, khi mới làm nghề code (mình làm PHP) ban đầu mình sử dụng IDE PHP Storm, vô cùn phù hợp cho người mới vì các tính năng có sẵn và hỗ trợ nhắc code gần hết mà hầu như không phải cài đặt thêm gì, tuy nhiên sau thời gian có kinh nghiệm làm việc, mình quyết định chuyển sang sử dụng visual studio code, mặc dù mới đầu gặp khó khăn vì đã quen với phím tắt, tính năng và giao diện trình soạn thảo cũ tuy nhiên chri sau 1 tháng mình đã chuyển hẳn sang visual studio code vì tính tiện dụng, có thể code nhiều ngôn ngữ khác nhau mà quan trọng nhất là tính ngọn nhẹ của nó !

Một số extension hay dùng trong Visual Studio

Extension FTP & SFTP cho Visual Studio:

SFTP _{Tác giả: liximomo}

Extension nhắc code PHP cho Visual Studio:

PHP Intelephense _{Tác giả: Ben Mewburn}

php-fmt – PHP Formater _{Tác giả: kokororin}

Extension nhắc code HTML, tự động bổ sung thẻ:

Auto Rename Tag _{Tác giả: Jun Han}

Các phím tắt Visual Studio:

• Reformat ( định dạng lại code) để code thể hiện rõ cấu trúc: bấm tổ hợp phím Shift + Alt + F.

Xem chi tiết thảo luận tại stack overflow

• Search and replace: Ctrl+H với windows, command+option+F với Macos
• Comment code nhanh: ctrl+/ với windows, command+/ với Macos
• Tab khối lệnh để định dạng lại code cho đẹp và đúng cấu trúc: tab

Collapse code /Expand code (mở rộng, thu gọn các hàm trong cấu trúc code để dễ nhìn khi lập trình): bấm tổ hợp phím Ctrl + Shift + [ , Ctrl + Shift + ]

Các vấn đề thường gặp

Không bấm được tab trong visual studio:

Cách xử lý: bấm tổ hợp phím Ctrl+M với Windows hoặc Command+shift+M với Macos

xem chi tiết thảo luận tại stack overflow

Sử dụng SFTP để upload code:

Bước 1: cài Extension STFP của author liximomo

Tìm trên thanh menu header, view -> command pallete -> SFTP:Config để tạo file sftp.json cho thư mục

cấu hình file sftp.json như sau:

{    
"protocol": "ftp",    
"host": "hostname",    
"port": 21,    
"username": "username",    
"password": "",    
"remotePath": "/path",    
"uploadOnSave": true
}

Build SASS,LESS,SCSS trong Visual Studio Code

Bước 1: cài Sass hoặc Less transpiler

npm install -g sass less

Bước 2: Tạo file sass hoặc less

Bước 3: tạo file tasks.json, tạo thủ công file sass ở thư mục root dự án hoặc thao tác  Terminal > Configure Tasks > Create tasks.json file from template

// Sass configuration
{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Sass Compile",
      "type": "shell",
      "command": "sass styles.scss styles.css",
      "group": "build"
    }
  ]
}

Bước 4: build sau mỗi lần cập nhật file scss:

Ctrl+Shift+B (Run Build Task).

Chọn task phù hợp ( trong trường hợp có nhiều task).

Xóa khoảng trắng tab khối lệnh trong visual studio code

Giải pháp 1:

• Chọn khối lệnh
• Dùng tổ hợp phím tắt shift+tab để tab khối lệnh về bên trái

Giải pháp 2:

• Chọn option: “Selection” > “Column Selection mode” trên thanh header công cụ
• Giữ shift, chọn các khoảng trắng cần xóa bằng chuột trái
• Bấm backspace hoặc delete để xóa các khoảng trắng.

Xem chi tiết thảo luận tại stack overflow