Thiết lập WebStorm cho JavaScript
|
WebStorm là một môi trường phát triển tích hợp để mã hóa bằng JavaScript và các công nghệ liên quan của nó, bao gồm TypeScript, React, Vue, Angular, Node. js, HTML và biểu định kiểu. Cũng giống như IntelliJ IDEA và các IDE JetBrains khác, WebStorm làm cho trải nghiệm phát triển của bạn trở nên thú vị hơn, tự động hóa công việc thường ngày và giúp bạn xử lý các tác vụ phức tạp một cách dễ dàng Show
Mở, kiểm tra hoặc tạo dự ánA project trong WebStorm là một thư mục chứa mã nguồn bạn chỉnh sửa, các thư viện và công cụ bạn sử dụng (ví dụ: trong < . json node_modules subfolder), and various app configuration files (for example, package.json hoặc . eslintrc ). Khi bạn đã mở một thư mục trong WebStorm, . idea thư mục con được thêm vào nơi WebStorm lưu trữ cài đặt cấu hình bên trong của nó, chẳng hạn như kiểu mã dự án hoặc hệ thống kiểm soát phiên bản. Bạn có thể mở, kiểm tra và tạo dự án từ màn hình Chào mừng của WebStorm  Để mở một dự án
Để kiểm tra một dự án từ hệ thống kiểm soát phiên bản
Để tạo một dự án WebStorm trống
Bạn cũng có thể tạo một dự án từ một mẫu, xem để biết chi tiết Để tạo một tệp mới trong một dự án
Xem Tạo tệp và thư mục để biết thêm chi tiết Làm quen với giao diện người dùng WebStormCửa sổ WebStorm bao gồm Trình chỉnh sửa nơi bạn đọc, tạo và sửa đổi mã, menu và thanh công cụ, a , a và một số cửa sổ công cụ WebStorm. Các cửa sổ phụ này được gắn ở dưới cùng và ở hai bên của không gian làm việc của bạn và cho phép bạn gỡ lỗi mã, chạy thử nghiệm, tương tác với hệ thống kiểm soát phiên bản của bạn, v.v. Tìm hiểu thêm từ Giao diện người dùng, Thông tin cơ bản về Trình chỉnh sửa và Cửa sổ công cụ Bạn có thể sắp xếp bố cục của WebStorm theo ý muốn. Ví dụ: nếu bạn muốn tập trung vào việc viết mã, hãy thử. Nó loại bỏ tất cả các thanh công cụ, cửa sổ công cụ và tab trình chỉnh sửa, do đó bạn có nhiều không gian trống hơn. Để chuyển sang chế độ này, hãy chọn Xem. Vẻ bề ngoài. Vào Chế độ không bị phân tâm từ menu chính. Một giải pháp thay thế cho Chế độ không bị phân tâm có thể ẩn tất cả các cửa sổ công cụ bằng cách nhấn Ctrl+Shift+F12. Bạn có thể khôi phục bố cục về mặc định bằng cách nhấn phím tắt này một lần nữa Khi các cửa sổ công cụ bị ẩn, bạn có thể truy cập bất kỳ cửa sổ nào thông qua phím tắt - tiêu điểm đầu vào di chuyển đến cửa sổ công cụ và bạn có thể sử dụng bất kỳ lệnh bàn phím nào trong ngữ cảnh của nó. Để quay lại trình chỉnh sửa, chỉ cần nhấn Escape. Khi một cửa sổ công cụ hiển thị, nhấn phím tắt của nó chỉ đưa tiêu điểm đến đó Dưới đây là danh sách các phím tắt gọi các cửa sổ công cụ mà bạn thường cần nhất Cửa sổ công cụ Đường tắt Dự án thay thế+1 Kiểm soát phiên bản Thay thế + 9 Chạy Alt+4 gỡ lỗi Thay thế+5 Phần cuối Alt+F12 biên tập viên Bỏ trốn Đây là một giải pháp thay thế nhỏ gọn cho cửa sổ công cụ Project. Để truy cập Thanh điều hướng, hãy nhấn Alt+Home Sử dụng các phím Phải, Phải, Lên và Xuống để di chuyển giữa các thư mục và xem nội dung của chúng Trong hầu hết các cửa sổ công cụ và cửa sổ bật lên, WebStorm hỗ trợ tìm kiếm tốc độ cho phép bạn lọc danh sách hoặc điều hướng đến một mục cụ thể bằng cách sử dụng truy vấn tìm kiếm Tìm đường đi quaWebStorm đi kèm với một tập hợp các tính năng tìm kiếm và điều hướng sẽ giúp bạn tìm đường đi qua bất kỳ đoạn mã nào cho dù nó rối rắm đến đâu. Xem chi tiết trong Điều hướng mã nguồn Tìm cách sử dụng các biểu tượng dự án của bạnĐể tìm nơi một biểu tượng cụ thể được sử dụng trong dự án của bạn, WebStorm đề xuất tìm kiếm toàn diện thông qua Tìm cách sử dụng Alt+F7. Tìm biểu tượng dự án của bạn theo tên của họBạn có thể điều hướng đến Lớp Ctrl+N, Tệp Ctrl+Shift+N, or a Symbol Ctrl+Alt+Shift+N by its name, see Searching Everywhere. Tìm kiếm các đoạn văn bản
Đi đến khai báo của một biểu tượng(Ctrl+B, Ctrl+Click đưa bạn đến vị trí nơi một biểu tượng cụ thể được khai báo lần đầu tiên. Loại điều hướng này hoạt động từ bất kỳ vị trí nào trong mã nguồn Điều hướng qua dòng thời gianWebStorm tự động theo dõi những thay đổi bạn thực hiện đối với mã nguồn, kết quả tái cấu trúc, v.v. trong Lịch sử cục bộ . Để xem nó cho một tệp hoặc thư mục, hãy chọn VCS. Lịch sử địa phương. Lịch sử hiển thị từ menu chính. Tại đây, bạn có thể xem lại các thay đổi, hoàn nguyên chúng hoặc tạo bản vá . Tìm hiểu thêm từ Lịch sử địa phương Hoàn thành mã của bạnWebStorm tự động hoàn thành các từ khóa, ký hiệu từ API ngôn ngữ tiêu chuẩn và từ các phần phụ thuộc của dự án. Nhấn Ctrl + Space để nhận các tùy chọn hoàn thành mã cho ngữ cảnh hiện tại, biểu tượng bên cạnh mỗi thành viên được đề xuất cho biết loại của nó Để hiển thị nhiều biến thể hơn, nhấn Ctrl+Space một lần nữa Theo mặc định, các đề xuất hoàn thành trong tệp JavaScript và TypeScript được sắp xếp theo mức độ liên quan dựa trên thuật toán máy học. Để tắt tính năng sắp xếp này, hãy mở hộp thoại Cài đặt (Ctrl+Alt+S), chuyển đến Trình chỉnh sửa. Tổng quan. Hoàn thành mã và xóa hộp kiểm Sắp xếp các đề xuất hoàn thành dựa trên học máy . Tìm hiểu thêm từ. Tìm hiểu thêm từ Hoàn thành mã Kiểm tra và sửa mã của bạn một cách nhanh chóngWebStorm giám sát mã của bạn và cố gắng giữ cho mã chính xác và sạch sẽ. Nó phát hiện các lỗi và sự cố tiềm ẩn và đề xuất cách khắc phục nhanh chóng cho chúng. Mỗi khi WebStorm tìm thấy mã không sử dụng, vòng lặp vô tận, thiếu câu lệnh nhập cho biểu tượng và nhiều thứ khác có thể cần sự chú ý của bạn, bạn sẽ thấy một điểm nổi bật và một bóng đèn. Nhấp vào bóng đèn này hoặc nhấn Alt+Enter để áp dụng bản sửa lỗi Bạn quên một câu lệnh Hoặc, nhấn Alt+Enter và nhấp vào Chèn 'nhập "Khách hàng"' . Đối với các ký hiệu ES6 và TypeScript, WebStorm có thể thêm các câu lệnh nhập bị thiếu khi hoàn thành mã Để xem danh sách đầy đủ các kiểm tra có sẵn, trong Cài đặt dialog Ctrl+Alt+S, click Inspections under Editor. You can disable some of them, or enable others, plus you can adjust the severity of each inspection. You decide whether it should be considered an error or just a warning. Tìm hiểu thêm từ Kiểm tra mã và Nhận kết quả cũng như khắc phục sự cố Tái cấu trúc mã của bạnTái cấu trúc có nghĩa là cập nhật mã nguồn mà không thay đổi hành vi của ứng dụng. Tái cấu trúc giúp bạn giữ cho mã của mình chắc chắn, khô ráo và dễ bảo trì. WebStorm đảm bảo rằng sau khi tái cấu trúc, mã sẽ hoạt động giống như trước đó, bởi vì các thay đổi được thực hiện một cách thông minh cho toàn bộ dự án. Ví dụ: nếu bạn đổi tên một lớp, WebStorm sẽ tự động đổi tên tất cả các tập quán và câu lệnh nhập của nó Xem Tái cấu trúc mã, Tái cấu trúc JavaScript và Tái cấu trúc TypeScript để biết thêm thông tin
Chạy và gỡ lỗi ứng dụng của bạnTrong WebStorm, điểm khởi đầu để chạy hoặc gỡ lỗi ứng dụng là cấu hình chạy/gỡ lỗi. WebStorm đi kèm với một số mẫu cấu hình chạy/gỡ lỗi được xác định trước cho các loại ứng dụng và tệp khác nhau. Thông tin bạn cần cung cấp trong một cấu hình phụ thuộc vào loại của nó, nó có thể là tệp để chạy hoặc kiểm tra. Một số cấu hình có thể đính kèm vào các ứng dụng đang chạy, trong trường hợp này, bạn cần chỉ định URL và cổng để đính kèm Để chạy ứng dụng của bạn
Xem Chạy ứng dụng, và để biết thêm thông tin Để bắt đầu gỡ lỗiVới WebStorm, bạn có thể gỡ lỗi nhiều loại ứng dụng - ứng dụng phía máy khách, Node. ứng dụng js, kiểm tra, v.v. Đây là cách bạn có thể gỡ lỗi JavaScript phía máy khách đang chạy trên máy chủ web phát triển bên ngoài, chẳng hạn như được cung cấp bởi Node. js
WebStorm có một máy chủ web tích hợp có thể được sử dụng để xem trước và gỡ lỗi ứng dụng của bạn. Máy chủ này luôn chạy và không yêu cầu bất kỳ cấu hình thủ công nào. Tất cả các tệp dự án được cung cấp trên máy chủ tích hợp với URL gốc http. //máy chủ cục bộ. , liên quan đến cấu trúc dự án. Xem để biết chi tiết. Tìm hiểu thêm từ Gỡ lỗi JavaScript trong Chrome và từ blog WebStorm. Ví dụ, xem Gỡ lỗi ứng dụng React và Gỡ lỗi ứng dụng góc để biết ví dụ Thực hiện theo các tiêu chuẩn phong cách mã của bạnWebStorm tự động định dạng tất cả mã mới theo cài đặt kiểu mã dành riêng cho từng ngôn ngữ. Các cài đặt này cũng được áp dụng trong quá trình tái cấu trúc Bạn có thể tự định cấu hình kiểu mã hoặc áp dụng quy tắc kiểu mã từ tệp cấu hình TSLint hoặc ESLint. Tìm hiểu thêm từ và Để định dạng lại mã của bạn theo cài đặt kiểu mã dự án, hãy chọn một đoạn mã hoặc toàn bộ tệp và nhấn Ctrl+Alt+L Giữ mã nguồn của bạn dưới Kiểm soát phiên bảnNếu bạn đang kiểm soát phiên bản mã nguồn của mình, bạn sẽ rất vui khi biết rằng WebStorm tích hợp với nhiều hệ thống kiểm soát phiên bản phổ biến, như Git (hoặc GitHub), Mercurial, Perforce, Subversion và CVS. Trong hầu hết các trường hợp, WebStorm tự động phát hiện VCS của bạn. Để chỉ định thông tin đăng nhập của bạn và bất kỳ cài đặt nào, hãy truy cập trang Kiểm soát phiên bản của Cài đặt dialog Ctrl+Alt+S. Trình đơn VCS sẽ cung cấp cho bạn manh mối về những lệnh có sẵn. Trong cửa sổ công cụ Cam kết Alt+0, bạn có thể xem và theo dõi những thay đổi mà bạn và đồng đội của bạn thực hiện, tạo danh sách thay đổi, cam kết và đẩy các thay đổi của bạn và . Các thao tác được sử dụng nhiều nhất, như Cam kết, Đẩy, Xem Lịch sử cũng có sẵn trong cửa sổ bật lên Hoạt động VCS Alt+`. Xem Kiểm soát phiên bản để biết thêm thông tin Tùy chỉnh môi trường của bạnVui lòng chỉnh sửa WebStorm để nó phù hợp với nhu cầu của bạn một cách hoàn hảo và hữu ích và thoải mái nhất có thể Làm cách nào để thiết lập JavaScript trong WebStorm?Mở tệp trong trình chỉnh sửa và chọn Sử dụng thư viện JavaScript từ menu ngữ cảnh . WebStorm hiển thị một danh sách với các thư viện được cấu hình có sẵn. Các thư viện được liên kết với tệp hiện tại được đánh dấu bằng hộp kiểm. Để xóa tệp hiện tại khỏi phạm vi của thư viện, hãy xóa hộp kiểm bên cạnh thư viện này.
Làm cách nào để thiết lập nút js trong WebStorm?Cấu hình nút. . Trong hộp thoại Cài đặt ( Ctrl+Alt+S ), chuyển đến Ngôn ngữ & Khung. Nút. js Trong trường Trình thông dịch Nút, chỉ định Nút mặc định. js cho dự án hiện tại. . Chọn Hỗ trợ viết mã cho Nút. js để định cấu hình Nút. . Nếu bạn cần hoàn thành mã cho Node Làm cách nào để thiết lập JavaScript?Cài đặt gói Máy khách JavaScript trong thư mục đó. . Mở một thiết bị đầu cuối và đi đến thư mục đó. $ cd ĐƯỜNG/TỚI/nuxeo_tutorial Khởi tạo mô-đun Node và làm theo các bước được hiển thị để tạo gói mô-đun. tập tin json. $ npm init Sử dụng npm để cài đặt gói Nuxeo JavaScript Client. $ npm cài đặt nuxeo@2. x --save WebStorm có tốt hơn Vscode không?WebStorm thường hiệu quả hơn trong việc tái cấu trúc và kiểm tra JavaScript và mã dựa trên JavaScript (chẳng hạn như TypeScript). Tái cấu trúc tối ưu hóa mã để đạt hiệu quả, trong khi thử nghiệm đơn vị đảm bảo chất lượng sản phẩm. VS Code vẫn cung cấp các tính năng này — nhưng chúng không phù hợp với JavaScript. |
