ESLint plugin for React Native Unistyles

React Native Unistyles linting rules for ESLint. This repository is structured like (and contains code from) eslint-plugin-react-native.

Supported Versions

This plugin only supports Unistyles v2 for now, v3 support will be added once v3 is stable and out of beta

Installation

Install eslint-plugin-react-native-unistyles

yarn add eslint-plugin-react-native-unistyles -D

Configuration

Add plugins section and specify react-native-unistyles as a plugin.

{
  "plugins": ["react-native-unistyles"]
}

If it is not already the case you must also configure ESLint to support JSX.

{
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  }
}

Then, enable all of the rules that you would like to use.

{
  "rules": {
    "react-native-unistyles/no-unused-styles": "warn",
    "react-native-unistyles/sort-styles": [
      "warn",
      "asc",
      { "ignoreClassNames": false, "ignoreStyleProperties": false }
    ],
  }
}

List of supported rules

• no-unused-styles: Detect createStyleSheet styles which are not used in your React components
• sort-styles: Detect createStyleSheet styles which are not in correct sort order

Shareable configurations

All

This plugin also exports an all configuration that includes every available rule.

{
  "plugins": [
    /* ... */
    "react-native-unistyles"
  ],
  "extends": [/* ... */, "plugin:react-native-unistyles/all"]
}

Note: These configurations will import eslint-plugin-react-native-unistyles and enable JSX in parser options.