Difference between Prettier and ESLint

Prettier and ESLint are both tools used to improve the quality of your code, but they serve different purposes and work in different ways.

### Prettier

- **Purpose**: Prettier is a code formatter. Its main goal is to enforce a consistent style by parsing your code and re-printing it with its own rules.

- **Functionality**: It automatically formats your code to ensure it adheres to a consistent style. This includes things like indentation, quotes, semicolons, and line breaks.

- **Configuration**: Prettier has minimal configuration options. It focuses on providing a consistent style with as few options as possible to reduce debates over code style.

- **Usage**: You run Prettier to format your code, and it makes changes directly to your files.

### ESLint

- **Purpose**: ESLint is a linter. Its main goal is to identify and fix problems in your JavaScript code.

- **Functionality**: It analyzes your code for potential errors, code smells, and deviations from best practices. It can also enforce coding standards and style rules.

- **Configuration**: ESLint is highly configurable. You can define your own rules, extend existing configurations, and use plugins to add additional rules.

- **Usage**: You run ESLint to check your code for issues. It can automatically fix some problems, but others may require manual intervention.

### Key Differences

- **Focus**: Prettier focuses on code formatting, while ESLint focuses on code quality and potential errors.

- **Configuration**: Prettier has minimal configuration options, while ESLint is highly configurable.

- **Functionality**: Prettier formats your code, while ESLint analyzes your code for issues and enforces coding standards.

### Example

Here's an example to illustrate the difference:

**Original Code:**

```javascript

function greet(name) {

    console.log("Hello, " + name);

}

greet("World");

```

**Prettier Output:**

```javascript

function greet(name) {

  console.log('Hello, ' + name);

}

greet('World');

```

**ESLint Output:**

```sh

app.js

  2:5  warning  Unexpected console statement  no-console

✖ 1 problem (0 errors, 1 warning)

```

In this example, Prettier formats the code to use single quotes and adjusts the indentation, while ESLint identifies a potential issue with the `console.log` statement.

Both tools can be used together to ensure your code is both well-formatted and free of potential issues. You can configure them to work in harmony, with Prettier handling formatting and ESLint handling code quality.