Hotline: 098 821 7749 info@acinternational.com.vn
Mã SP: DEV-011
JetBrains WebStorm
Giá:liên hệ Còn hàng
Số lượng:

JetBrains WebStorm

Hãng sản xuất JetBrains Phiên bản:
Bản quyền Subcription (vĩnh viễn theo version của phần mềm)
Thời hạn bản quyền Không giới hạn
Ngành nghề Lập trình
Đối tượng tác động Code

Mô tả

WebStorm là một môi trường phát triển tích hợp (IDE – Intergrated Development Environment) mạnh mẽ cho phát triển các ứng dụng JavaScript hiện đại nhưng vô cùng gọn nhẹ. Công cụ phát triển web này được trang bị các tính năng soạn thảo (edit), gỡ lỗi (debug), tích hợp (intergrate), kiểm thử (test) hoàn hảo cho các lập trình viên. WebStorm là lựa chọn tuyệt vời cho những ai đang tìm kiếm một công cụ phát triển web.
Thông tin liên hệ:

Liên hệ với tôi qua:

Thông tin chi tiết sản phẩm

I. Lợi ích, công dụng
1. Trình soạn thảo thông minh nhất.
  • Sử dụng toàn bộ sức mạnh của hệ sinh thái JavaScript hiện đại - WebStorm giúp bạn bao quát toàn bộ code của mình! Tận hưởng việc hoàn thành câu lệnh thông minh (Code completion), phát hiện lỗi tức thì (error detection), điều hướng (Navigation) và tái cấu trúc (Refactoring) mạnh mẽ cho JavaScript, TypeScript, các ngôn ngữ lập trình định kiểu (StyleSheet Language) và các Framework phổ biến nhất.
    • Web: Angular, React, Vue.js
    • Mobile: Ionic, Cordova, React Native
    • Server: Node.js, Meteor
    • Desktop: Electron


2. Trình gỡ lỗi (Debugger)
  • Gỡ lỗi ứng dụng khách client-side và Node.js của bạn một cách dễ dàng trong IDE - đặt điểm ngắt (breakpoint) ngay trong mã nguồn, khám phá ngăn xếp cuộc gọi (call stack) và các biến (variable), thiết lập watch và sử dụng bảng điều khiển tương tác (interactive console).


3. Tích hợp công cụ liền mạch (Seamless tool integration)
  • Tận dụng lợi thế của linters, các công cụ build, test, REST client, và các công cụ khác, tất cả được tích hợp cấp độ sâu với IDE. Nhưng bất cứ lúc nào bạn cần Terminal, nó cũng có sẵn như là một cửa sổ IDE tool window.

4. Kiểm thử từng phần (Unit testing)
  • Chạy và gỡ lỗi các thử nghiệm với Karma, Mocha, Protractor và Jest trong WebStorm. Ngay lập tức thấy trạng thái thử nghiệm ngay trong trình soạn thảo hoặc trong một chế độ xem dạng cây treeview tiện dụng mà từ đó bạn có thể nhanh chóng chuyển đến thử nghiệm.
     
5. Tích hợp với VCS (Integration with VCS)
  • Sử dụng giao diện người dùng hợp nhất đơn giản để làm việc với Git, GitHub, Mercurial và các VCS khác. Ủy thác các tệp, xem lại các thay đổi và giải quyết các xung đột với công cụ khác biệt / hợp nhất trực quan ngay trong IDE.
 
