import-sort-style-tenforce v1.0.71
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)
Install the import-sort plugin in VSC.
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"
}
}
- 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