Làm việc với WebStorm

6.1 Khám phá cấu trúc IDE

Hãy cùng tìm hiểu những gì bạn thấy ở đây.

1. Cây thư mục và tệp của dự án của bạn:

Ở đây hiển thị nội dung thư mục của dự án chúng ta — web-storm-10.

Mình đã tạo một tệp để bạn dễ hiểu hơn việc tổ chức ở đây như thế nào. Trong bài giảng tiếp theo, bạn cũng sẽ thực hiện tất cả những điều này.

2. Tệp hiện tại đang mở:

Đây chỉ đơn giản là nội dung của tệp index.html, cú pháp mã được làm nổi bật.

3. Ở phía trên bạn thấy menu chính:

Các nút hữu ích ở trên cùng bên phải:

• «Hình tam giác xanh» — nút chạy dự án
• «Con bọ» — nút khởi động chế độ gỡ lỗi
• «Kính lúp» — tìm kiếm trong dự án
• «Bánh răng» — cài đặt

4. Ở bên trái bạn thấy menu bên:

Có một vài nút hữu ích ở đây. Đặc biệt, chúng ta sẽ quan tâm đến nút Terminal.

5. Thanh trạng thái:

Ở bên trái của thanh trạng thái hiển thị đường dẫn của tệp hiện tại đang mở. Bên phải là mã hóa của nó: CRLF, UTF-8. Sớm thôi bạn sẽ hiểu rõ về tất cả những điều này.

6.2 Khám phá dự án

1. Các tệp HTML.

Những tệp như vậy có phần mở rộng .html, và WebStorm đánh dấu chúng bằng biểu tượng màu xanh lá cây gồm hai mũi tên. Ở đây chỉ có một tệp như vậy — index.html

Những tệp như vậy có phần mở rộng .js, và WebStorm đánh dấu chúng bằng biểu tượng màu vàng. Hiện tại, trên ảnh chụp màn hình này không có tệp nào như vậy.

2. Các tệp CSS với kiểu dáng.

Những tệp như vậy có phần mở rộng .css, và WebStorm đánh dấu chúng bằng biểu tượng màu xanh dương. Hiện tại, trên ảnh chụp màn hình này không có tệp nào như vậy.

3. Các tệp media tĩnh. Đây là những tệp chứa dữ liệu, nhưng không phải mã. Chúng có thể là tệp văn bản, ảnh, tệp media v.v. Hiện tại trong dự án của chúng ta không có tệp nào như vậy.

4. Thư viện bên ngoài (External libraries). Hiện tại trong dự án của chúng ta không có, nhưng khi bạn tải xuống, WebStorm chắc chắn sẽ hiển thị chúng ở đây.

6.3 Làm việc với terminal

Trong WebStorm, bạn có thể làm việc với command line của hệ điều hành trực tiếp. Trong Linux và MacOS, command line thường được gọi là Terminal, vì vậy trong WebStorm cũng được gọi như vậy. Tuy nhiên, thực tế đây không phải là một sự sang chảnh của WebStorm, mà là tên được sử dụng phổ biến trong giới lập trình viên.

Để mở Terminal, bạn cần nhấn vào nút terminal trong menu bên:

Cửa sổ như vậy nên xuất hiện:

Trong cửa sổ này, bạn có thể viết các lệnh của hệ điều hành của bạn. Điều quan trọng với chúng ta là một trong chúng.

Chúng ta hãy tìm hiểu phiên bản Windows hiện tại. Để làm điều này, cần viết:

    
      ver
    
  

Đây là những gì mình đã nhận được:

Nếu bạn gặp lỗi, hãy viết lệnh "cmd" trước, sau đó là lệnh "ver".

6.4 CodeGym plugin là gì và tại sao cần thiết?

Đây là một ứng dụng, một module phần mềm đặc biệt, được tích hợp vào môi trường phát triển Intellij IDEA hoặc WebStorm và cho phép bạn làm việc trong đó với các nhiệm vụ của khóa học CodeGym. Ví dụ, viết code giải quyết, gửi nó để kiểm tra, so sánh giải pháp của bạn với "default" và nhiều thứ khác. Tiến trình giải quyết nhiệm vụ trong plugin được đồng bộ với tài khoản của bạn trên CodeGym, vì vậy nó sẽ trông giống nhau trên trang web và trong môi trường phát triển.

