A code formatter is tool which formats our code by given configuration like maintaining indentation, tabs vs space, number of arguments in line, trailing commas. A Linter is a tool which not only checks indentation, tailing commas but it also catch possible and common errors which we ignore or forget.

1. EditorConfig,
Eslint, Prettier

2. Code Formatter, Linter
A code formatter is tool which
formats our code by given
configuration like maintaining
indentation, tabs vs space, number of
arguments in line, trailing commas.
A Linter is a tool which not only
checks indentation, tailing commas
but it also catch possible and common
errors which we ignore or forget.

3. Code Formatter, Linter Tools
1. EditorConfig
2. Eslint
3. Prettier

4. What is EditorConfig?
EditorConfig helps developers define and maintain consistent coding
styles between different editors and IDEs. The EditorConfig project
consists of a file format for defining coding styles and a collection of
text editor plugins that enable editors to read the file format and
adhere to defined styles. EditorConfig files are easily readable and
they work nicely with version control systems.

5. What's an
EditorConfig file
look like?
.editorconfig

6. Getting Started
We need to put .editorconfig file on root of our project, also we need
to install plugin for our favourite IDE, Editor. Can be used with IDE
Webstorm, PHPStorm or with Editor VScode, Sublime Text, Atom.

7. What is Eslint?
ESLint is an open source JavaScript linting utility originally created by
Nicholas C. Zakas in June 2013.
JavaScript, being a dynamic and loosely-typed language, is especially
prone to developer error. Without the benefit of a compilation
process, JavaScript code is typically executed in order to find syntax
or other errors. Linting tools like ESLint allow developers to discover
problems with their JavaScript code without executing it.

8. What's an Eslint
file look like?
File can be type of
YML, JS

9. Getting Started
We can install eslint from npm globally or locally.
> npm i eslint [-g]
To Lint our file
> eslint src/**/*.js
We can also tell eslint to fix common mistake which can be fixed
> eslint src/**/*.js --fix

10. Getting Started
Plugins are also available for our favourite ide and editors, which will
show us message as we write code.

11. What is Prettier?
An opinionated code formatter
Supports many languages
Integrates with most editors
Has few options

12. What's an Prettier
file look like?

13. Getting started
We can install it from npm globally or locally
> npm i prettier [-g] [--save-dev]
We can use prettier by adding plugin to our favourite editor or ide.

14. Any Questions?

15. Thank You