Hỗ trợ mã hóa nhận biết JavaScript bao gồm hoàn thành từ khóa, nhãn, biến, tham số và chức năng, định dạng, kiểm tra mã và sửa lỗi nhanh, cũng như tái cấu trúc phổ biến và dành riêng cho JavaScript. PyCharm cũng tích hợp với JavaScript linters và Flow type checker
Với trình gỡ lỗi tích hợp, bạn có thể gỡ lỗi cả mã phía máy khách và phía máy chủ, thậm chí chạy các đoạn mã JavaScript trong bảng điều khiển trình gỡ lỗi tương tác. Lưu ý rằng PyCharm chỉ hỗ trợ gỡ lỗi JavaScript trong Chrome hoặc bất kỳ trình duyệt nào khác của Chrome family. Learn more from Debug JavaScript in Chrome.
PyCharm tích hợp với các khung thử nghiệm Jest, Karma, Protractor, Cucumber và Mocha. PyCharm hỗ trợ chạy và gỡ lỗi các bài kiểm tra cũng như điều hướng giữa các bài kiểm tra và chủ đề hoặc giữa một bài kiểm tra không thành công và đoạn mã gây ra sự cố
Trên trang này, bạn sẽ tìm thấy một Hướng dẫn bắt đầu ngắn sẽ hướng dẫn bạn từng bước từ việc tạo ứng dụng web đến gỡ lỗi và kiểm tra ứng dụng đó
Trước khi bạn bắt đầu
Đảm bảo plugin JavaScript và TypeScript được bật trong phần cài đặt. Nhấn Ctrl+Alt+S để mở cài đặt IDE và chọn Plugin . Nhấp vào tab Đã cài đặt . Trong trường tìm kiếm, nhập JavaScript và TypeScript . Để biết thêm chi tiết về plugin, hãy xem Quản lý plugin.
Tạo một ứng dụng mới
Nhấp vào Tạo dự án mới trên màn hình Chào mừng hoặc . Mới. Dự án File | New | Project từ menu chính. Hộp thoại Dự án mới mở ra.
Trong ngăn bên trái, chọn bất kỳ loại dự án nào nhằm mục đích phát triển ứng dụng JavaScript, ví dụ: Angular CLI, AngularJS, Ứng dụng React hoặc React Native
Trong ngăn bên phải, chỉ định đường dẫn đến thư mục nơi các tệp liên quan đến dự án sẽ được lưu trữ
Mở rộng Cài đặt khác và chỉ định các tùy chọn dự án bắt buộc khác.
Bắt đầu với một ứng dụng JavaScript hiện có
Nếu bạn định tiếp tục phát triển một ứng dụng JavaScript hiện có, hãy mở nó trong PyCharm, và định cấu hình các thư viện trong đó. tùy chọn
Mở các nguồn ứng dụng đã có trên máy của bạn
Nhấp vào Mở trên màn hình Chào mừng hoặc chọn < . Mở File | Open từ menu chính. Trong hộp thoại mở ra, hãy chọn thư mục lưu trữ nguồn của bạn.
Kiểm tra các nguồn ứng dụng từ kiểm soát phiên bản của bạn
Nhấp vào Nhận từ VCS trên màn hình Chào mừng .
Hoặc chọn Tệp. Mới. Dự án từ Kiểm soát phiên bản hoặc Git. Sao chép… từ menu chính.
Thay vì Git trong menu chính, bạn có thể thấy bất kỳ Hệ thống kiểm soát phiên bản nào khác được liên kết với dự án của bạn. Ví dụ: Mercurial hoặc Perforce .
Trong hộp thoại mở ra, hãy chọn hệ thống kiểm soát phiên bản của bạn từ danh sách và chỉ định kho lưu trữ để kiểm tra các nguồn ứng dụng từ. Xem để biết chi tiết
an ninh dự án
Khi bạn mở một dự án được tạo bên ngoài PyCharm và được nhập vào đó, PyCharm sẽ hiển thị một hộp thoại trong đó bạn có thể quyết định cách xử lý dự án này bằng mã nguồn lạ
Chọn một trong các tùy chọn sau
Xem trước ở Chế độ an toàn . trong trường hợp này là PyCharm, mở dự án ở chế độ xem trước. Điều đó có nghĩa là bạn có thể duyệt các nguồn của dự án nhưng bạn không thể chạy các tác vụ và tập lệnh hoặc chạy/gỡ lỗi dự án của mình.
PyCharm hiển thị thông báo ở đầu khu vực trình chỉnh sửa và bạn có thể nhấp vào liên kết Tin cậy dự án… và tải dự án của mình bất kỳ lúc nào.
Dự án tin cậy . trong trường hợp này, PyCharm mở và tải một dự án. Điều đó có nghĩa là dự án được khởi tạo, các plugin của dự án được giải quyết, các phần phụ thuộc được thêm vào và tất cả các tính năng của PyCharm đều khả dụng.
Không mở . trong trường hợp này PyCharm không mở dự án.
Tìm hiểu thêm từ Bảo mật dự án
Dự án được tạo từ màn hình Chào mừng hoặc qua Tệp. Mới. Dự án như được mô tả trong sẽ tự động được coi là đáng tin cậy.
Chọn phiên bản ngôn ngữ JavaScript
Để nhận được hỗ trợ viết mã hiệu quả và đáng tin cậy, bạn cần chỉ định phiên bản ngôn ngữ sẽ được sử dụng trong tất cả các tệp JavaScript của dự án của bạn theo mặc định
Trong hộp thoại Cài đặt/Tùy chọn [Ctrl+Alt+S], đi tới Ngôn ngữ & . JavaScript . Trang JavaScript mở ra.
Từ danh sách, chọn một trong các phiên bản ngôn ngữ JavaScript được hỗ trợ
ECMAScript 5. 1
ECMAScript 6+. Phiên bản này bổ sung hỗ trợ cho các tính năng được giới thiệu trong ECMAScript 2015-2020 và cho cú pháp JSX cũng như một số đề xuất hiện tại cho tiêu chuẩn
lưu lượng. Phiên bản này bổ sung hỗ trợ cho cú pháp Flow
Sử dụng nhiều phiên bản JavaScript
Nếu bạn đang làm việc trên một ứng dụng sử dụng cả ECMAScript 5. 1 và phiên bản mới hơn của ECMAScript, cách dễ nhất là chọn phiên bản ngôn ngữ cao nhất cho toàn bộ dự án từ danh sách trên trang JavaScript
Trên trang JavaScript, nhấp vào bên cạnh danh sách Phiên bản ngôn ngữ JavaScript . Hộp thoại Phiên bản ngôn ngữ JavaScript mở ra.
Nhấp vào và trong hộp thoại mở ra, hãy chọn thư mục mà bạn cần phiên bản ngôn ngữ tùy chỉnh. PyCharm đưa bạn trở lại hộp thoại Phiên bản ngôn ngữ JavaScript nơi thư mục đã chọn được hiển thị trong Đường dẫn field.
Từ danh sách Ngôn ngữ , chọn phiên bản ngôn ngữ cho các tệp trong thư mục đã chọn. Trong tất cả các tệp JavaScript khác trong dự án, PyCharm sẽ sử dụng phiên bản đã chọn trên trang JavaScript.
Cú pháp JSX trong mã JavaScript
Nếu bạn đang sử dụng cú pháp JSX trong mã JavaScript của mình, hãy bật ECMAScript 6+ .
Trong hộp thoại Cài đặt/Tùy chọn [Ctrl+Alt+S], đi tới Ngôn ngữ & . JavaScript và chọn ECMAScript 6+ từ phiên bản ngôn ngữ JavaScript . . . . . . . . list.
Để được cảnh báo khi sử dụng nhầm cú pháp JSX, hãy mở hộp thoại Cài đặt/Tùy chọn [Ctrl+Alt+S], chuyển đến . Kiểm tra Editor | Inspections và bật kiểm tra cú pháp React JSX trong JavaScript và TypeScript. Nút chung . Sử dụng trường tìm kiếm để xác định vị trí kiểm tra.
Tùy chọn, định cấu hình mức độ nghiêm trọng và phạm vi kiểm tra. Tìm hiểu thêm từ Kiểm tra mã
Tải xuống phụ thuộc dự án
Nếu ứng dụng của bạn sử dụng một số công cụ, thư viện hoặc khung, hãy tải xuống các gói cần thiết. Để quản lý các phần phụ thuộc của dự án, bạn có thể sử dụng npm, Sợi 1 hoặc Sợi 2, xem npm và Sợi để biết chi tiết
Cài đặt một gói trong một dự án trống
Trong Terminal được nhúng [Alt+F12] , hãy nhập.
npm install
Nếu bạn đã có một gói. json trong dự án của bạn
Nhấp chuột phải vào gói . json trong trình chỉnh sửa hoặc trong cửa sổ công cụ Project và chọn Run . from the context menu.
Hoặc, chạy
npm installtrong Terminal Alt+F12.
Trước khi bạn bắt đầu, hãy chắc chắn rằng bạn có Node. js trên máy tính của bạn
Định cấu hình hoàn thành mã cho các phụ thuộc dự án
Để cung cấp khả năng hoàn thành mã cho các phần phụ thuộc của dự án, PyCharm tự động tạo thư viện node_modules . Trong ngữ cảnh của ngôn ngữ và IDE, thư viện là một tệp hoặc một tập hợp các tệp. Các hàm và phương thức của các tệp này được thêm vào kiến thức nội bộ của PyCharm bên cạnh các hàm và phương thức mà PyCharm lấy từ mã dự án mà bạn chỉnh sửa. Xem Định cấu hình thư viện JavaScript và Hoàn thành mã để biết chi tiết và ví dụ.
Xem gợi ý inlay
Gợi ý inlay xuất hiện trong trình chỉnh sửa và cung cấp cho bạn thông tin bổ sung về mã của bạn để dễ đọc hơn
gợi ý thông số
Gợi ý tham số hiển thị tên của tham số trong phương thức và hàm để làm cho mã của bạn dễ đọc hơn. Theo mặc định, gợi ý tham số chỉ được hiển thị cho các giá trị là biểu thức hàm hoặc ký tự nhưng không hiển thị cho các đối tượng được đặt tên.
Định cấu hình gợi ý tham số
Mở hộp thoại Cài đặt/Tùy chọn [Ctrl+Alt+S] và chuyển đến Trình chỉnh sửa. Gợi ý khảm .
Mở rộng JavaScript trong Tên tham số .
Chỉ định ngữ cảnh mà bạn muốn hiển thị các gợi ý tham số bằng cách chọn các hộp kiểm tương ứng
Bản xem trước cho biết những thay đổi bạn thực hiện trong cài đặt ảnh hưởng đến giao diện mã như thế nào
Đối với một số phương thức và chức năng, PyCharm không hiển thị gợi ý tham số trong bất kỳ ngữ cảnh nào. Nhấp vào Loại trừ danh sách. để xem các phương thức và hàm này, có thể bật gợi ý tham số cho chúng hoặc thêm mục mới vào danh sách.
Để ẩn gợi ý tham số cho bất kỳ loại giá trị nào trong bất kỳ ngữ cảnh nào, hãy xóa hộp kiểm JavaScript bên dưới Tham số . .
Gợi ý loại trả lại
Gợi ý về loại hàm trả về được suy ra từ nhận xét JSDoc hoặc dựa trên phân tích tĩnh mã của bạn. Theo mặc định, gợi ý kiểu trả về được hiển thị cho các phương thức chuỗi được phân chia giữa nhiều dòng và trả về ít nhất 2 kiểu khác nhau.
Định cấu hình gợi ý kiểu trả về của phương thức
Mở hộp thoại Cài đặt/Tùy chọn [Ctrl+Alt+S] đi tới Trình chỉnh sửa. Gợi ý khảm .
Mở rộng nút Loại rồi đến JavaScript .
Đảm bảo hộp kiểm Các loại trả về của hàm trong chuỗi lệnh gọi được chọn, sau đó chỉ định số lượng tối thiểu các loại khác nhau trong chuỗi lệnh gọi cho .
Để hiển thị các kiểu trả về của hàm trong lệnh gọi hàm, hãy mở rộng nút Nhập chú thích và chọn Hàm . checkbox.
Bản xem trước cho biết những thay đổi bạn thực hiện trong cài đặt ảnh hưởng đến giao diện mã như thế nào
Nhập gợi ý
Gợi ý nhập hiển thị các loại biến, trường hoặc tham số. Các loại biến và trường được hiển thị theo định nghĩa của chúng. Nhập gợi ý cho các tham số được hiển thị trong các lệnh gọi hàm. Gợi ý nhập được suy ra từ nhận xét JSDoc hoặc phân tích tĩnh mã của bạn.
Định cấu hình chú thích loại
Mở hộp thoại Cài đặt/Tùy chọn [Ctrl+Alt+S] và chuyển đến Trình chỉnh sửa. Gợi ý khảm .
Trong cây danh mục, hãy mở rộng Các loại. JavaScript .
Mở rộng nút Nhập chú thích và chỉ định ngữ cảnh nơi bạn muốn hiển thị gợi ý nhập.
Bản xem trước cho biết những thay đổi bạn thực hiện trong cài đặt ảnh hưởng đến giao diện mã như thế nào
Để ẩn loại tham số tham số và gợi ý kiểu trả về cho bất kỳ loại giá trị nào trong bất kỳ ngữ cảnh nào, hãy bỏ chọn hộp kiểm JavaScript bên dưới Types.
Tự động nhập trong JavaScript
PyCharm có thể tạo các câu lệnh nhập cho các mô-đun, lớp, thành phần và bất kỳ biểu tượng nào khác được xuất. PyCharm có thể thêm các câu lệnh nhập bị thiếu một cách nhanh chóng khi bạn hoàn thành các ký hiệu ES6 hoặc mô-đun CommonJS. PyCharm tự quyết định kiểu của câu lệnh nhập hoặc hiển thị cửa sổ bật lên nơi bạn có thể chọn kiểu bạn cần
Thêm câu lệnh nhập ES6
Nếu bạn đang nhập một biểu tượng từ dự án của mình vào một tệp là mô-đun ES6 hoặc đã chứa các câu lệnh nhập ES, thì PyCharm sẽ tự động chèn một lần nhập ES6 khi hoàn thành biểu tượng
Đối với các phiên bản JavaScript cũ hơn hoặc khi tính năng tự động nhập khi hoàn thành bị tắt, PyCharm đánh dấu biểu tượng là chưa được giải quyết và hiển thị chú giải công cụ với cách khắc phục nhanh được đề xuất
Ngoài ra, nhấn Alt+Enter
Nếu có thể có nhiều nguồn nhập, PyCharm sẽ hiển thị danh sách các đề xuất
Tìm hiểu thêm từ
PyCharm cũng có thể tạo các câu lệnh nhập cho các ký hiệu được xác định trong phần phụ thuộc của dự án. Tự động nhập hoạt động cho các ký hiệu từ các gói chứa tệp định nghĩa TypeScript [như trong thời điểm hoặc redux] hoặc các nguồn được viết dưới dạng mô-đun ES
Nếu tệp hiện tại đã chứa câu lệnh nhập ES6, PyCharm cũng chèn một câu lệnh mới theo kiểu ES6
Thêm câu lệnh nhập CommonJS [bắt buộc]
Nếu bạn đang nhập một biểu tượng từ dự án của mình vào một tệp đã là mô-đun CommonJS [với câu lệnh require hoặc module.export], PyCharm sẽ tự động chèn một nhập CommonJS khi hoàn thành biểu tượng
Ngoài ra, đặt dấu mũ tại ký hiệu để nhập, nhấn Alt+Enter và chọn cách sửa lỗi nhanh với kiểu nhập CommonJS [require]
Bất cứ khi nào PyCharm không thể tự động xác định cú pháp nào sẽ được sử dụng trong một tệp, nó sẽ hiển thị một cửa sổ bật lên nơi bạn có thể chọn giữa việc sử dụng cú pháp ES6 và CommonJS
Định cấu hình nhập tự động
Để tự động thêm câu lệnh nhập ES6 khi hoàn thành mã, hãy mở hộp thoại Cài đặt/Tùy chọn [Ctrl+Alt+S], chuyển đến < . Chung. Tự động nhập Editor | General | Auto Import và chọn hộp kiểm Thêm nhập ES6 khi hoàn thành mã trong TypeScript / JavaScript area.
Để định cấu hình giao diện của câu lệnh
import, hãy mở hộp thoại Cài đặt/Tùy chọn [Ctrl+Alt+S], chuyển đến Editor | Code Style | JavaScript và sử dụng các điều khiển trong tab Nhập , hãy xem để biết chi tiết.
Định cấu hình tô sáng cú pháp
Bạn có thể định cấu hình tô sáng cú pháp nhận biết JavaScript theo sở thích và thói quen của mình
Trong hộp thoại Cài đặt/Tùy chọn [Ctrl+Alt+S], đi tới Trình chỉnh sửa. Bảng màu. JavaScript .
Chọn bảng phối màu, chấp nhận cài đặt đánh dấu kế thừa từ cài đặt mặc định hoặc tùy chỉnh chúng như được mô tả trong Màu sắc và phông chữ
Chạy JavaScript trong trình duyệt
Trong trình chỉnh sửa, hãy mở tệp HTML có tham chiếu JavaScript. Tệp HTML này không nhất thiết phải là tệp triển khai trang bắt đầu của ứng dụng
Tôi có thể phát triển JavaScript ở đâu?
Các IDE và Công cụ phát triển JavaScript hàng đầu dành cho nhà phát triển web .nguyên tử. Trình chỉnh sửa đơn giản để viết chương trình JavaScript là một trong những IDE tốt nhất để tìm tùy chỉnh để thực hiện mọi thứ mà không cần sửa đổi tệp cấu hình. .Visual Studio. .gooom. .WebStorm. .Văn bản tuyệt vời. .nhật thực. .MãBút. .Đám mây AWS9Làm cách nào để thiết lập JavaScript?
Chạy JavaScript trong Trình duyệt .Tạo một tệp HTML [e. g. , running_javascript. html ] với một số nội dung HTML. Đừng lo lắng nếu bạn chưa biết HTML; . .Thêm thẻ tập lệnh vào tệp HTML có đường dẫn đến tệp của bạn. js trong thuộc tính src.Chủ Đề