Since the modern developer tooling ecosystem is so large, it's helpful to have a broad understanding of the major issues that the tools address. If you type "front-end developer tools" into your favorite search engine, you'll get a wide range of results, including everything from text editors to browsers to note-taking pens.

From a birds's view Client-side methods can be classified into three different types of problems to solve from a high-level perspective:

• Safety net — Tools that are useful during your code development.

• Transformation — Tools that transform code in some way, e.g. turning an intermediate language into JavaScript that a browser can understand.

• Post-development — Tools that are useful after you have written your code, such as testing and deployment tools.

in this article we will mention the first type.

Safety net.

Linters

Linters are tools that go through the code and inform you if there are any errors, what kind of errors they are, and the code lines they are on. Linters may also be programmed to not only report errors, but also any breaches of a style guide that your team is following (for example, code that uses the incorrect number of spaces for indentation).

• eslint
• csslint
• SublimeLinter

Source code control

Source code management, also known as version control systems (VCS), is critical for archiving and collaborative work. In a standard VCS, you keep a local copy of the code you're working on. You then "push" the updates to a "master" version of the code saved on a remote server. So that a team of developers does not constantly overwrite each other's work, there is normally a means of monitoring and scheduling what modifications are made to the "master" copy of the code, and when.

Git most people use these days

It's a Command Line tool but you can use it via friendly user interfaces
you can use a hosted source control website such as GitHub, GitLab, or BitBucket.

Code formatters

Script formatters are similar to linters, in that instead of pointing out mistakes in the code, they normally make sure it's formatted properly, according to your design guidelines, and preferably patch any errors they detect automatically.

Prettier is a well-known example of a code formatter, and we'll use it later in the module.

Bundlers/packers

These are tools that prepare your code for production, such as "tree-shaking" to ensure that only the parts of your code libraries that you use are included in your final production code, or "minifying" to remove all whitespace from your production code and make it as small as possible before uploading it to a server.

Parcel is an especially smart application that falls into this group — it can do all of the above, but it also lets you organise assets like HTML, CSS, and image files into compact packages that you can then deploy, as well as automatically adding dependencies anytime you attempt to use them. It can also help you with any code transformation.

Webpack is another well-known packing platform that performs related functions.