II. Tính năng
1. Hỗ trợ code thông minh (Intelligent coding assistance)
WebStorm giúp bạn viết mã tuyệt vời. Trình soạn thảo thông minh của nó có các tính năng tự động hoàn thành câu lệnh (Code completion), phân tích mã tức thì (Code analysis), định dạng mã (Code formatting) và tái cấu trúc (refactoring) nâng cao hiệu suất làm việc của bạn và đưa kỹ năng lập trình của bạn lên một cấp độ hoàn toàn mới.
 
  • Hỗ trợ nhiều ngôn ngữ lập trình và Framwork (Supported languages and frameworks)
    • WebStorm mang đến sự hỗ trợ hàng đầu cho quá trình code của bạn đối với các ngôn ngữ lập trình JavaScript, ECMAScript 6, TypeScript, CoffeeScript, Dart và Flow.
    • Nó giúp bạn viết code trong HTML, CSS, Less, Sass và Stylus.
    • Trên hết, bạn có thể hưởng lợi từ sự hỗ trợ nâng cao cho Node.js và các Framwork phổ biến như React, Angular, Vue.js, Meteor và hơn thế nữa.
  • Code completion – Tính năng tự động hoàn thành câu lệnh
    • WebStorm phân tích dự án của bạn để cung cấp các đề xuất hoàn thành câu lệnh tốt nhất cho tất cả các phương thức (method), hàm (function), mô-đun (module), biến (variable) và lớp (class) được xác định trong ứng dụng của bạn. Hỗ trợ mã hóa của WebStorm là nhận thức theo ngữ cảnh và cũng có thể là Framework cụ thể.
    • Khi làm việc với CSS (Casscading Style Sheets), hãy tận hưởng tính năng hoàn thành câu lệnh cho các thuộc tính (properties) và giá trị (value) của chúng. Trong Less và Sass, nhận hỗ trợ cho mixin. Và, tất nhiên, trong HTML, bạn có thể hoàn thành mã cho tất cả các thẻ (tag) và thuộc tính (attribute).
  • Code quality analysis – Tính năng phân tích chất lượng code
    • WebStorm tích hợp hàng trăm bài test dùng cho tất cả các ngôn ngữ được hỗ trợ. Ngoài ra, bạn có thể sử dụng ESLint, TSLint, Stylelint, JSCS, JSHint và JSLint.
    • Tất cả các lỗi và cảnh báo được báo cáo ngay trong trình soạn thảo khi bạn đánh máy nhập lệnh, với nhiều tùy chọn sửa lỗi nhanh có sẵn.
    • Bất kỳ dòng mã nào có vấn đề có thể được đánh dấu trong gutter của trình soạn thảo bên phải, vì vậy bạn có thể dễ dàng phát hiện lỗi và cảnh báo trong một tệp dài.
    • Bạn cũng có thể chạy tính năng phân tích chất lượng code cho toàn bộ dự án và tự động áp dụng các bản sửa lỗi nhanh đã chọn.
  • AngularJS
    • WebStorm cũng có tính năng hỗ trợ hoàn thành câu lệnh tự động (Code completion) cho các ứng dụng AngularJS. Nhận các đề xuất cho các Directive tùy chỉnh và mặc định, Controller và app name, và thông tin chi tiết về mã cho các ràng buộc dữ liệu.
    • Directive là một thành phần mở rộng HTML, hay nói cách khác là các thuộc tính (properties) của các thẻ HTML mà Angular nó định nghĩa thêm.
  • Emmet
    • Trong WebStorm bạn có thể sử dụng toàn bộ sức mạnh của chữ viết tắt Emmet để tăng hiệu suất của bạn. Nhập một từ viết tắt trong HTML, sau đó nhấn Tab để mở rộng nó thành Markup. Emmet cũng hoạt động trong CSS và JSX.
  • Code style - Quy ước viết mã nguồn
    • Để duy trì việc sử dụng Code Style nhất quán trong toàn bộ dự án, WebStorm tự động áp dụng Code Style được định cấu hình khi bạn viết code hoặc bằng cách định dạng lại toàn bộ tệp cùng một lúc.
    • Định cấu hình Code Style của bạn cho bất kỳ ngôn ngữ lập trình nào, bao gồm cả thụt lề (indent), dấu cách (space), quy tắc căn chỉnh (aligning rule), v.v. Lưu code style scheme trong các thiết lập dự án và, nếu bạn muốn, hãy chia sẻ nó với các đồng đội của bạn thông qua VCS.
  • Navigation – Tính năng điều hướng, di chuyển trong dự án
    • Với các tính năng điều hướng mạnh mẽ của WebStorm, việc duyệt code của bạn được tiến hành một cách hiệu quả và tiết kiệm thời gian khi làm việc với các dự án lớn.
    • Đối với bất kỳ phương thức (method), hàm (function) hoặc biến (variable) nào trong mã của bạn, hãy chuyển đến Definition của nó bằng cách nhấn Ctrl + Nhấp chuột đơn giản hoặc tìm kiếm tập quán của nó.
    • Tìm kiếm thông qua toàn bộ dự án cho một Symbol, tên tệp (file name) hoặc tên lớp (class name), bằng cách sử dụng hộp thoại Tìm kiếm “Search” ở khắp mọi nơi (Double Shift).
    • Chế độ xem cấu trúc (Structure view) có thể giúp bạn điều hướng thông qua một tệp hiện đang được mở một cách dễ dàng.
  • Live Edit -Tính năng chỉnh sửa trực tiếp
    • Live Edit cho phép bạn xem các cập nhật nội dung trang trong trình duyệt (chỉ dành cho Google Chrome) ngay lập tức mà không cần tải lại, với những thay đổi bạn thực hiện trong các tệp HTML và CSS của mình. Nó hoạt động như một phần của phiên gỡ lỗi JavaScript.
  • EditorConfig
    • WebStorm tự động áp dụng Code Style được chỉ định trong tệp dự án .editorconfig.
