react-miha-prettier-eslint

react-miha-prettier-eslint

Description

This library provides pre-configured ESLint and Prettier settings for development using React, TypeScript, and other modern technologies. It aims to simplify the setup of linting and formatting in new projects, ensuring that your codebase remains clean, readable, and consistent with industry standards.

Installation

To install the library, run the following command:

• npm install react-miha-prettier-eslint --save-dev

Usage After installation, add the following lines to your .eslintrc.js:

(if you use VITE your file has to be named .eslintrc.cjs but not .js)

module.exports = {
  extends: [require.resolve('react-miha-prettier-eslint/.eslintrc.js')],
}

And in your .prettierrc.js:

(if you use VITE your file has to be named .prettierrc.cjs but not .js)

module.exports = require.resolve('react-miha-prettier-eslint/.prettierrc.json')

Scripts

To enhance your development workflow, you can integrate the following scripts into your package.json. These scripts enable you to run Prettier and ESLint across your entire project with ease, ensuring consistent code formatting and adherence to linting rules.

Add these scripts to the "scripts" section of your package.json:

"scripts": {
"prettier:fix": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
"eslint:fix": "eslint \"**/*.{js,jsx,ts,tsx}\" --fix"
}

How to Use: Prettier Fix: To format all your project files, run npm run prettier:fix. This script will automatically apply Prettier formatting rules to your JavaScript, TypeScript, JSON, and Markdown files. ESLint Fix: Execute npm run eslint:fix to automatically fix linting issues in your JavaScript and TypeScript files based on the ESLint configuration. These commands are invaluable for maintaining code quality and consistency across your project.

Features:

• Support for React and TypeScript.
• Compatibility with the latest ECMAScript standards.
• Settings to enhance readability and maintain code consistency.
• Integrates with Airbnb's ESLint rules for robust linting.
• Flexible rules that can be easily extended or overridden.
• Includes essential plugins for React, TypeScript, and JSX.

Customization

You can easily customize the rules by modifying the .eslintrc.js and .prettierrc.js files in your project. This allows you to adjust the settings to your project's specific needs.