Hello and Welcome. Today I am going to tell you something about Eslint, Emmet, and about other Web-Dev friends.

ESLINT - Pluggable Javascript Code Analysis Tool

Eslint is an open-source Text static code analysis tool to check syntax, find problems, and enforce code style. Eslint was created by Nicholas C. Zakas in the year 2013, it is used for identifying, analyzing, and reporting the glitches found in Javascript/ECMAscript to the developer. Eslint’s goal is to avoid bugs and make code more consistent. It is similar to JSLint and JSHint with a few exceptions :

1) ESLint uses Espree for Javascript parsing, which is built on Acorn Architecture. 2) It uses Abstract Syntax Tree to analyze the code. 3) You can add your custom rules at runtime in Eslint like a plugin.

Well, I hope you are familiar with its installation and a few of the many errors ( I would rather say best practices ) like adding a “default case” in a switch-case statement, ensuring the variable is used within its scope, etc... Helpful tip : “You should have npm installed in your package before installing eslint.” Also if you are using eslint in vscode you would find a .eslintrc.{js, yml, json} normally “json” file. And if you open it you would find something like :

            {
                "rules": {
                    "semi": ["error", "always"],
                    "quotes": ["error", "double"]
                }
            }

Here, the names “semi” and “quotes” are the rule names. The first value is a error level of the rule and can be one of values from :

                “Off” or “0”: It means - turn the rule off
                “Warn” or “1”: It means - turn the rule on as a warning
                “Error” or “2”: It means - turn the rule on as an error

You can find the list of available rules here. Its latest stable version v-7.25.0 was released on 23rd April 2021.

Emmet - A Text Editor Plugin.? or More.?

Basically, what most text editors allow you are that you store and re-use commonly used code chunks or commands - these chunks are called “code snippets”. Snippets are a good way to boost your productivity, but the problem is that you have to write them the first time to reuse them later.

Emmet takes this idea in a different way. Basically what emmet does is, it allows you to type a CSS-like expression that can be dynamically parsed and produce output depending on what you type in the abbreviation. It was designed to optimize the workflow of HTML/CSS developers, but now it can also be used with other languages like Javascript. When you install Vscode, emmet is automatically enabled for HTML and CSS.

For example => when you type html in Vscode, It would show you a pop-up displaying html5 on left and emmet on the right side(on the same row). Just click on it and you will see the html-5 basic element code magically appearing on screen.

Emmet was designed by Vadim Makeev in 2008 and its original name was Zen Coding. It has list of 100s of Shortcuts and you can download the Pdf list here.

Today you can find emmet extensions for React library of functions also. Today one of the most popular Emmet extension (Vscode editor) is ES7 React/Redux/React Native Snippets. It is available on VScode Marketplace.

Other Friends

Git : Git is a version control system that lets you manage and keep track of your code history.

=> If you want to explain Git to a 5-year-old about git then, git is a system that allows multiple people to work on the same project and publish their changes and we can also merge these changes together. And if you have rolled out a version of your software but now you want to go back to the previous version of the code (what you wrote in the previous version is gone right.?) git actually allows you to keep track of your changed files and thus allows you to roll back to the previous stable required version of your code.

Github : GitHub is a cloud-based hosting service that lets you manage your Git repositories. If you have open-source projects that use Git, then GitHub is designed to help you better manage them.

Github-Desktop : Github-desktop is a desktop application that enables you to use github hosting through the application interface.

VScode : Vscode is a text editor specially for software development. It brings all things like git, github, emmet and eslint together for developers to use and bring their programs and ideas to life.

What ideas do you have.? You want to bring them to life.? Want to become a Developer.? Join @neogcamp