Bạn có thể tải CodeGym plugin từ marketplace của Jetbrains, ngay trong môi trường phát triển của bạn. Tiếp theo, chúng ta sẽ minh họa các bước với ví dụ WebStorm, nhưng các bước tương tự cũng áp dụng cho Intellij IDEA.

1. Truy cập vào phần "Cài đặt", Windows/Linux File - Settings, MacOS WebStorm - Preferences. Nếu không có phần cài đặt, mở bất kỳ dự án nào hoặc tạo một cái mới.

2. Ở cửa sổ hiện ra, trong menu bên chọn phần Plugins và mở tab Marketplace. Trong ô tìm kiếm, nhập codegym

3. Chọn plugin và nhấn vào nút Install.
4. Khởi động lại (Restart IDE) WebStorm để bắt đầu làm việc với plugin.
5. Bạn sẽ thấy giao diện hơi thay đổi và một nút Đăng nhập tài khoản trên thanh ngang phía trên.

Khi nhấn vào, một cửa sổ sẽ mở ra để bạn đăng nhập vào tài khoản của mình, trong đó cần nhập khóa bí mật của bạn:

Nhớ rằng bạn có thể tìm khóa bí mật trong phần “Cài đặt” → “Bảo mật và đăng nhập”.

Sau khi đăng nhập, quá trình tải dự án và Codegym SDK sẽ bắt đầu (không cần thay đổi sang phiên bản khác).

6. Để mở một nhiệm vụ mới, nhấn vào Tasks trong bảng điều khiển dọc bên trái, sau đó chọn thẻ nhiệm vụ trong bảng điều khiển bên trái, và trong cửa sổ pop-up nhấn Mở:

7. Một cửa sổ mở ra với hai tab. Một tab với điều kiện, tab còn lại để nhập mã.
8. Bây giờ hãy viết lời giải nhiệm vụ và nhấn nút Kiểm tra

Cài đặt plugin thủ công

1. Tải plugin
2. Truy cập vào phần "Cài đặt", Windows/Linux File - Settings, MacOS WebStorm - Preferences.
3. Ở cửa sổ hiện ra, trong menu bên chọn phần Plugins và nhấn vào biểu tượng bánh răng (⚙️) và chọn «Install Plugins from disk»
4. Mở thư mục chứa plugin. Chọn nó (tệp nén) và nhấn OK (Restart IDE).

Plugin đã được cài đặt! Bây giờ có thể giải quyết nhiệm vụ.

Đồng bộ hóa nhiệm vụ giữa website và plugin

Danh sách nhiệm vụ và trạng thái của chúng được cập nhật tự động mỗi năm phút hoặc sau khi gửi bất kỳ nhiệm vụ nào để kiểm tra (máy chủ codegym).

Vì vậy, nếu bạn đã giải quyết nhiệm vụ trên website, trong plugin nó cũng sẽ nằm trong danh sách nhiệm vụ đã giải quyết. Nếu cần cập nhật thông tin về trạng thái nhiệm vụ ngay bây giờ, hãy nhấn vào avatar của bạn (phía trên bên phải), và trong menu sổ ra chọn mục Đồng bộ hóa nhiệm vụ:

Chế độ người mới trong plugin

Đây là phiên bản đơn giản hóa cho những người dùng không có (hoặc ít) kinh nghiệm làm việc với WebStorm và các môi trường phát triển khác. Trong đó một số chức năng của WebStorm bị ẩn. Để tắt chế độ này, hãy nhấn vào avatar của bạn (phía trên bên phải), và trong menu sổ ra chọn mục Cài đặt:

Cách ẩn thanh điều hướng plugin trong chế độ PRO

Nhấn vào mục Cài đặt (⚙️) và bỏ dấu tích khỏi mục "Hiển thị thanh điều hướng plugin":