Skip to main content

New Recipe

Enforcing JS/TS Import Order

Published on February 29th, 2024 by Mark Rickert

View recipe

Latest Ignite Release

View on Github

Proven Recipes for your React Native apps

Starting from scratch doesn’t always make sense. That’s why we made the Ignite Cookbook for React Native – an easy way for developers to browse and share code snippets (or “recipes”) that actually work.

Spin Up Your App In Record Time

Stop reinventing the wheel on every project. Use the Ignite CLI to get your app started. Then, hop over to the Ignite Cookbook for React Native to browse for things like libraries in “cookie cutter” templates that work for almost any project. It’s the fastest way to get a React Native app off the ground.

Animation ImageAnimation ImageAnimation ImageAnimation ImageAnimation ImageAnimation Image

Find Quality Code When You Need It

The popular forum sites are great for finding code until you realize it’s based on an old version of React Native. Ignite Cookbook is a place for recipes that work as of the time they’re published – meaning, it worked when it was posted. And if it ever goes out of date, we’ll make sure the community knows on what version it was last working.

npx ignite-cli new PizzaApp --workflow=cng --yes
cd PizzaApp

yarn add --dev @serverless-guru/prettier-plugin-import-order

// @ts-check
/** @type {import("@serverless-guru/prettier-plugin-import-order").PrettierConfig} */
module.exports = {
  // begin: settings from the package.json file
  printWidth: 100,
  semi: false,
  singleQuote: false,
  trailingComma: "all",
  // end: settings from the package.json file

  // Sort and group imports using the @serverless-guru/prettier-import-order plugin.
  // https://github.com/serverless-guru/prettier-import-order
  //
  // See documentation and usage: https://www.npmjs.com/package/@serverless-guru/prettier-plugin-import-order#usage
  importOrder: [
    "^react(-native)?$", // React and react-native stuff goes at the top
    "", // use empty strings to separate groups with empty lines
    "<THIRD_PARTY_MODULES>", // Third party modules (this is a plugin keyword)
    "",
    "^app/(.*)$",
    "",
    "^../(.*)$", // Local imports in parent directories
    "^./(.*)$", // Local imports in current directory
  ],
  importOrderSeparation: false, // turn this on to see the sorting groups.
  importOrderSortIndividualImports: true,
  importOrderMergeDuplicateImports: true,
  importOrderTypeImportsToTop: true, // Set this to false if you want type imports to be sorted with the rest of the imports
  importOrderCaseInsensitive: true,
  importOrderParserPlugins: ["typescript", "jsx"],
  // End sort options
}

yarn format

updated 31 seconds ago
Animation Image

Backed By A Community of React Native Experts

The Ignite Cookbook isn’t just a random group of code snippets. It’s a curated collection of usable code samples that the Infinite Red team’s used in their own React Native projects. Having worked with some of the biggest clients in the tech industry, we know a thing or two about keeping our code to a high standard. You can code confidently!

Animation ImageAnimation ImageAnimation ImageAnimation ImageAnimation ImageAnimation ImageAnimation ImageAnimation ImageAnimation ImageAnimation ImageAnimation Image