2. Gỡ lỗi, truy tìm và kiểm thử (Debugging, tracing and testing)
WebStorm cung cấp các công cụ tích hợp mạnh mẽ để thực hiện gỡ lỗi, kiểm tra và truy tìm dễ dàng hơn bao giờ hết. Cho dù bạn đang làm việc trên một ứng dụng phía máy khách hay ứng dụng Node.js, WebStorm có thể giúp bạn với các nhiệm vụ quan trọng này.
 
  • Gỡ lỗi JavaScript và Node.js phía máy khách (Debugging client-side JavaScript and Node.js)
    • WebStorm cung cấp trình gỡ lỗi nâng cao cho mã phía máy (client-side code) khách của bạn hoạt động cùng với Google Chrome. Nó được tích hợp ngay vào IDE, vì vậy bạn không phải chuyển đổi giữa trình soạn thảo và trình duyệt để gỡ lỗi.
    • Bạn có thể dễ dàng gỡ lỗi code của ECMAScript 6, TypeScript hoặc CoffeeScript, dựa vào sự hỗ trợ của trình gỡ lỗi WebStorm cho các source map.
    • Trình gỡ lỗi tích hợp sẵn đầy đủ tính năng cho Node.js. Sử dụng nó để gỡ lỗi các ứng dụng chạy cục bộ hoặc trên máy từ xa.
    • Trình gỡ lỗi WebStorm có nhiều chế độ xem bao gồm Frame, Global and Local Variable và Watch. Các giá trị biến (Variable Value) được hiển thị ngay tại dòng lệnh, bên cạnh vị trí sử dụng của chúng trong trình soạn thảo. Bạn có thể dễ dàng đánh giá các biểu thức JavaScript Expression trong thời gian chạy. Các điểm ngắt (Breakpoint) hỗ trợ chế độ và điều kiện tạm ngừng.
  • Unit testing – Tính năng kiểm thử từng phần
    • Thực hiện việc kiểm tra từng phần một cách dễ dàng, vì WebStorm tích hợp với các JavaScript testing framework phổ biến.
    • Chọn Karma hoặc Jest để kiểm tra mã JavaScript phía máy khách hoặc Mocha của bạn để kiểm tra Node.js. Chạy và gỡ lỗi kiểm tra ngay bên trong IDE, xem kết quả theo định dạng đẹp và trực quan, và điều hướng đến test code.
    • Báo cáo bảo hiểm mã cũng có sẵn cho nhân viên thử nghiệm Karma.
    • WebStorm cũng hỗ trợ Protractor cho end-to-end testing đối với Angular, JSTestDriver, Cucumber.js cho lập trình hướng hành vi và Nodeunit.
  • Tracing – Tính năng truy tìm
    • spy-js là một công cụ tích hợp giúp bạn theo dõi code của bạn và xác định hiệu quả bất kỳ tắc nghẽn nào có thể xảy ra. Nó hoạt động cả cho JavaScript và Node.js phía máy khách và thậm chí hỗ trợ các ngôn ngữ được biên dịch sang JavaScript.
    • Với spy-js, bạn có thể xem danh sách đầy đủ các sự kiện đã kích hoạt thực thi mã, sau đó tìm hiểu theo dõi ngăn xếp (Stack trace) cho một sự kiện và khám phá dấu vết được tô sáng trong mã nguồn. Những dữ liệu này cũng được sử dụng để cung cấp kết quả hoàn thành mã nguồn.
    • spy-js cũng có thể giúp bạn hình dung cấu trúc ứng dụng. Sử dụng biểu đồ spy-js diagram để xem cách các tệp dự án được kết nối với các cuộc gọi hàm (function call) dựa trên dữ liệu thời gian chạy.
  • Profiling – Chụp lại tất cả các sự kiện hay hoạt động diễn ra
    • WebStorm có thể giúp bạn nắm bắt và khám phá các cấu hình CPU V8 và heap snapshots cho các ứng dụng Node.js. Dễ dàng xác định bất kỳ điểm nóng hoặc rò rỉ bộ nhớ nào trong ứng dụng của bạn vì dữ liệu lược tả được trình bày theo cách dễ tiếp cận nhất.
