Cài javascript cho visual studio code

  • Giới thiệu về VSCode – Visual Studio Code
  • Cài đặt Extensions hỗ trợ phát triển dự án Javascript
    • Một số Extensions dành cho phát triển Web
    • Extensions dành cho phát triển Dev
  • Tạo projects VSCode
  • Live preview

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.


    
        Hello world!
        
This is an awesome site!

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é.

Hiện nay, với sự phát triển của công nghệ và kỹ thuật dẫn đến tiềm năng phát triển trong mảng lập trình rất cao. Trong những năm gần đây, Mảng lập trình Frontend đặt biệt là Frontend web vô cùng phát triển nhờ vào mức thu nhập của công việc mang lại, khiến cho người người, nhà nhà đổ xô đi học lập trình Frontend web tại các trung tâm.

Tuy nhiên, nhiều bạn mới học sẽ gặp khó khăn để có thể “hấp thu” được kiến thức JavaScript trong quá trình học dẫn đến dễ chán nản. Nhưng đừng lo, trong series về JavaScript này, tôi sẽ giúp bạn hiểu và nắm rõ về nó. Chúng ta bắt đầu thôi!

1. Giới thiệu về JavaScript.

Cài javascript cho visual studio code

Vậy chính xác JavaScript là gì?

JavaScript là một ngôn ngữ lập trình dành cho việc tạo và phát triển web. Nó được nhúng vào trong file HTML giúp cho website trở nên sống động và đẹp hơn. JavaScript có thể cập nhật và thay đổi cả HTMLCSS.

Một ứng dụng thực tế mà ta dễ thấy nhất của JavaScript đó là các animation, pop-up quảng cáo, autocomplete khi search,… tất cả đều một tay JavaScript thực hiện.

JavaScript còn là một ngôn ngữ lập trình đa nền tảng, ngoài dành cho việc lập trình frontend trên nền tảng web ra thì nó còn được sử dụng cho việc lập trình và phát triển ứng dụng trên nền tảng mobile.

Ngày nay, JavaScript có thể thực thi không chỉ trong trình duyệt mà còn trên server hoặc bất kỳ thiết bị nào có chương trình đặc biệt gọi là JavaScript engine.

Với những ưu điểm của mình mà JavaScript được các ông lớn như Google, Facebook,… hỗ trợ trong việc phát triển để cho ra đời các library hay framework JavaScript nổi tiếng hiện nay như:

  • AngularJS
  • ReactJS và React Native
  • VueJS
  • NuxtJS
  • NextJS
  • Jquery
  • NodeJS

Một số các trang web nổi tiếng được xây dựng từ các library và framework trên như:

  • ReactJS: Facebook, Instagram, Twitter, netflix, …
  • VueJS: Trang chủ của VueJS, Behance, Font Awesome, upwork, …
  • AngularJS:  JetBlue, samsung, freelancer, …

(Để biết được một trang web có được xây dựng bằng library hay framework kể trên bạn chỉ cần cài các extension hỗ trợ trên trình duyệt chrome để detect nhé, ví dụ: React và NextJS thì có React Developer Tools, VueJS và NuxtJS thì có Vue.js devtools, AngularJS có Angular Devtools).

ReactJS: Tìm hiểu thông qua ví dụ

ReactJS là gì? Trong bài viết này, chúng ta sẽ cùng nhau tìm hiểu về ReactJS thông qua một vài ví dụ đơn giản, giúp bạn dễ nắm bắt và hiểu hơn về cách hoạt động của ReactJS.

Cài javascript cho visual studio code
Nguyễn Hải Phúc Nguyên

Cài javascript cho visual studio code

2. Hướng dẫn setup môi trường JavaScript.

Giới thiệu như vậy là đủ rồi, chúng ta cùng bắt tay vào setup môi trường để có thể bắt đầu tìm hiểu sâu hơn về JavaScript nào.

Đầu tiên trong series này, tôi khuyến khích các bạn nên dùng trình duyệt chrome để chạy các demo code của mình. Bởi vì chrome có rất nhiều tiện ích mở rộng (extension), giúp các bạn rất nhiều trong việc code cũng như debug sau này. Nếu các bạn chưa cài thì có thể vào đây để tải và cài đặt nè.

Để viết code tôi dùng Visual studio code, đây là một trình soạn thảo code khá nổi tiếng đến từ ông lớn Microsoft được cộng đồng dev trên toàn thế giới dùng. Nó có một kho extension đồ sộ, support rất tốt cho quá trình code của chúng ta được nhanh và gọn hơn rất nhiều. Nếu các bạn chưa cài thì có thể vào đây để tải và cài đặt nhé.

Sau khi cài đặt xong ta có giao diện Visual studio code như hình:

Cài javascript cho visual studio code

Để run code, tôi dùng extension Live Server, extension này tạo một local host ngay dưới máy mình giúp run code một cách trực tiếp cho cả các trang web tĩnh hay web động, đồng thời khi ta thay đổi code thì nó cũng tự động reload trang của chúng ta trên trình duyệt mà không cần phải nhấn F5 như trước đây. Quá tiện lợi phải không nào?

Để cài đặt bạn làm theo như hình là được:

Cài javascript cho visual studio code

(Khi cài đặt Visual studio code thì nó không có background glass như hình đâu nhé, nếu bạn thích UI như của mình thì có thể tải extension Vibrancy nhé.)

Sau khi cài đặt xong hết rồi thì chúng ta cùng thử một ví dụ nhỏ nào.

Tạo một thư mục tên first-project và mở nó bằng Visual studio code

Cài javascript cho visual studio code

Tạo tiếp file index.html và thêm code HTML vào như hình:

Cài javascript cho visual studio code

Để thêm code HTML nhanh thì bạn hãy cài extension HTML CSS Support, sau đó gõ dấu ! sau đó nhấn tổ hợp phím ctrl + space → enter sẽ ra nhé.

Thêm đoạn code HTML như hình sau đó click vào chữ Go live như hình:

Cài javascript cho visual studio code

Nó sẽ tự mở trình duyệt mặc định của máy và hiển thị web, ta được output như hình:

Cài javascript cho visual studio code

Nhấn vào button Click me và ta được kết quả:

Cài javascript cho visual studio code

Thành công rồi đấy, đơn giản đúng không nào?

JavaScript ES2021: Những điều có thể bạn chưa biết?

JavaScript ES2021 hay ES12 cuối cùng cũng được ra mắt, theo đó là các thông số kỹ thuật mới cũng được trình làng. Vậy trong phiên bản lần này có những thay đổi gì mới? Có những tính năng mới đáng giá nào?

Cài javascript cho visual studio code
200Lab BlogNguyễn Hải Phúc Nguyên

Cài javascript cho visual studio code

3. Tổng kết

Qua bài viết này, hy vọng bạn sẽ hiểu hơn về JavaScript, những chuyện bên lề của nó cũng như setup môi trường cho việc học JavaScript. Bài viết tiếp theo mình sẽ hướng dẫn các bạn về các câu lệnh console và thực hiện trên công cụ devtool nhé.