Eslint, Emmet and other Web-Dev friends.

ESLINT - Pluggable Javascript Code Analysis Tool

Eslint is an open source 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, analysing 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 few of the many errors ( I would rather say best practices ) like adding a “default case” in 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 is 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 it 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.

Example => when you type html in Vscode, It would show you a pop-up displaying html5 on left and emmet on 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 it’s 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.

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