Cách chạy JavaScript trong mã và chương trình Visual Studio như một người chuyên nghiệp

JavaScript đã được xếp hạng nhất quán là ngôn ngữ lập trình yêu thích của hầu hết các nhà phát triển.

Hơn 63% số người được hỏi được phỏng vấn trong một Khảo sát Stackoverflow năm 2023 cho biết họ sử dụng JavaScript. Mặt khác, mã Visual Studio là một môi trường phát triển tích hợp (IDE) phổ biến. Giống nhau sự khảo sát cho thấy VS Code là trình soạn thảo mã được ưa thích nhất, với hơn 73% số người được hỏi bỏ phiếu ủng hộ.

Visual Studio Code hỗ trợ JavaScript, cùng với nhiều ngôn ngữ khác. Trong bài viết này, tôi sẽ mô tả tầm quan trọng của việc chạy JavaScript trong Visual Studio Code, cách tạo dự án/viết mã JavaScript, đưa ra hướng dẫn từng bước để chạy JavaScript trong VS Code và các phương pháp hay nhất để chạy mã JavaScript trong Mã VS.

Tầm quan trọng của việc chạy JavaScript trong VS Code

JavaScript là một trong số ít ngôn ngữ được hỗ trợ ngay lập tức trong Mã VS. Đây là một số lý do khiến bạn muốn chạy JavaScript trên VS Code:

• Thực thi và kiểm tra mã: Bạn có thể viết và thực thi mã JavaScript mà không cần rời khỏi trình chỉnh sửa. Trình chỉnh sửa này sẽ xử lý mọi thứ bạn viết trong tệp có phần mở rộng .js dưới dạng mã JavaScript. Trình chỉnh sửa mã này cũng sẽ đánh dấu các lỗi trong mã của bạn khi bạn viết và giúp bạn dễ dàng gỡ lỗi.
• Nó có một thiết bị đầu cuối tích hợp: Bạn không cần phải rời khỏi trình soạn thảo mã để chạy các lệnh tạo thư mục hoặc tệp mới hoặc thực hiện kiểm soát phiên bản. Thiết bị đầu cuối này cũng cho phép bạn xem các thông báo lỗi.
• Một hệ sinh thái lớn: Bạn luôn có thể tìm kiếm các tiện ích mở rộng nếu tính năng bạn đang tìm kiếm không được VS Code hỗ trợ ngay từ đầu. Bạn có thể sử dụng các tiện ích mở rộng như vậy để có các tính năng bổ sung và nhận hỗ trợ cho nhiều thư viện và khung khác nhau.
• Tải lại nóng và máy chủ trực tiếp: Bạn có thể bật tính năng tự động lưu cho mã JavaScript của mình trên Mã VS. Tùy chọn máy chủ trực tiếp cũng cho phép bạn chạy mã JavaScript trên trình duyệt khi bạn viết mã. Tính năng tải lại nóng đảm bảo rằng trình chỉnh sửa mã tự động chọn tất cả các thay đổi và bạn không phải khởi động lại máy chủ trực tiếp.
• Hoàn thiện mã và IntelliSense: Đôi khi người chỉnh sửa mã chỉ cần bạn bắt đầu viết mã và sẽ đưa ra đề xuất thông qua tính năng tự động hoàn thành và đề xuất mã thông minh. Tính năng này sẽ giúp bạn tiết kiệm thời gian; bạn chỉ cần tập trung vào logic.
• Khả năng tương thích đa nền tảng: Bạn có thể cài đặt VS Code trên macOS, Linux và Windows. Trình chỉnh sửa mã này cũng hỗ trợ TypeScript, một siêu ký tự của JavaScript giới thiệu các loại.

Chạy JavaScript trong Mã VS

Việc thiết lập môi trường để chạy mã JavaScript thật dễ dàng, bất kể hệ điều hành của bạn là gì. Lý tưởng nhất là máy của bạn nên có ít nhất 4GB RAM cho những cài đặt này. Hãy làm theo các bước sau để bắt đầu.

Thiết lập Node.js

Node.js là một trong những môi trường thời gian chạy JavaScript phổ biến nhất. Với Node.js, bạn có thể chạy JavaScrpt bên ngoài môi trường trình duyệt. Node.js cũng cho phép sử dụng JavaScript trong phát triển phụ trợ với các framework như Express.js.

Bạn có thể tải xuống Node.js miễn phí nếu bạn chưa có nó trên máy của mình. Bạn cũng có thể kiểm tra xem nó đã được cài đặt trên máy của mình chưa bằng lệnh này:

node -v

Nếu nó được cài đặt, bạn sẽ thấy một cái gì đó như thế này trên thiết bị đầu cuối của mình:

Thiết lập mã Visual Studio để phát triển Javascript