3. Tích hợp công cụ liền mạch (Seamless tool integration)
WebStorm tích hợp với các task runner, linter, test framework và package manager để phát triển web, cung cấp cho bạn trải nghiệm phát triển hợp lý, hiệu quả.
  • Task runner – Trình chạy tác vụ
    • Hãy tận hưởng giao diện người dùng hợp nhất để chạy các tập lệnh Grunt, Gulp tasks npm script. Không cần phải sử dụng một dòng lệnh nào để bắt đầu nhiệm vụ của bạn.
    • Tất cả các tác vụ được định nghĩa trong dự án gruntfile.js, gulpfile.js hoặc package.json của bạn hiện được liệt kê trong Tool Window và bạn có thể chạy bất kỳ tác vụ nào với một cú nhấp đúp đơn giản.
    • Bạn cũng có thể tạo cấu hình Run / Debug cho các tác vụ và sau đó chạy hoặc gỡ lỗi chúng bằng các hành động Run… hoặc Debug… quen thuộc.
  • npm và Bower
    • Quản lý các module Node.js thông qua npm rất dễ dàng với WebStorm. Nhấn chuột phải vào tệp package.json để chạy lệnh npm install. Một phép kiểm tra sẽ cảnh báo bạn nếu bạn quên cài đặt một mô-đun hoặc quên liệt kê nó trong package.json.
    • Truy cập danh sách đầy đủ các phụ thuộc npm and Bower cục bộ thông qua Preferences, nơi bạn có thể cài đặt và cập nhật các mô đun npm và các phụ thuộc phía máy khách.
  • Code quality tools – Các công cụ đánh giá chất lượng Code
    • Ngoài hàng trăm bài kiểm tra riêng của WebStorm, bạn có thể sử dụng các Linter như ESLint, TSLint, Stylelint, JSHint hoặc JSLint. Khi bạn soạn thảo câu lệnh, WebStorm sẽ chạy các lệnh này và sẽ highlight ngay lập tức nếu có lỗi trong câu lệnh trong trình soạn thảo.
    • Để đảm bảo tuân thủ quy ước viết mã nguồn – Code Style – của dự án (như thụt đầu dòng, dấu cách sau từ khóa vv), chỉ cần bật JSCS, đây là trình kiểm tra Code Style cho JavaScript.
  • TypeScript compiler – Trình biên dịch TypeScript
    • WebStorm có thể nhanh chóng và dễ dàng biên dịch mã TypeScript của bạn thành JavaScript bằng trình biên dịch dựng sẵn của nó. Bạn có thể chỉ định các tùy chọn biên dịch theo cách thủ công hoặc trong tệp tsconfig.json. Tất cả các lỗi biên dịch được báo cáo trong trình soạn thảo khi bạn di chuyển trong dự án.
  • Tích hợp với PhoneGap, Cordova và Ionic (Integration with PhoneGap, Cordova and Ionic)
    • WebStorm tạo điều kiện cho quy trình làm việc của bạn với các ứng dụng dành cho thiết bị di động được phát triển với các PhoneGap, Apache Cordova và Ionic Framework. Bạn có thể tạo, mô phỏng và triển khai các ứng dụng ngay từ IDE.
  • Tích hợp Yeoman (Yeoman integration)
    • Nhờ tích hợp với Yeoman, bây giờ bạn có thể truy cập hàng trăm project generator ngay từ màn hình IDE Welcome screen. Giao diện người dùng mới sẽ giúp bạn tìm và cài đặt các trình tạo mới và chúng sẽ hướng dẫn bạn qua các bước của trình tạo, tất cả mà không cần rời khỏi IDE.
