Posts

Showing posts with the label Prettier

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 enforc...

Prettier in action

Prettier is a code formatter that helps you maintain consistent code style by automatically formatting your code according to a set of rules.  Here's a simple demo to show Prettier in action. ### Step 1: Install Prettier First, you need to install Prettier. You can do this using npm (Node Package Manager): ```sh npm install prettier --save-dev ``` ### Step 2: Create a Configuration File Create a configuration file named `.prettierrc` in your project directory. This file will contain your Prettier settings. Here's an example configuration: ```json {     "semi": true,     "singleQuote": true,     "tabWidth": 2,     "trailingComma": "es5" } ``` ### Step 3: Create a JavaScript File Create a JavaScript file, for example, `app.js`, with the following content: ```javascript function greet(name) {     console.log("Hello, " + name); } greet("World"); ``` ### Step 4: Run Prettier Run Prettier on your JavaScript file to...