Eslint-plugin-react-native-style-order NPM

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.

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.