The most comprehensive list of JavaScript development tools, there is always a suitable for you!

  • THE ULTIMATE LIST OF JAVASCRIPT TOOLS
  • Translator: Fundebug

To ensure readability, free translation rather than literal translation is used in this paper. In addition, the copyright of this article belongs to the original author, and translation is for study only.

Introduction to the

In January 2017, Stack Overflow’s annual Developer Survey, which polled 64,000 programmers, found that JavaScript was the most popular programming language for the fifth year in a row.

This blog will introduce some common JavaScript development tools:

Build & Automation

· IDE& Editor

The document,

The test,

Debugging,

Security,

· Code optimization & analysis

Package management,

Build & Automation

Webpack statically analyzes all the modules that a JavaScript application depends on, generates dependency diagrams, and then packages them into several static files. Grunt automates repetitive, time-consuming tasks. Grunt’s ecosystem is large, with over 6,010 plug-ins. Since the release of Grunt, Gulp has taken a completely different approach, using JavaScript functions to define tasks. It has over 2,770 plug-ins and offers better control. Browserify enables developers to use the CommonJS module in the browser. Developers organize references and dependencies between modules by requiring (‘modules’) just as they would in a Node environment, and Browserify packages these dependencies into JS files that browsers can reference directly. Brunch is very simple and fast. The configuration file of Brunch is very simple and the introduction document is very detailed. Brunch automatically generates Source Map to facilitate developer Debug. Yeoman is available in any programming language (JavaScript, Python, C#, Java, etc.). It is the scaffolding for front-end development, with 6,213 plug-ins.

IDE & Editor

WebStorm is a powerful JavaScript IDE. It supports multiple frameworks and CSS languages, including front-end, back-end, mobile, and desktop applications. WebStorm seamlessly integrates third-party tools such as build Build, syntax check build Linter, and so on. It provides code completion, real-time error detection, navigation, built-in console, various plug-ins and other system functions. Atom was developed by the GitHub team. Atom can be easily customized by developers. Atom comes with a package management tool, code completion, file system browser, support for multiple platforms, and other useful features. Visual Studio Code is a Microsoft IDE that supports TypeScript. It provides code completion, syntax highlighting, support for Git commands, and more. In addition, it has a lot of plug-ins. Brackets is a lightweight open source editor. It focuses on visual tools that can help developers develop Web applications. Brackets supports real-time preview as well as inline editing.

The document

Swagger provides a set of rules for describing apis. With Swagger, you can create clear documentation and automate API-related operations (such as functional testing). JSDoc can generate API documentation for javascript applications or libraries or modules based on comment information in javascript files. JSDoc can be used to manage large projects. JGrouseDoc is an open source tool that generates jaavDoc-like source documents based on JavaScript annotations. It generates documentation not only for variables and functions, but also for other elements such as modules. YUIDoc is based on Nodejs and can generate API documents from annotations in documents. It uses syntax similar to Javadoc and Doxygen, supports live preview, supports a variety of languages, and supports markup languages. Docco is a free documentation tool written by Literate CoffeeScript. It generates HTML documents from comments in the code. Docco is not limited to JavaScript, but supports Python, Ruby, Clojure, and more.

test

Jasmine is a behavior Driven Development (BDD) framework for testing JavaScript code. It does not rely on any third-party modules and does not require the DOM. Its syntax is very straightforward, making it easy to write tests. It can also be used to test Node.js, Python, and Ruby. Mocha is a functional testing framework for testing Node.js as well as browser-side JavaScript. As the testing framework of choice for developers, it provides the freedom to write test groups, provide detailed test reports, and make asynchronous testing very simple. Mocha usually validates test results with the assertion library Chai. PhantomJS is used for front-end unit testing. Because PhantomJS is an unbounded Webkit browser engine, you can run faster using PhantomJS scripts than using the browser test directly. It supports web standards such as JSON, Canvas, DOM manipulation, SVG, and CSS selectors. Protractor is an end-to-end testing framework for testing Angular applications. It is built on WebDriverJS and can test applications by simulating real users through browser events or native events.

debugging

JavaScript Debugger is developed by the Mozilla Developer Network (MDN) and can be used independently to debug Node.js code or in other browsers. Firefox provides local and remote debugging capabilities, and Firefox Android is also used to debug applications running on Android. Chrome Dev Tools provides a range of Tools for debugging JavaScript code, editing CSS, and testing application performance. Ng-inspector is a Plugin for Firefox, Chrome, and Safari that helps developers develop, understand, and debug AngularJS apps. It provides real-time updates, DOM highlighting, and more. Augury is a Chrome plugin for debugging Angular 2 applications. It gives developers a direct view of the application structure, operational characteristics, and state changes.

security

Snyk is a paid service for finding, fixing, and preventing known vulnerabilities in JavaScript, Node.js, and Ruby applications. Snyk has his own vulnerability library, as well as vulnerability data for NSP and NIST NVD. It allows developers to use their patches and updates to fix these security vulnerabilities. Node Security Project provides tools for scanning dependencies to detect vulnerabilities. The NSP uses its own vulnerability data, as well as vulnerability data from the NIST NVD. NSP supports integration of GitHub and CI software, real-time monitoring and alarm, and can provide advice on how to fix node.js application vulnerabilities. RetireJS is an open source dependency monitoring tool. It contains several components, including command line tools, Grunt plug-ins, Firefox and Chrome plug-ins, Burp and OWASP ZAP plug-ins. Retirejs collects mobile vulnerability data from NIST NVD, vulnerability tracking systems, blogs, and mailing lists. Gemnasium is a paid tool, but there are free plans. It supports a variety of technologies such as Ruby, PHP, Bower, Python, and NPM. Gemnasium offers many useful features such as automatic updates, real-time alerts, and Slack integration. OSSIndex supports multiple ecosystems (Java, JavaScript and. NET/C#), and multiple platforms such as NuGet, NPM, Bower, Chocolatey, Maven, Composer, Drupal, and MSI. It collects vulnerability data from NVD, among other sources.

Code optimization & analysis

JSLint is a Web service that validates JavaScript code quality. When it diagnoses a problem, it returns the approximate location of the problem and an error message. JSLint can analyze coding conventions and syntax errors. JSHint can find errors in JavaScript as well as potential problems. JSHint is a static code analysis tool designed to help developers write large programs. It can diagnose syntax errors, hidden type conversions, and so on, but it can’t tell if your application is correct, performing well enough, or leaking memory. JSHint is a fork of JSLint. ESLint is an open source diagnostic tool for JSX and JavaScript applications. It can help developers find suspicious code or code that does not conform to certain programming specifications. It helps developers find problems in JS code before they execute it, saving a lot of time. ESLint is written in Node.js and can be installed using NPM. Flow is a static type detector for JavaScript code developed by Facebook. Flow can detect type errors at coding time and prompt for them.

management

Bower is a package manager for managing front-end dependencies created by Twitter. It provides a large number of dependency packages to help JavaScript developers manage their front-end dependency JS libraries more easily. NPM stands for Node Package Manager, and NPM packages can actually be used on the front and back ends. It is a JavaScript package management system and the largest dependency library in the world, with over 475,000 modules. Yarn is a new JavaScript package management tool developed by Facebook, Google, Exponent and Tilde. Compared to NPM, it addresses security, performance, and consistency issues. Duo takes a page from the playbook of Component, Browserify, and Go and aims to simplify the process of building large Web applications.

About Fundebug

Fundebug focuses on JavaScript, wechat applets, wechat mini games, Alipay applets, React Native, Node.js and Java real-time BUG monitoring. Since its launch on November 11, 2016, Fundebug has handled more than 600 million error events in total, which has been recognized by many well-known users such as Google, 360 and Kingsoft software. Welcome free trial!

Copyright statement

Reprint please indicate the author Fundebug and this article addresses: blog.fundebug.com/2017/06/19/…