Giới thiệu và cấu hình Visual Studio Code – Trình soạn thảo tối ưu cho lập trình viên

Bước 1: Thực hiện truy cập trang: https://code.visualstudio.com/

Thực hiện download theo hệ điều hành của bạn, như ảnh dưới đây là download trên hệ điều hành Window, thực hiện cài đặt về

Chú ý: trên Ubuntu: nếu cài VS Code từ Ubuntu Software nó là app dạng snap, chưa hỗ trợ ibus nên không gõ được tiếng việt

Sau đó mình có gỡ cài đặt và lên https://code.visualstudio.com/download để cài đặt và đã khắc phục được. Sau khi tải về thư mục /Downloads và mở terminal: cd Downloads ⇒

sudo dpkg -i <tên_file_vừa_tải> => sudo apt-get install -f

Khi mở file:

• Click chuột đơn: Mở file, sau đó sẽ tự động đóng lại nếu có file file khác mở

• Click đúp chuột vào file thì nó mới mở cố định

Bước 2: Thực hiện cài đặt Vscode vừa tải về

Bước 3: Nhấp vào biểu tượng Trình cài đặt để bắt đầu quá trình cài đặt Visual Studio Code.

Bước 4: Sau khi Trình cài đặt mở ra, bạn sẽ được yêu cầu chấp nhận các điều khoản và điều kiện của Visual Studio Code. Nhấp vào "Tôi chấp nhận thỏa thuận" rồi nhấp vào nút "Tiếp theo".

Bước 5: Chọn dữ liệu vị trí để chạy Visual Studio Code. Sau đó, bạn sẽ được yêu cầu duyệt vị trí. Sau đó, nhấp vào nút Tiếp theo.

Bước 6: Sau đó, nó sẽ yêu cầu bắt đầu thiết lập cài đặt. Nhấp vào nút Cài đặt.

Bước 7: Sau khi nhấp vào Cài đặt, sẽ mất khoảng 1 phút để cài đặt Visual Studio Code trên thiết bị của bạn.

Bước 8: Sau khi quá trình cài đặt Visual Studio Code hoàn tất, một cửa sổ như bên dưới sẽ hiển thị. Đánh dấu vào ô "Khởi chạy Visual Studio Code" rồi nhấp vào Tiếp theo.

Bước 9: Sau bước trước, cửa sổ Visual Studio Code đã mở ra thành công. Bây giờ bạn có thể tạo một tệp mới trong cửa sổ Visual Studio Code và chọn ngôn ngữ lập trình của mình để bắt đầu hành trình lập trình!

Quá trình cặt đặt đã hoàn tất, chúng ta cùng bật VSCode để trải nghiệm nào

Tiếp theo là giới thiệu 1 số phím tắt thông dụng khi dùng VSCode

Một số phần cấu hình mở rộng của VSCode

Cài đặt phần mở rộng VS Code PHP

Ngay sau khi cài đặt, VS Code đã nhận dạng được mã PHP và giúp làm nổi bật cú pháp, gỡ lỗi cơ bản và thụt lề mã. Các tính năng này thích hợp cho các chỉnh sửa nhanh hoặc khi làm việc với các tập lệnh PHP riêng lẻ. Tuy nhiên, làm việc trong các dự án lớn hơn có thể trở nên khó khăn nếu không có thêm ngữ cảnh xung quanh mã và cách mỗi tệp tương tác và tích hợp trong dự án lớn hơn.

Có một số phần mở rộng VS Code có thể giúp tăng tốc năng suất của bạn khi làm việc trên các dự án PHP.

Mở tab tiện ích mở rộng bằng cách nhấp vào biểu tượng cuối cùng trên thanh menu bên trái hoặc bằng cách nhấn CTRL + SHIFT + X. Thao tác này sẽ hiển thị menu thanh bên với hộp tìm kiếm và danh sách các tiện ích mở rộng phổ biến hoặc được đề xuất. Nhập “php” hoặc các key dưới: (chọn 1 trong các ext sau)

1. PHP Intelephense: Dùng con này nên mua key 15$ nếu không sẽ ít tính năng.

2. PHP DEVSENSE: Miễn phí chức năng rất nhiều nhưng theo đó là tốn RAM. Dùng nếu máy bạn có khoảng 16GB RAM hoặc 8GB RAM nếu chạy ít tác vụ.

3. PHP IntelliSense : Tùng đang dùng, hiện tại mới hỗ trợ đến PHP 7.4

Tham khảo thêm: https://www.digitalocean.com/community/tutorials/how-to-set-up-visual-studio-code-for-php-projects Ghi chú:

PHP DEVSENSE không tự thêm new line khi kết thúc file nên ta cần bật new line mặc định của editor như ảnh

