@rodinshrestha/prettier-config

Shared Prettier configurations for React, Next.js, React Native, Laravel, WordPress, and Vanilla JS projects.

🚀 Installation

npm install --save-dev @rodinshrestha/prettier-config prettier

or

yarn add -D @rodinshrestha/prettier-config prettier

🚀 Quick Start

1. Install Prettier extension in VS Code
2. Add to your .vscode/settings.json:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

React Projects

Create .prettierrc.js in your project root:

module.exports = require('@rodinshrestha/prettier-config/react');

Next.js Projects

module.exports = require('@rodinshrestha/prettier-config/next');

React Native Projects

module.exports = require('@rodinshrestha/prettier-config/react-native');

Laravel Projects

module.exports = require('@rodinshrestha/prettier-config/laravel');

WordPress Projects

module.exports = require('@rodinshrestha/prettier-config/wordpress');

Vanilla JS Projects

module.exports = require('@rodinshrestha/prettier-config/vanilla');

Base Config Only

module.exports = require('@rodinshrestha/prettier-config');

🎨 What's Included

• ✅ Import sorting for all frameworks
• ✅ Tailwind CSS class sorting
• ✅ Laravel Blade syntax support
• ✅ Consistent code style across all projects
• ✅ Framework-specific import order rules

🔧 Extending Configuration

You can extend any config with your own rules:

module.exports = {
  ...require('@rodinshrestha/prettier-config/react'),
  printWidth: 120,
  semi: false,
  // Your custom overrides
};

📋 Base Configuration

{
  semi: true,
  singleQuote: true,
  trailingComma: 'all',
  tabWidth: 2,
  printWidth: 100,
  arrowParens: 'avoid',
  endOfLine: 'lf'
}

🎯 Import Order Examples

React/Next.js

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

import { Button } from 'antd';
import axios from 'axios';

import { Header } from '@/components/Header';
import { utils } from '@/lib/utils';

import { styles } from './styles';
import type { Props } from './types';

React Native

import React from 'react';

import { Text, View } from 'react-native';

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import axios from 'axios';
import { useFonts } from 'expo-font';
import * as SplashScreen from 'expo-splash-screen';

import { Header } from '@/components/Header';

import { styles } from './styles';

Laravel

import { createInertiaApp } from '@inertiajs/vue3';
import axios from 'axios';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';

import { formatDate } from '@/utils/date';

import './bootstrap';

🛠️ VS Code Setup

Add to your .vscode/settings.json:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.organizeImports": "never"
  }
}

📦 Package Scripts

Add to your package.json:

{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

🤝 Contributing

Issues and pull requests are welcome!

📄 License

MIT © Rodin Shrestha

🔗 Links

• npm Package
• GitHub Repository
• Report Issues