4. Các tính năng của môi trường phát triển tích hợp (IDE features)
WebStorm được xây dựng trên nền tảng nguồn mở open-source IntelliJ Platform, mà JetBrains đã phát triển và hoàn thiện trong hơn 15 năm. Nó cung cấp sự tích hợp chặt chẽ với VCS, tính năng Local History, có một hệ sinh thái plugin sôi động, hoàn toàn có thể cấu hình được, và có nhiều, nhiều hơn nữa để cung cấp.
  • VCS
    • WebStorm cung cấp giao diện người dùng hợp nhất để làm việc với nhiều Hệ thống kiểm soát phiên bản phổ biến, đảm bảo trải nghiệm người dùng nhất quán trên Git, SVN, Mercurial và Perforce.
    • Mọi thay đổi không được cam kết sẽ được đánh dấu trong Gutter bên trái của trình soạn thảo và trong chế độ xem Preject View. Bạn có thể dễ dàng khôi phục mọi thay đổi chỉ bằng hai lần nhấp.
    • Công cụ tích hợp trực quan được tích hợp sẵn sẽ giải quyết mọi xung đột một cách nhanh chóng và trực quan.
    • Khi làm việc với GitHub, hãy kiểm tra các dự án của bạn và thực hiện các yêu cầu kéo ngay trong IDE.
  • Local history
    • Cho dù bạn đang sử dụng VCS hay không, Local history có thể là một trình lưu trữ mã Code Saver thực sự. WebStorm theo dõi bất kỳ thay đổi nào được thực hiện trong tệp nguồn của bạn, bảo vệ bạn khỏi bất kỳ tổn thất hoặc sửa đổi ngẫu nhiên nào, ngay cả khi được thực hiện bởi các ứng dụng khác. Bất cứ lúc nào bạn có thể kiểm tra lịch sử của một tập tin hoặc thư mục cụ thể và trở lại (rollback) cho bất kỳ phiên bản trước của nó.
  • Tùy chỉnh (Customization)
    • IDE cho phép tùy chỉnh linh hoạt. Điều chỉnh nó để hoàn toàn phù hợp với phong cách viết code của bạn, từ các phím tắt và chủ đề trực quan đến cửa sổ công cụ và bố cục trình soạn thảo.
    • WebStorm có hai chế màn hình nền trắng và nền đen mà bạn có thể lựa chọn. Các color scheme có thể được cấu hình trong Preferences cho mỗi ngôn ngữ lập trình, hoặc bạn có thể tìm và sử dụng một trong các chủ đề phổ biến có sẵn trên Internet.
  • Tích hợp Terminal (Built-in terminal)
    • Để chạy một lệnh hoặc một công cụ dòng lệnh, không cần phải rời khỏi IDE - sử dụng Terminal cục bộ tích hợp của WebStorm.
  • Plugin (Plugin ecosystem)
    • Hàng tá plugin có sẵn trong IDE Plugin Repository khi bạn quyết định làm giàu thêm tính năng cho WebStorm với sự hỗ trợ cho các Framework mới, các công cụ tích hợp và các tính năng tăng hiệu suất bổ sung.
 
 
III. Yêu cầu hệ thống
 
 

IV. Download
 

V. Các phiên bản hiện có
- Phần mềm WebStorm có các phiên bản sau:
  • Business subscription
    • Phù hợp cho các pháp nhân (các công ty và tổ chức, kể cả phi lợi nhuận và chính phủ).
  • Individual subscription
    • Phù hợp cho mỗi cá nhân mua bằng tiền riêng của họ.
  • Student license
    • Phù hợp cá nhân học sinh và giáo viên hướng dẫn
  • Classroom license
    • Phù hợp với các tổ chức giao dục được công nhận.
  • Open Source license
    • Các dự án mã nguồn mở
- Sự khác biệt giữa các tùy chọn giấy phép của WebStorm được đề cập trong bảng dưới đây:
- So sánh các tính năng chi tiết của từng phiên bản tại link: https://www.jetbrains.com/store/terms/comparison.html