Hướng dẫn format source code

Để format source code trên Visual Studio Code, chúng ta sử dụng tổ hợp phím:

Shift+Alt+F

Hoặc trên file source code của bạn ⇒ bấm tổ hợp phim [ Shift+Alt+F ] nếu chưa đượcc hỗ trợ nó sẽ hiển thị thông báo, Lúc này chỉ cần bấm Install Formatter… để tìm extension tương ứng.

Định dạng HTML

Mặc định VS Code cho xuống dòng mã HTML nếu nó quá 120 ký tự. Điều này khá rắc rối và cũng gây nhiều lỗi trong các tool của NukeViet. Do đó cần tắt đi như ảnh

Xem và định dạng TPL

Hiện chưa tìm thấy plugin nào miễn phí hỗ trợ tốt việc soạn thảo file TPL: Chứa cả js, css, html, smarty. Cách làm là tận dụng những gì có sẵn.

1. Vào thiết lập file associations như ảnh

Xử lý tương tự cho file: *.ini dùng xml

2. Bật xóa ký tự thừa cuối dòng khi lưu như ảnh

3. Định dạng markdown dùng 2 space cuối dòng để đánh dấu xuống dòng, do đó cần tắt thao tác ở bước 2 bằng cách mở settings.json (trong settings kéo tìm chữ Edit in settings.json rồi ấn vào đó) lên thêm vào

  "[markdown]": {
        "files.trimTrailingWhitespace": false,
    }

4. Tắt định dạng javascript trong file tpl bằng cách thêm vào settings.json

"html.format.unformatted": "script",

Extension GitLens

VSCode đã hỗ trợ pull/push từ Git, nhưng GitLens bá đạo hơn nhiều. Nó giúp bạn biết từng dòng code do ai viết, viết vào lúc nào, nằm trong commit nào. Bạn cũng có thể …. ngược về quá khứ để xem file đã thay đổi như thế nào, rất tiện

Switch between branches

1. Access the “Source Control” tab on the left side of VSCode

2. Click on the “three small dots” next to the refresh button

3. Click on the “Checkout to…” option

4. Choose the branch you want to switch to

Snippet trong Visual Studio Code

Tham khảo:

• https://thangdangblog.com/huong-dan-tu-tao-snippet-cho-visual-studio-code/

Cài đặt phần mở rộng khác

• Material Icon 8,1M hoặc vscode-icons 8,2M : thay đổi Icon của trình quản lý file

• Live Server 13M: Xem file trực tiếp

• Bracket Pair Colorizer 5.6M: Tô màu các dấu ()[]{}, nhìn 1 phát là biết cái nào đi cặp với cái nào, không còn lẫn lộn, thừa thiếu dấu nữa

• Auto Rename Tag 5,8 M: Auto rename paired HTML/XML tag

• Project Manager 1,7M: Easily switch between projects

• Prettier - Code formatter 13,5M Code formatter: JavaScript · TypeScript · Flow · JSX · JSON CSS · SCSS · Less HTML · Vue · Angular GraphQL · Markdown · YAML Tham khảo thêm: https://vhnam.github.io/tutorials/format-code-voi-prettier/

Một số Extension khác 

1. All:

• https://marketplace.visualstudio.com/items?itemName=doi.fileheadercomment (Thêm header comments cho file)

• https://marketplace.visualstudio.com/items?itemName=josee9988.minifyall (minifier and compressor for CSS, HTML ,JSON, JavaScript, LESS, SASS, SCSS, and JSONC)

2. Cho php:

• https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client (Nhiều tính năng cần thiết)

• https://marketplace.visualstudio.com/items?itemName=emallin.phpunit (PhpUnit)

• https://marketplace.visualstudio.com/items?itemName=junstyle.php-cs-fixer (ĐỊnh dạng)

3. Cho JS:

• https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify (Định dạng JS, CSS, HTML)

• https://marketplace.visualstudio.com/items?itemName=capaj.vscode-standardjs-snippets (code snippets)

• https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets (code snippets)

• https://marketplace.visualstudio.com/items?itemName=donjayamanne.jquerysnippets (jquery code snippets)

4. Cho CSS:

• https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify (Định dạng JS, CSS, HTML)

• https://marketplace.visualstudio.com/items?itemName=aeschli.vscode-css-formatter (Định dạng)

5. Cho TPL:

• https://marketplace.visualstudio.com/items?itemName=imperez.smarty (Đọc, định dạng smarty)

6. Cho SQL

• https://marketplace.visualstudio.com/items?itemName=adpyke.vscode-sql-formatter

7. Cho Images:

• https://marketplace.visualstudio.com/items?itemName=andi1984.tinypng (compress your JP(E)G and PNG images directly inside VSCode)