import-sort-style-tenforce

Tenforce's import style for import-sort. Based on import-sort-style-renke.

This is intended to be used as a custom style in conjuction with the import-sort library.

Setup guide

Add "import-sort-style-tenforce" as a (dev)dependency to your project (by inserting it in package.json) or adding it directly with:

yarn add import-sort-style-tenforce --dev

or

npm i import-sort-style-tenforce --save-dev

Using import-sort

In Visual Studio Code (as a plugin)

1. Install the import-sort plugin in VSC.

2. Configure the plugin by adding the following code snippet in your package.json

    "importSort": {
        ".js, .jsx, .es6, .es, .mjs, .ts, .tsx": {
            "parser": "babylon",
            "style": "tenforce"
        }
    }

3. Done! The sorting gets triggered when hitting save or you can call it manually by selecting the "Sort imports" command (ctrl+shift+P). To save a file without sorting the imports select the "Save file without sorting imports" command.

Command Line

You can modify files and sort their imports automatically via the command line with the help of import-sort-cli.

Instructions (from the creator)

Sort your imports from the command line. Useful to sort all your files in bulk or from a script in your package.json.

Install it with npm install --save-dev import-sort-cli or use it directly with npx import-sort-cli.

ATTENTION: Since version 4 --write modifies file in-place. The old --overwrite flag was removed. The CLI now behaves closer to prettier's CLI. Also, the exit code is now 0 even when unsorted were sorted (unless --list-different is used.)

Usage: import-sort [OPTION]... [FILE/GLOB]...

Options:
  --list-different, -l  Print the names of files that are not sorted.  [boolean]
  --write               Edit files in-place.                           [boolean]
  --with-node-modules   Process files inside 'node_modules' directory..[boolean]
  --version, -v         Show version number                            [boolean]
  --help, -h            Show help                                      [boolean]

Tip: To sort the imports in all .ts/.tsx files in your project run:

(npx) import-sort-cli --write "./**/*.ts{,x}"

How it works

The imports are grouped and later sorted within those groups. New lines are added between certain groups.

Note: Global imports are imports outside the current page, local imports are inside it

The ordering and categorizing is as follows:

• Absolute modules that aren't from tenforce and have no member

  import "Something"

New line

• Absolute modules (not from tenforce) that have a namespace or default member

  import React from "react"

New line

• Tenforce modules

  import { Action, ActionType } from "@tenforce/toolbox-button-push-react"

New line

• Relative global imports that are not .tsx files and have no member

  import "../../../Defaults.scss"

• Relative global imports that are not .tsx files

  import GlobalState from "../../../redux/global"

New line

• Relative (local) imports that are not .tsx files and have no member

  import "./Page.scss"

• Relative (local) imports that are not .tsx files

  import actions from "../../actions"

New line

• Relative global imports (.tsx)

  import GridItem from "../../../components/widgets/components/GridItem"

• Relative local imports (.tsx)

  import List from "../List.tsx"

New line