ESLint Rule for React Native Style Order

This package provides a custom ESLint rule that helps enforce a specific order for style properties in React Native projects. This can help to maintain consistency and readability in your codebase.

Table of Contents

• Installation
• Usage
• Rule Details
• Contributing
• License

Installation

First, you'll need to install ESLint:

npm install eslint --save-dev

Next, install our package:

npm install eslint-plugin-react-native-style-order --save-dev

Note: If you installed ESLint globally (using the -g flag) then you must also install eslint-plugin-react-native-style-order globally.

Usage

Add react-native-style-order to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

{
    "plugins": [
        "react-native-style-order"
    ]
}

Then configure the rules you want to use under the rules section.

Starting from version 1.1.X, this plugin now supports using a predefined order (Inspired by Intellij IDEA's CSS custom order) for style properties. You can choose to use our preferred order in the .eslintrc configuration file:

{
    "rules": {
      "react-native-style-order/sort-style-props": ["warn", {
        "order": "ascending" // or "predefined"
      }]
    }
}

The order property accepts two values: predefined and ascending. If not provided, it defaults to ascending.

Rule Details

This rule enforces a specific order for style properties in React Native StyleSheet declarations.

Examples of incorrect code for this rule:

const styles = StyleSheet.create({
    container: {
        justifyContent: 'center',
        alignItems: 'center',
        flex: 1,
    },
});

Examples of correct code for this rule:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

When ESLint is run, it will report any style properties that are out of order. You can use the --fix option with the ESLint command to automatically fix all issues that this rule can fix.

Contributing

Contributions are always welcome!

License

This project is licensed under the ISC License.