Configure `prettier` for formatting

GitHub CoPilot

DarylStark: Can I use Prettier to sort imports in my JSX files?

Prettier itself does not support sorting imports directly. However, you can achieve this functionality by using additional tools in conjunction with Prettier. One popular tool for sorting imports in JavaScript and TypeScript files, including JSX and TSX, is eslint-plugin-import.

Steps to Sort Imports in JSX Files Using Prettier and ESLint

Install Prettier and ESLint with the necessary plugins:

npm install --save-dev prettier eslint eslint-plugin-import eslint-config-prettier eslint-plugin-prettier

Configure ESLint to use Prettier and the import plugin: Create or update your .eslintrc.json file with the following configuration:

{
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:prettier/recommended"
    ],
    "plugins": ["import"],
    "rules": {
        "prettier/prettier": "error",
        "import/order": [
            "error",
            {
                "groups": [["builtin", "external", "internal"]],
                "pathGroups": [
                    {
                        "pattern": "react",
                        "group": "external",
                        "position": "before"
                    }
                ],
                "pathGroupsExcludedImportTypes": ["react"],
                "newlines-between": "always",
                "alphabetize": {
                    "order": "asc",
                    "caseInsensitive": true
                }
            }
        ]
    },
    "settings": {
        "react": {
            "version": "detect"
        }
    }
}

Create or update your Prettier configuration: Create a .prettierrc file with your preferred Prettier settings:
```
{
    "singleQuote": true,
    "trailingComma": "all"
}
```

Add scripts to your package.json to run ESLint and Prettier:

{
    "scripts": {
        "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
        "format": "prettier --write ."
    }
}

Example Usage

Before Sorting:

import { useState } from 'react';
import React from 'react';
import { Link } from 'react-router-dom';
import { Button } from '@material-ui/core';

After Sorting:

import React from 'react';
import { useState } from 'react';

import { Button } from '@material-ui/core';
import { Link } from 'react-router-dom';

Running the Tools

Lint and fix your code:
```
npm run lint -- --fix
```
Format your code with Prettier:
```
npm run format
```

By combining Prettier with ESLint and eslint-plugin-import, you can automatically sort your imports in JSX files while maintaining consistent code formatting.

DarylStark / saticoy-svc-fe-login-form

Configure `prettier` for formatting #39

Steps to Sort Imports in JSX Files Using Prettier and ESLint

Example Usage