Cài VSCode lập trình Javascript – IT DESIGN

Posted on by mtoplistChuyên mục:Top List

Giới thiệu về VSCode – Visual Studio Code

  • VSCode là một text editor khá mới (miễn phí), chạy được trên nhiều hệ điều hành. Và VSCode có thể compile, run, debug code, không thua gì cái IDE chuẩn khác.
  • Để cài đặt VSCode các bạn click vào link: Visual Studio Code

Cài đặt Extensions hỗ trợ phát triển dự án Javascript

Sau khi cài xong VSCode, bạn bấm vào mục Extensions trên thanh bên trái màn hình, bắt đầu gõ tìm extension:

Một số Extensions dành cho phát triển Web

  1. Live Sever: Dựng một server chạy local HTML/CSS/JS, tự động refresh trình duyệt mỗi khi bạn sửa code. Mấy bạn mới học front-end thì nên cài cái này, tiết kiệm thời gian nhấn F5.
  2. Auto Import: Hỗ trợ mình Import thư viện JavaScript, component từ các file khác.
  3. Auto Rename Tag + Auto Close Tag: Khi code HTML/JSX, mỗi khi tạo thêm tag mới, extension sẽ đóng tag để khỏi quên. Khi đổi tên tag, extension này sẽ đổi tên closing tag cho phù hợp luôn.
  4. npm Intellisense + Path Intellisense: Gợi ý tên npm package, tên file trong thư mục khi mình cần import, giúp giảm lỗi khi import.
  5. Bộ đôi ESLint + Prettier: ESLint sẽ giúp bạn code đúng chuẩn, đúng format, tìm những lỗi linh tinh khi code. Prettier sẽ hỗ trợ bạn format code, sửa theo đúng chuẩn từ ESLint.

Extensions dành cho phát triển Dev

  1. GitLens: Nó giúp bạn biết từng dòng code do ai viết, viết vào lúc 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.
  2. Bracket Pair Colorizer: Tô màu các dấu ()[]{}, biết cái nào đi cặp với cái nào, không lẫn lộn, thừa thiếu dấu ngoặc.
  3. Bookmark: Giúp bạn “bookmark” lại những dòng code thường dùng, cần đọc nhiều, sửa nhiều. Không còn phải search code mỗi lần cần tìm.
  4. Code Spell Checker: Lỗi chính tả, đặt tên hàm, tên biến, …. extension này sẽ highlight những đoạn sai.
  5. Setting Sync: Giúp bạn đồng bộ setting (cài đặt, extension) giữa nhiều máy với nhau. Chỉ cần setup VSCode 1 lần. Những lần sau, khi đổi máy mình chỉ cần chạy setting cũ đã được đồng bộ qua máy mới!

Tạo projects VSCode

Tạo thư mục tên là Demo. Sau đó, mở VSCode, File -> Open Folder, bạn trỏ tới folder Demo bạn đã tạo. Sau đó bạn gõ đoạn code sau và lưu lại thành file index.html lưu trong thư mục Demo.

<html>
    <body>
        Hello world!
        <br>
        This is an awesome site!
    </body>
</html>

Live preview

Để kiểm tra việc tự động tải mới trang web khi code thay đổi, bạn thử thay đổi nội dung của file index.html . Ngay khi bạn ấn Save, trang web sẽ tự động tải mới. Thay vì ấn phải Save thì VSCode có chức năng Auto Save. Bạn vào File -> Auto Save để bật lên nhé.

mtoplist