Visual Studio Code có thể được mô tả như một trình soạn thảo mã và một IDE, tùy thuộc vào trường hợp sử dụng. Mã VS hỗ trợ JavaScript theo mặc định. Tuy nhiên, một số tính năng JavaScript sẽ cần tiện ích mở rộng để thực thi.

Mã VS được tải xuống miễn phí. Bạn có thể chọn liên quan phiên bản để tải về dựa trên hệ điều hành của bạn.

Tạo một dự án JavaScript

Bây giờ bạn đã có phần mềm cơ bản (môi trường thời gian chạy và trình soạn thảo mã) để tạo ứng dụng JavaScript. JavaScript được sử dụng để thêm tính tương tác cho các trang web và chủ yếu được sử dụng với HTML và CSS. Tuy nhiên, bạn cũng có thể sử dụng nó cho kịch bản và cấu trúc dữ liệu.

Bây giờ tôi có thể tạo một ứng dụng đơn giản và gọi nó là ứng dụng JavaScript-VsCode.

Bạn có thể sử dụng các lệnh sau:

mkdir JavaScript-VSCode-app

cd JavaScript-VSCode-app

touch app.js

code .

Viết mã JavaScript trong mã Visual Studio

Đối với phần trình diễn này, tôi sẽ chỉ viết mã JavaScript. Đây là giao diện dự án của chúng tôi trên trình soạn thảo mã.

Như bạn có thể thấy, chúng tôi chỉ có một tệp (app.js). Bây giờ tôi có thể viết một chương trình đơn giản để kiểm tra xem một số có phải là số chẵn hay không. Tôi sẽ viết mã của mình vào tệp app.js. Đây là mã của tôi:

function isEven(number) {
    return number % 2 === 0;
}
// Example usage:
let myNumber = 8;
if (isEven(myNumber)) {
    console.log(myNumber + " is even.");
} else {
    console.log(myNumber + " is odd.");
}

Chạy mã JavaScript trong Visual Studio Code

Bây giờ chúng tôi đã sẵn sàng chạy JavaScript trong Mã VS. Tuy nhiên, chúng ta cần hiểu mã này làm gì. Chúng tôi có một hàm được đặt tên là ‘isEven’. Hàm của chúng ta lấy một số và trả về ‘true’ nếu số đó chia hết cho hai. Tuy nhiên, nếu số không chia hết cho 2 thì sẽ trả về ‘false’.

Bây giờ chúng ta có thể chạy lệnh này:

node app.js

Bạn có thể chạy nó trên thư mục gốc hoặc thiết bị đầu cuối VS Code.

Sau khi chạy mã mà chúng tôi đã cung cấp ở bước trước, chúng tôi nhận được kết quả là ‘8 chẵn’.

Điều gì sẽ xảy ra nếu chúng ta kiểm tra xem 9 có phải là số chẵn không? Chúng ta có thể thay đổi mã của mình như sau:

function isEven(number) {
    return number % 2 === 0;
}

// Example usage:
let myNumber = 9;
if (isEven(myNumber)) {
    console.log(myNumber + " is even.");
} else {
    console.log(myNumber + " is odd.");
}

Đây là những gì chúng tôi nhận được sau khi chạy mã của mình:

Như bạn có thể thấy, ‘9 là số lẻ’ là kết quả đầu ra của chúng tôi.

Thêm các tiện ích mở rộng cần thiết

Chương trình chúng tôi đã tạo ở trên rất đơn giản. Tuy nhiên, bạn có thể muốn xây dựng một ứng dụng phức tạp mà bạn cần tìm lỗi mã hoặc thậm chí gỡ lỗi. Ở phía bên trái của Mã VS, nhấp vào nút cuối cùng thứ hai.

Bạn cũng có thể sử dụng phím tắt: CTRL+Shift+X.

Bây giờ bạn có thể tìm kiếm các tiện ích mở rộng khác nhau để sử dụng cho mã của mình. Ví dụ: tôi có thể tìm kiếm ESLint.

Bạn có thể thấy các tiện ích mở rộng đã được bật ở phía tôi. Luôn kiểm tra mô tả của các tiện ích mở rộng khác nhau để dễ dàng định cấu hình và sử dụng.

Sử dụng tiện ích mở rộng Code Runner

Visual Studio Code hỗ trợ hàng trăm ngôn ngữ lập trình. Bạn có thể dùng Người chạy mã để thực thi mã trong hầu hết các ngôn ngữ lập trình phổ biến. Xác định vị trí tab tiện ích mở rộng ở bên trái Mã VS của bạn và tìm kiếm Code Runner.

Nhấp vào cài đặt và kích hoạt tiện ích mở rộng và bây giờ bạn đã sẵn sàng chạy mã của mình. Tôi có một câu lệnh đơn giản là console.log(“Xin chào, Thế giới!”); trong tệp app.js của tôi. Tôi có thể chạy nó bằng Code Runner. Mình sẽ dùng phím tắt F1 và gõ RUN CODE.

