كيفية تنسيق كود JavaScript باستخدام Prettier و ESLint

npm install --save-dev prettier eslint @eslint/js eslint-config-prettier

# Confirm installations
npx prettier --version
npx eslint --version

// .prettierrc
{
    "semi": true,
    "singleQuote": true,
    "printWidth": 100,
    "tabWidth": 2,
    "trailingComma": "all",
    "arrowParens": "always"
}

// eslint.config.js
import js from '@eslint/js';
import eslintConfigPrettier from 'eslint-config-prettier';

export default [
    js.configs.recommended,

    {
        rules: {
            // Your project-specific rules
            'no-console': 'warn',
            'no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
            'no-var': 'error',
            'prefer-const': 'error',
        },
    },

    // MUST be last — disables ESLint formatting rules
    // so Prettier can own them without conflicts
    eslintConfigPrettier,
];

// Note: if your package.json doesn't have "type": "module",
// use .mjs extension: eslint.config.mjs

# .prettierignore
node_modules/
dist/
build/
coverage/
*.min.js
package-lock.json
pnpm-lock.yaml

# Also add ignores to eslint.config.js:
# Add this object BEFORE the rules objects:
{
    ignores: [
        'node_modules/',
        'dist/',
        'build/',
        'coverage/',
        '**/*.min.js',
    ],
}

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

// Usage:
npm run format        # fix all files in place
npm run format:check  # just check, no writes (good for CI)
npm run lint          # report ESLint violations
npm run lint:fix      # auto-fix fixable violations

// .vscode/settings.json
{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit"
    },
    // Per-language overrides (if needed)
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

# Install husky and lint-staged
npm install --save-dev husky lint-staged

# Initialize husky (creates .husky/ directory)
npx husky init

# The init command creates .husky/pre-commit — replace its content:
echo 'npx lint-staged' > .husky/pre-commit

// package.json — add this at the top level
{
    "lint-staged": {
        "*.{js,ts,jsx,tsx}": [
            "prettier --write",
            "eslint --fix"
        ],
        "*.{json,css,md}": [
            "prettier --write"
        ]
    }
}

// Test it: stage a file with bad formatting, then commit
git add src/index.js
git commit -m "test"
// Prettier runs on src/index.js, ESLint runs on src/index.js
// If either fails (unfixable ESLint error), the commit is blocked