CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-eslint-config-universe

Shared ESLint configs for internal Expo projects providing multiple presets for different environments.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

native-config.mddocs/

React Native Configuration

Specialized ESLint configuration for React Native and Expo projects. Provides React and JSX support, React Native globals, and platform-specific file extension handling for cross-platform development.

Capabilities

Universe Native Configuration

Configuration optimized for React Native and Expo projects with comprehensive React, React Hooks, and platform-specific support.

// Traditional ESLint config (.eslintrc.js)
module.exports = {
  extends: ['universe/native']
};

// Package.json configuration
{
  "eslintConfig": {
    "extends": "universe/native"
  }
}

Configuration Details:

  • Extends core, TypeScript, React, and Prettier configurations
  • Includes React Native globals (DEV, navigator, fetch, etc.)
  • Supports platform-specific file extensions (.android.js, .ios.ts, .web.tsx, etc.)
  • Provides React and React Hooks linting rules
  • Configures import resolution for React Native modules

Flat Configuration Native

ESLint 9+ flat configuration format for React Native projects.

// eslint.config.js
const { defineConfig } = require('eslint/config');
const config = require('eslint-config-universe/flat/native');
module.exports = defineConfig(config);

// Or with ES modules
import { defineConfig } from 'eslint/config';
import config from 'eslint-config-universe/flat/native';
export default defineConfig(config);

Usage Examples:

// Basic React Native project
// .eslintrc.js
module.exports = {
  extends: ['universe/native']
};

// Expo project with custom React rules
// .eslintrc.js
module.exports = {
  extends: ['universe/native'],
  rules: {
    'react/prop-types': 'off', // Often disabled in TypeScript projects
    'react-hooks/exhaustive-deps': 'warn'
  }
};

// Multi-platform project combining native and web
// .eslintrc.js
module.exports = {
  extends: ['universe/native'],
  overrides: [
    {
      files: ['**/*.web.*'],
      env: { browser: true }
    }
  ]
};

React Native Globals

Includes commonly used React Native and Expo globals:

// Available globals (no need to declare)
__DEV__: boolean;           // Development mode flag
ErrorUtils: object;         // React Native error handling
FormData: constructor;      // Form data API
XMLHttpRequest: constructor; // HTTP request API
fetch: function;           // Network request function
navigator: object;         // Navigator API
alert: function;           // Alert dialog
window: object;            // Global window (when available)

// Timer functions
setTimeout: function;
setInterval: function;
clearTimeout: function;
clearInterval: function;
setImmediate: function;
clearImmediate: function;

// Animation functions
requestAnimationFrame: function;
cancelAnimationFrame: function;
requestIdleCallback: function;
cancelIdleCallback: function;

Platform-Specific Extensions

Supports React Native and Expo platform-specific file extensions:

// Base extensions
.js, .jsx, .ts, .tsx, .d.ts

// Platform-specific extensions (computed automatically)
.android.js, .android.jsx, .android.ts, .android.tsx
.ios.js, .ios.jsx, .ios.ts, .ios.tsx
.web.js, .web.jsx, .web.ts, .web.tsx
.native.js, .native.jsx, .native.ts, .native.tsx

// Expo-specific extensions
.expo.js, .expo.jsx, .expo.ts, .expo.tsx
.expo.android.js, .expo.ios.ts, .expo.web.jsx
// ... and all other combinations

React and JSX Rules

React Component Rules

// JSX formatting and structure
'react/jsx-boolean-value': ['warn', 'never']
'react/jsx-closing-bracket-location': ['warn', { nonEmpty: 'after-props', selfClosing: 'tag-aligned' }]
'react/jsx-curly-brace-presence': ['warn', 'never']
'react/jsx-first-prop-new-line': ['warn', 'multiline']
'react/jsx-indent': ['warn', 2]
'react/jsx-wrap-multilines': 'warn'

// Component best practices
'react/no-access-state-in-setstate': 'warn'
'react/no-did-mount-set-state': 'warn'
'react/no-direct-mutation-state': 'warn'
'react/self-closing-comp': 'warn'
'react/require-render-return': 'warn'

React Hooks Rules

// Hooks rules
'react-hooks/rules-of-hooks': 'error'        // Enforce hooks rules
'react-hooks/exhaustive-deps': 'off'         // Disabled by default for flexibility

Import Resolution

Configured for React Native module resolution:

// Import settings
settings: {
  'import/extensions': ['.js', '.jsx', '.ts', '.tsx', '.android.js', '.ios.ts', /* ... all platform extensions */],
  'import/resolver': {
    node: { extensions: [/* all supported extensions */] }
  },
  'import/ignore': [
    'node_modules[\\\/]+@?react-native' // Ignore Flow-based react-native modules
  ]
}

Web File Overrides

Special handling for web-specific files in React Native projects:

// Traditional config
overrides: [
  {
    files: ['*.web.*'],
    env: { browser: true }
  }
]

// Flat config
{
  files: ['**/*.web.*'],
  languageOptions: {
    globals: { ...globals.browser }
  }
}

This ensures that .web.js, .web.ts, and similar files receive appropriate browser environment settings while maintaining React Native settings for other platform files.

Install with Tessl CLI

npx tessl i tessl/npm-eslint-config-universe

docs

basic-config.md

extension-utilities.md

index.md

native-config.md

node-config.md

typescript-analysis.md

web-config.md

tile.json