Đây là những gì tôi nhận được trên thiết bị đầu cuối của mình:

[Running] node "/home/tk/JavaScript-VSCode-app/app.js"
Hello, World!
[Done] exited with code=0 in 2.106 seconds

Các phương pháp hay nhất để viết mã JavaScript hiệu quả

Thiết lập mà chúng tôi có cho đến nay là hoàn hảo cho các chương trình JavaScript đơn giản. Tuy nhiên, bạn phải ghi nhớ những phương pháp hay nhất này nếu muốn chạy JavaScript trên VS Code một cách suôn sẻ:

• Sử dụng trình nói dối mã: Khả năng đọc có thể trở thành vấn đề khi kích thước tệp JavaScript của bạn tăng lên. Bạn có thể sử dụng tiện ích mở rộng như ESLint đẹp hơn để đảm bảo bạn sớm phát hiện được lỗi trong mã của mình và tăng khả năng đọc mã của bạn.
• Giữ các ngôn ngữ khác nhau trong các tệp khác nhau: Một dự án giao diện người dùng thông thường có thể yêu cầu bạn viết mã HTML, CSS và JavaScript. Bạn có thể muốn viết tất cả mã trong một tài liệu. Tuy nhiên, hãy luôn đảm bảo bạn viết mã HTML, CSS và JavaScript trong các tệp khác nhau.
• Tận dụng các tiện ích mở rộng: Thị trường VS Code có hàng nghìn tiện ích mở rộng giúp bạn dễ dàng làm việc với nhiều thư viện khác nhau. Khám phá cái thương trường và chọn các tiện ích mở rộng có xếp hạng và tài liệu tốt nhất.

Thiết lập Git trong Visual Studio Code để tích hợp kiểm soát phiên bản

Cho đến nay chúng tôi đã đưa ra các bước để thiết lập VS Code và chạy JavaScript trên trình chỉnh sửa mã này. Tuy nhiên, bạn có thể cần sử dụng tính năng kiểm soát phiên bản như Git để theo dõi các thay đổi đối với mã của mình hoặc thậm chí đẩy chúng đến kho lưu trữ từ xa như GitHub. Đây là các bước để làm theo:

• Cài đặt Git: Git là phiên bản kiểm soát được sử dụng nhiều nhất trong quá trình phát triển. Tải xuống Git phiên bản phù hợp với hệ điều hành và thông số kỹ thuật của máy. Bạn có thể chạy lệnh này sau khi cài đặt để kiểm tra phiên bản Git của mình:

git -v

Nếu bạn đã cài đặt chính xác, bạn sẽ có một cái gì đó tương tự như thế này trên thiết bị đầu cuối của mình:

• Khởi tạo kho lưu trữ Git: Bạn có thể theo dõi tất cả các thay đổi của mình và cam kết (giai đoạn) chúng trên Git. Chạy lệnh này từ thư mục gốc của dự án của bạn:

git init

• Định cấu hình danh tính Git của bạn: Bạn phải cho Git biết bạn là ai bằng cách thiết lập tên người dùng và email của bạn. Chạy các lệnh này để bắt đầu:

git config –global user.name “Tên của bạn”

git config –global user.email “[email protected]”>[email protected]”

Thay thế ‘Tên của bạn’ và ‘[email protected]‘ với các chi tiết có liên quan.

• Giai đoạn và cam kết thay đổi: Bạn hiện đã định cấu hình Git và hiện có thể thực hiện và cam kết các thay đổi của mình. Chạy lệnh này để kiểm tra tất cả các tệp không bị theo dõi:

git status

Bây giờ bạn có thể xem tất cả các tệp không bị theo dõi và không được cam kết.

Chạy lệnh này để thực hiện các thay đổi:

git add .

Chạy lại trạng thái git và bạn sẽ thấy một cái gì đó tương tự như thế này:

Bây giờ bạn có thể cam kết các tập tin của bạn. Chạy lệnh này:

git commit -m “your commit message”

Thay thế “thông điệp cam kết của bạn” bằng nội dung nào đó mô tả hành động của bạn.

Bây giờ bạn có thể kết nối kiểm soát nguồn của mình với các nền tảng kho lưu trữ từ xa như GitHub.

Phần kết luận

Bây giờ chúng tôi hy vọng bạn hiểu cách tạo môi trường và chạy JavaScript trong VS Code. Bạn có thể cần thêm các tiện ích mở rộng để hoạt động với các thư viện và khung JavaScript trên trình chỉnh sửa mã này. Tuy nhiên, hãy luôn cập nhật Visual Studio Code nếu bạn muốn tận hưởng tất cả các tính năng mới nhất.

Hãy xem bài viết của chúng tôi về các tài nguyên tốt nhất để học JavaScript và trau dồi kiến ​​thức của bạn.