vsc-organize-imports v0.1.5
vsc-organize-imports
The is an vscode extension.
The project's organize imports in ts/js files alphabetical. It don't change format for single/multi-line imports. It don't removes comments. (except inner comment, when order named are activated)
Usage
By default it will organize your imports on save.
If "Format on save" is disabled, you can use the keybinding (Be default ctrl+alt+o) or run the command manual:
- Open Visual Studio Code's command bar (ctrl+shift+p)
- Write: 'vsc Organize Imports'
- Press Enter to execute the organize
Extension Settings
Format On Save
Run vsc-organize-imports on save
All options is defined in the package.json
Only option in vscode settings is 'Format On Save', all other is now defined in package.json:
The option model is defined in the package.json file.
Base options:
orderSpecifiers: true | false
Sort named imports:
import {a, b, c} from 'module'
orderSpecifiersAsSingleLine: true | false
baseUrl: string (normally: "src")
emptyLinesAfterImports: number (normally 1 or 2)
emptyLinesBetweenFilledGroups: number (normally 1 or 2)
Group options:
Groups can be defined (from the base-groups)
Groups has 3 options: (This extension finds base-groups, but they are joined into the groups the defined in package.json)
sortBy: "path" | "name"
emptyLines: true | false
groups: list of base-group names
The base-group are: "globalDirect", "global", "absoluteDirect", "absolute", "relativeDirect" and "relative"
//globalDirect:
import '@storybook/theme'
//globalWithNamed:
import React from 'react'
import { ReactNode } from 'react'
import React, { ReactNode } from 'react'
import * as ts from 'typescript'
//absoluteDirect
import 'module/style.css'
//absoluteWithNamed
import module from 'module/myModule'
import module from 'module/myModule.ts'
import { module } from 'module/myModule'
import module, { moduleProp } from 'module/myModule'
//relativeDirect
import '../../module/style.css'
import './module/style.css'
//relativeWithNamed
import module from '../module/myModule'
import module from './module/myModule.ts'
import { module } from '../module/myModule'
import { module } from './module/myModule'
import module, { moduleProp } from './module/myModule'
import module, { moduleProp } from '../module/myModule'
Sort by name:
Example of one defined group containing all base-groups and sorted by name
// direct import comes first, and are sorted by path
import './../Home/Home.module.scss'
import './Home.module.scss'
// sort by names/alias used in the file, meaning alias names are use here (in this case _A)
import { Action as _A, Dispatch as I2 } from 'redux'
// Default name are used if the import has it (in this case a)
import a from './../Home/Home.module.scss'
// namespace imports uses the alias name (In this case AAA)
import * as Aaa from 'vsc-base'
// Default name are used, ignoring the named imports (In this case B)
import B, { FC as A } from 'react'
// The first named import (or its alias) are used if no default name (in this case connect)
import { connect, Action as DAction } from 'react-redux'
import { HomeActionType } from 'modules/home/Home.redux'
import styles from './Home.module.scss'
package.json:
"vsc-organize-imports": {
"orderSpecifiers": true,
"orderSpecifiersAsSingleLine": true,
"baseUrl": "src",
"emptyLinesAfterImports": 1,
"emptyLinesBetweenFilledGroups": 1,
"groups": [
{
"groups": [
"global"
],
"sortBy": "path",
"emptyLines": true
},
{
"groups": [
"absolute"
],
"sortBy": "path",
"emptyLines": true
},
{
"groups": [
"relative"
],
"sortBy": "path",
"emptyLines": true
},
{
"groups": [
"globalDirect",
"absoluteDirect",
"relativeDirect"
],
"sortBy": "path",
"emptyLines": true
}
]
}
Links and related projects
This extension is build with vsc-base.
The source code is find in vsc-base mono-respo: source-code
Links
mono-respo: source-code
vsc-base: npm-module
vsc-base.org: documentation
vsc-script: vscode-extension
vsc-scaffolding: vscode-extension
5 years ago