Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@trivago/prettier-plugin-sort-imports

Package Overview
Dependencies
Maintainers
4
Versions
36
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@trivago/prettier-plugin-sort-imports - npm Package Compare versions

Comparing version 3.0.0-2 to 3.0.0

CHANGELOG.md

9

lib/src/index.js

@@ -19,11 +19,2 @@ "use strict";

var options = {
experimentalBabelParserPluginsList: {
type: 'path',
category: 'Global',
array: true,
// By default, we add ts and jsx as parsers but if users define something
// we take that option
default: [{ value: ['typescript', 'jsx'] }],
description: 'Deprecated! Please use `importOrderParserPlugins` to provide a list of parser plugins for special syntax.',
},
importOrder: {

@@ -30,0 +21,0 @@ type: 'path',

3

lib/src/preprocessor.js

@@ -15,7 +15,6 @@ "use strict";

var importOrderParserPlugins = options.importOrderParserPlugins, importOrder = options.importOrder, importOrderCaseInsensitive = options.importOrderCaseInsensitive, importOrderSeparation = options.importOrderSeparation, importOrderSortSpecifiers = options.importOrderSortSpecifiers;
var parsedParserPlugins = get_experimental_parser_plugins_1.getExperimentalParserPlugins(importOrderParserPlugins);
var importNodes = [];
var parserOptions = {
sourceType: 'module',
plugins: parsedParserPlugins,
plugins: get_experimental_parser_plugins_1.getExperimentalParserPlugins(importOrderParserPlugins),
};

@@ -22,0 +21,0 @@ var ast = parser_1.parse(code, parserOptions);

"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var parser_1 = require("@babel/parser");
var traverse_1 = __importDefault(require("@babel/traverse"));
var types_1 = require("@babel/types");
var get_all_comments_from_nodes_1 = require("../get-all-comments-from-nodes");
var get_sorted_nodes_1 = require("../get-sorted-nodes");
var get_import_nodes_1 = require("../get-import-nodes");
var getSortedImportNodes = function (code, options) {
var importNodes = [];
var ast = parser_1.parse(code, __assign(__assign({}, options), { sourceType: 'module' }));
traverse_1.default(ast, {
ImportDeclaration: function (path) {
var tsModuleParent = path.findParent(function (p) {
return types_1.isTSModuleDeclaration(p);
});
if (!tsModuleParent) {
importNodes.push(path.node);
}
},
});
var importNodes = get_import_nodes_1.getImportNodes(code, options);
return get_sorted_nodes_1.getSortedNodes(importNodes, {

@@ -36,0 +9,0 @@ importOrder: [],

"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var prettier_1 = require("prettier");
var parser_1 = require("@babel/parser");
var traverse_1 = __importDefault(require("@babel/traverse"));
var types_1 = require("@babel/types");
var get_code_from_ast_1 = require("../get-code-from-ast");
var get_sorted_nodes_1 = require("../get-sorted-nodes");
var getImportNodes = function (code, options) {
var importNodes = [];
var ast = parser_1.parse(code, __assign(__assign({}, options), { sourceType: 'module' }));
traverse_1.default(ast, {
ImportDeclaration: function (path) {
var tsModuleParent = path.findParent(function (p) {
return types_1.isTSModuleDeclaration(p);
});
if (!tsModuleParent) {
importNodes.push(path.node);
}
},
});
return importNodes;
};
var get_import_nodes_1 = require("../get-import-nodes");
test('it sorts imports correctly', function () {
var code = "// first comment\n// second comment\nimport z from 'z';\nimport c from 'c';\nimport g from 'g';\nimport t from 't';\nimport k from 'k';\nimport a from 'a';\n";
var importNodes = getImportNodes(code);
var importNodes = get_import_nodes_1.getImportNodes(code);
var sortedNodes = get_sorted_nodes_1.getSortedNodes(importNodes, {

@@ -42,0 +11,0 @@ importOrder: [],

"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var parser_1 = require("@babel/parser");
var traverse_1 = __importDefault(require("@babel/traverse"));
var types_1 = require("@babel/types");
var get_import_nodes_1 = require("../get-import-nodes");
var get_sorted_nodes_1 = require("../get-sorted-nodes");
var get_sorted_nodes_modules_names_1 = require("../get-sorted-nodes-modules-names");
var get_sorted_nodes_names_1 = require("../get-sorted-nodes-names");
var code = "// first comment\n// second comment\nimport z from 'z';\nimport c, { cD } from 'c';\nimport g from 'g';\nimport { tC, tA, tB } from 't';\nimport k, { kE, kB } from 'k';\nimport * as a from 'a';\nimport BY from 'BY';\nimport Ba from 'Ba';\nimport XY from 'XY';\nimport Xa from 'Xa';\n";
var getImportNodes = function (code, options) {
var importNodes = [];
var ast = parser_1.parse(code, __assign(__assign({}, options), { sourceType: 'module' }));
traverse_1.default(ast, {
ImportDeclaration: function (path) {
var tsModuleParent = path.findParent(function (p) {
return types_1.isTSModuleDeclaration(p);
});
if (!tsModuleParent) {
importNodes.push(path.node);
}
},
});
return importNodes;
};
var getSortedNodesNames = function (imports) {
return imports
.filter(function (i) { return i.type === 'ImportDeclaration'; })
.map(function (i) { return i.source.value; });
}; // TODO: get from specifier
var getSortedNodesModulesNames = function (modules) {
return modules
.filter(function (m) {
return [
'ImportSpecifier',
'ImportDefaultSpecifier',
'ImportNamespaceSpecifier',
].includes(m.type);
})
.map(function (m) { return m.local.name; });
}; // TODO: get from specifier
test('it returns all sorted nodes', function () {
var result = getImportNodes(code);
var result = get_import_nodes_1.getImportNodes(code);
var sorted = get_sorted_nodes_1.getSortedNodes(result, {

@@ -61,20 +16,6 @@ importOrder: [],

});
expect(sorted).toMatchSnapshot();
expect(getSortedNodesNames(sorted)).toEqual([
'BY',
'Ba',
'XY',
'Xa',
'a',
'c',
'g',
'k',
't',
'z',
]);
expect(get_sorted_nodes_names_1.getSortedNodesNames(sorted)).toEqual(['BY', 'Ba', 'XY', 'Xa', 'a', 'c', 'g', 'k', 't', 'z']);
expect(sorted
.filter(function (node) { return node.type === 'ImportDeclaration'; })
.map(function (importDeclaration) {
return getSortedNodesModulesNames(importDeclaration.specifiers);
})).toEqual([
.map(function (importDeclaration) { return get_sorted_nodes_modules_names_1.getSortedNodesModulesNames(importDeclaration.specifiers); })).toEqual([
['BY'],

@@ -93,3 +34,3 @@ ['Ba'],

test('it returns all sorted nodes case-insensitive', function () {
var result = getImportNodes(code);
var result = get_import_nodes_1.getImportNodes(code);
var sorted = get_sorted_nodes_1.getSortedNodes(result, {

@@ -101,20 +42,6 @@ importOrder: [],

});
expect(sorted).toMatchSnapshot();
expect(getSortedNodesNames(sorted)).toEqual([
'a',
'Ba',
'BY',
'c',
'g',
'k',
't',
'Xa',
'XY',
'z',
]);
expect(get_sorted_nodes_names_1.getSortedNodesNames(sorted)).toEqual(['a', 'Ba', 'BY', 'c', 'g', 'k', 't', 'Xa', 'XY', 'z']);
expect(sorted
.filter(function (node) { return node.type === 'ImportDeclaration'; })
.map(function (importDeclaration) {
return getSortedNodesModulesNames(importDeclaration.specifiers);
})).toEqual([
.map(function (importDeclaration) { return get_sorted_nodes_modules_names_1.getSortedNodesModulesNames(importDeclaration.specifiers); })).toEqual([
['a'],

@@ -133,3 +60,3 @@ ['Ba'],

test('it returns all sorted nodes with sort order', function () {
var result = getImportNodes(code);
var result = get_import_nodes_1.getImportNodes(code);
var sorted = get_sorted_nodes_1.getSortedNodes(result, {

@@ -141,20 +68,6 @@ importOrder: ['^a$', '^t$', '^k$', '^B'],

});
expect(sorted).toMatchSnapshot();
expect(getSortedNodesNames(sorted)).toEqual([
'XY',
'Xa',
'c',
'g',
'z',
'a',
't',
'k',
'BY',
'Ba',
]);
expect(get_sorted_nodes_names_1.getSortedNodesNames(sorted)).toEqual(['XY', 'Xa', 'c', 'g', 'z', 'a', 't', 'k', 'BY', 'Ba']);
expect(sorted
.filter(function (node) { return node.type === 'ImportDeclaration'; })
.map(function (importDeclaration) {
return getSortedNodesModulesNames(importDeclaration.specifiers);
})).toEqual([
.map(function (importDeclaration) { return get_sorted_nodes_modules_names_1.getSortedNodesModulesNames(importDeclaration.specifiers); })).toEqual([
['XY'],

@@ -173,3 +86,3 @@ ['Xa'],

test('it returns all sorted nodes with sort order case-insensitive', function () {
var result = getImportNodes(code);
var result = get_import_nodes_1.getImportNodes(code);
var sorted = get_sorted_nodes_1.getSortedNodes(result, {

@@ -181,20 +94,6 @@ importOrder: ['^a$', '^t$', '^k$', '^B'],

});
expect(sorted).toMatchSnapshot();
expect(getSortedNodesNames(sorted)).toEqual([
'c',
'g',
'Xa',
'XY',
'z',
'a',
't',
'k',
'Ba',
'BY',
]);
expect(get_sorted_nodes_names_1.getSortedNodesNames(sorted)).toEqual(['c', 'g', 'Xa', 'XY', 'z', 'a', 't', 'k', 'Ba', 'BY']);
expect(sorted
.filter(function (node) { return node.type === 'ImportDeclaration'; })
.map(function (importDeclaration) {
return getSortedNodesModulesNames(importDeclaration.specifiers);
})).toEqual([
.map(function (importDeclaration) { return get_sorted_nodes_modules_names_1.getSortedNodesModulesNames(importDeclaration.specifiers); })).toEqual([
['c', 'cD'],

@@ -213,3 +112,3 @@ ['g'],

test('it returns all sorted import nodes with sorted import specifiers', function () {
var result = getImportNodes(code);
var result = get_import_nodes_1.getImportNodes(code);
var sorted = get_sorted_nodes_1.getSortedNodes(result, {

@@ -221,20 +120,6 @@ importOrder: ['^a$', '^t$', '^k$', '^B'],

});
expect(sorted).toMatchSnapshot();
expect(getSortedNodesNames(sorted)).toEqual([
'XY',
'Xa',
'c',
'g',
'z',
'a',
't',
'k',
'BY',
'Ba',
]);
expect(get_sorted_nodes_names_1.getSortedNodesNames(sorted)).toEqual(['XY', 'Xa', 'c', 'g', 'z', 'a', 't', 'k', 'BY', 'Ba']);
expect(sorted
.filter(function (node) { return node.type === 'ImportDeclaration'; })
.map(function (importDeclaration) {
return getSortedNodesModulesNames(importDeclaration.specifiers);
})).toEqual([
.map(function (importDeclaration) { return get_sorted_nodes_modules_names_1.getSortedNodesModulesNames(importDeclaration.specifiers); })).toEqual([
['XY'],

@@ -253,3 +138,3 @@ ['Xa'],

test('it returns all sorted import nodes with sorted import specifiers with case-insensitive ', function () {
var result = getImportNodes(code);
var result = get_import_nodes_1.getImportNodes(code);
var sorted = get_sorted_nodes_1.getSortedNodes(result, {

@@ -261,20 +146,6 @@ importOrder: ['^a$', '^t$', '^k$', '^B'],

});
expect(sorted).toMatchSnapshot();
expect(getSortedNodesNames(sorted)).toEqual([
'c',
'g',
'Xa',
'XY',
'z',
'a',
't',
'k',
'Ba',
'BY',
]);
expect(get_sorted_nodes_names_1.getSortedNodesNames(sorted)).toEqual(['c', 'g', 'Xa', 'XY', 'z', 'a', 't', 'k', 'Ba', 'BY']);
expect(sorted
.filter(function (node) { return node.type === 'ImportDeclaration'; })
.map(function (importDeclaration) {
return getSortedNodesModulesNames(importDeclaration.specifiers);
})).toEqual([
.map(function (importDeclaration) { return get_sorted_nodes_modules_names_1.getSortedNodesModulesNames(importDeclaration.specifiers); })).toEqual([
['c', 'cD'],

@@ -293,3 +164,3 @@ ['g'],

test('it returns all sorted nodes with custom third party modules', function () {
var result = getImportNodes(code);
var result = get_import_nodes_1.getImportNodes(code);
var sorted = get_sorted_nodes_1.getSortedNodes(result, {

@@ -301,15 +172,3 @@ importOrder: ['^a$', '<THIRD_PARTY_MODULES>', '^t$', '^k$'],

});
expect(sorted).toMatchSnapshot();
expect(getSortedNodesNames(sorted)).toEqual([
'a',
'Ba',
'BY',
'c',
'g',
'Xa',
'XY',
'z',
't',
'k',
]);
expect(get_sorted_nodes_names_1.getSortedNodesNames(sorted)).toEqual(['a', 'Ba', 'BY', 'c', 'g', 'Xa', 'XY', 'z', 't', 'k']);
});
"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __spreadArray = (this && this.__spreadArray) || function (to, from) {

@@ -18,31 +7,11 @@ for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)

};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var prettier_1 = require("prettier");
var parser_1 = require("@babel/parser");
var traverse_1 = __importDefault(require("@babel/traverse"));
var types_1 = require("@babel/types");
var get_all_comments_from_nodes_1 = require("../get-all-comments-from-nodes");
var get_sorted_nodes_1 = require("../get-sorted-nodes");
var remove_nodes_from_original_code_1 = require("../remove-nodes-from-original-code");
var getImportNodes = function (code, options) {
var importNodes = [];
var ast = parser_1.parse(code, __assign(__assign({}, options), { sourceType: 'module' }));
traverse_1.default(ast, {
ImportDeclaration: function (path) {
var tsModuleParent = path.findParent(function (p) {
return types_1.isTSModuleDeclaration(p);
});
if (!tsModuleParent) {
importNodes.push(path.node);
}
},
});
return importNodes;
};
var get_import_nodes_1 = require("../get-import-nodes");
var code = "// first comment\n// second comment\nimport z from 'z';\nimport c from 'c';\nimport g from 'g';\nimport t from 't';\nimport k from 'k';\n// import a from 'a';\n // import a from 'a';\nimport a from 'a';\n";
test('it should remove nodes from the original code', function () {
var importNodes = getImportNodes(code);
var importNodes = get_import_nodes_1.getImportNodes(code);
var sortedNodes = get_sorted_nodes_1.getSortedNodes(importNodes, {

@@ -49,0 +18,0 @@ importOrder: [],

@@ -9,3 +9,2 @@ "use strict";

* @param node Import declaration node
* TODO: For @ayusharma- Add unit tests
*/

@@ -12,0 +11,0 @@ var getSortedImportSpecifiers = function (node) {

{
"name": "@trivago/prettier-plugin-sort-imports",
"version": "3.0.0-2",
"version": "3.0.0",
"description": "A prettier plugins to sort imports in provided RegEx order",

@@ -12,3 +12,5 @@ "main": "lib/src/index.js",

"scripts": {
"prepare": "yarn run compile",
"compile": "tsc",
"preexample": "yarn run compile",
"example": "prettier --config .prettierrc --plugin lib/src/index.js",

@@ -15,0 +17,0 @@ "test": "jest -i",

# Prettier plugin sort imports
A prettier plugin to sort import declarations by provided RegEx order.
![npm](https://img.shields.io/npm/v/@trivago/prettier-plugin-sort-imports)
![NPM Downloads](https://img.shields.io/npm/dw/@trivago/prettier-plugin-sort-imports)
A prettier plugin to sort import declarations by provided Regular Expression order.
**Note: If you are migrating from v2.x.x to v3.x.x, [Please Read Migration Guidelines](./docs/MIGRATION.md)**
### Input
![input](./public/images/input.png)
![input](./public/images/input-v3-1.png)
### Output
![output](./public/images/output.png)
![output](./public/images/output-v3-1.png)

@@ -26,2 +31,5 @@

**Note: If you are migrating from v2.x.x to v3.x.x, [Please Read Migration Guidelines](./docs/MIGRATION.md)**
### Usage

@@ -37,7 +45,6 @@

"singleQuote": true,
"jsxBracketSameLine": true,
"semi": true,
"importOrder": ["^@core/(.*)$", "^@server/(.*)$", "^@ui/(.*)$", "^[./]"],
"importOrderSeparation": true,
"importOrderCaseInsensitive": true,
"importOrderSortSpecifiers": true
}

@@ -48,146 +55,109 @@ ```

#### `importOrder`
A collection of:
- Regular expressions in string format. The plugin
uses [`new RegExp`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp)
to evaluate regular expression. E.g. `node.source.value.match(new RegExp(val))` Here, `val`
is the string provided in import order.
- Special words (optional):
- `<THIRD_PARTY_MODULES>` - marks the position between RegExps, where the not matched imports will be placed. By default, it's the top position (above all the groups in `importOrder`).
#### **`importOrder`**
#### `importOrderCaseInsensitive`
A boolean value to enable case-insensitivity in the sorting algorithm
used to order imports within each match group.
**type**: `Array<string>`
For example, when false (or not specified):
A collection of Regular expressions in string format.
```ecmascript 6
import ExampleView from './ExampleView';
import ExamplesList from './ExamplesList';
```
"importOrder": ["^@core/(.*)$", "^@server/(.*)$", "^@ui/(.*)$", "^[./]"],
```
compared with `"importOrderCaseInsensitive": true`:
```ecmascript 6
import ExamplesList from './ExamplesList';
import ExampleView from './ExampleView';
_Default behavior:_ The plugin moves the third party imports to the top which are not part of the `importOrder` list.
To move the third party imports at desired place, you can use `<THIRD_PARTY_MODULES>` to assign third party imports to the appropriate position:
```
"importOrder": ["^@core/(.*)$", "<THIRD_PARTY_MODULES>", "^@server/(.*)$", "^@ui/(.*)$", "^[./]"],
```
#### `importOrderSeparation`
A boolean value to enable or disable the new line separation
between sorted import declarations. The separation takes place according to `importOrder`.
#### `importOrderSortSpecifiers`
A boolean value to enable or disable sorting of the imports module declarations.
It is disabled by default
**type**: `boolean`
#### `importOrderParserPlugins`
A collection of parser names for babel parser. The plugin passes this list to babel parser so it can understand the syntaxes used in the file being formatted. The plugin uses prettier itself to figure out the parser it needs to use but if that fails, you can use this field to enforce the usage of the plugins babel needs.
**default value**: `false`
Since prettier options are limited to strings, you can pass plugins with options as a JSON string of the plugin array: `"[\"plugin-name\", { \"pluginOption\": true }]"`.
A boolean value to enable or disable the new line separation
between sorted import declarations group. The separation takes place according to the `importOrder`.
```ecmascript 6
module.exports = {
"printWidth": 80,
"tabWidth": 4,
"trailingComma": "all",
"singleQuote": true,
"jsxBracketSameLine": true,
"semi": true,
"importOrder": ["^@core/(.*)$", "^@server/(.*)$", "^@ui/(.*)$", "^[./]"],
"importOrderSeparation": true,
"importOrderCaseInsensitive": true,
"importOrderParserPlugins" : ["jsx", "typescript", "[\"decorators\", { \"decoratorsBeforeExport\": true }]"]
}
```
"importOrderSeparation": true,
```
#### `importOrderSortSpecifiers`
### How does import sort work ?
**type**: `boolean`
The plugin extracts the imports which are defined in `importOrder`.
These imports are _local imports_. The imports which are not part of the
`importOrder` is considered as _3rd party imports_.
**default value:** `false`
After, the plugin sorts the _local imports_ and _3rd party imports_ using
A boolean value to enable or disable sorting of the specifiers in an import declarations.
[natural sort algorithm](https://en.wikipedia.org/wiki/Natural_sort_order).
In the end, the plugin returns final imports with _3rd party imports_ on top and _local imports_ at the end.
#### `importOrderCaseInsensitive`
The _3rd party imports_ position (it's top by default) can be overrided using the `<THIRD_PARTY_MODULES>` special word.
**type**: `boolean`
### FAQ / Troubleshooting
**default value**: `false`
#### Q. How can I add the RegEx imports in the `importOrder` list ?
You can define the RegEx in the `importOrder`. For
example if you want to sort the following imports:
```ecmascript 6
import React from 'react';
import classnames from 'classnames';
import z from '@server/z';
import a from '@server/a';
import s from './';
import p from '@ui/p';
import q from '@ui/q';
```
then the `importOrder` would be `["^@ui/(.*)$","^@server/(.*)$", '^[./]']`.
Now, the final output would be as follows:
A boolean value to enable case-insensitivity in the sorting algorithm
used to order imports within each match group.
For example, when false (or not specified):
```ecmascript 6
import classnames from 'classnames';
import React from 'react';
import p from '@ui/p';
import q from '@ui/q';
import a from '@server/a';
import z from '@server/z';
import s from './';
import ExampleView from './ExampleView';
import ExamplesList from './ExamplesList';
```
#### Q. How can I move `react` and `classnames` to place between my RegEx imports without hardcoding?
You can define the `<THIRD_PARTY_MODULES>` special word in the `importOrder`. For example above, the `importOrder` would be like `["^@ui/(.*)$", "^@server/(.*)$", "<THIRD_PARTY_MODULES>", '^[./]']`.
Now, the final output would be as follows:
compared with `"importOrderCaseInsensitive": true`:
```ecmascript 6
import p from '@ui/p';
import q from '@ui/q';
import a from '@server/a';
import z from '@server/z';
import classnames from 'classnames';
import React from 'react';
import s from './';
import ExamplesList from './ExamplesList';
import ExampleView from './ExampleView';
```
#### Q. How can I run examples in this project ?
There is a _examples_ directory. The examples file can be formatted by using
`npm run example` command.
#### `importOrderParserPlugins`
**type**: `Array<string>`
```shell script
npm run example examples/example.tsx
```
**default value**: `["typescript", "jsx"]`
#### Q. How to use the plugin with `*.d.ts` files ?
The plugin automatically ignores the `*.d.ts` files. We encourage you to declare the `*.d.ts` files in `.prettierignore`. [Read more here](https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore).
Previously known as `experimentalBabelParserPluginsList`.
#### Q. How does the plugin handle the first comment in the file.
The plugin keeps the first comment as it is in the file. The plugin also removes the new lines in between first comment and the first import.
**input:**
```js
// comment
A collection of plugins for babel parser. The plugin passes this list to babel parser, so it can understand the syntaxes
used in the file being formatted. The plugin uses prettier itself to figure out the parser it needs to use but if that fails,
you can use this field to enforce the usage of the plugins' babel parser needs.
import a from 'a'
**To pass the plugins to babel parser**:
```
**output:**
```js
// comment
import a from 'a'
"importOrderParserPlugins" : ["classProperties", "decorators-legacy"]
```
#### Q. I'm getting error about experimental syntax.
If you are using some experimental syntax and the plugin has trouble parsing your files, you might getting errors similar to this:
```shell script
SyntaxError: This experimental syntax requires enabling one of the following parser plugin(s): ...
**To pass the options to the babel parser plugins**: Since prettier options are limited to string, you can pass plugins
with options as a JSON string of the plugin array:
`"[\"plugin-name\", { \"pluginOption\": true }]"`.
```
To solve this issue, you can use the new option `importOrderParserPlugins` in your `.prettierrc` and pass an array of plugin names to be used.
"importOrderParserPlugins" : ["classProperties", "[\"decorators\", { \"decoratorsBeforeExport\": true }]"]
```
**To disable default plugins for babel parser, pass an empty array**:
```
importOrderParserPlugins: []
```
### How does import sort work ?
The plugin extracts the imports which are defined in `importOrder`. These imports are considered as _local imports_.
The imports which are not part of the `importOrder` is considered as _third party imports_.
After, the plugin sorts the _local imports_ and _third party imports_ using [natural sort algorithm](https://en.wikipedia.org/wiki/Natural_sort_order).
In the end, the plugin returns final imports with _third party imports_ on top and _local imports_ at the end.
The _third party imports_ position (it's top by default) can be overridden using the `<THIRD_PARTY_MODULES>` special word in the `importOrder`.
### FAQ / Troubleshooting
Having some trouble or an issue ? You can check [FAQ / Troubleshooting section](./docs/TROUBLESHOOTING.md).
### Compatibility

@@ -199,12 +169,16 @@ | Framework | Supported | Note |

| React | ✅ Everything | - |
| Angular | 🔜 Experimental features are not supported | To be supported in v3.x.x, coming soon 😉 |
| Vue | ❌ Not supported | Any contribution is welcome. |
| Svelte | ❌ Not supported | Any contribution is welcome. |
| Angular | ✅ Everything | Supported through `importOrderParserPlugins` API |
| Vue | ⚠️ Soon to be supported. | Any contribution is welcome. |
| Svelte | ⚠️ Soon to be supported. | Any contribution is welcome. |
### Used by
Want to highlight your project or company ? Adding your project / company name will help plugin to gain attraction and contribution.
Feel free to make a Pull Request to add your project / company name.
- [trivago](https://company.trivago.com)
- ADD YOUR PROJECT / COMPANY NAME
### Contribution
For more information regarding contribution, please check the [CONTRIBUTING](./CONTRIBUTING.md).
For more information regarding contribution, please check the [Contributing Guidelines](./CONTRIBUTING.md). If you are trying to
debug some code in the plugin, check [Debugging Guidelines](./docs/DEBUG.md)
### Disclaimer
This plugin modifies the AST which is against the rules of prettier.
### Maintainers

@@ -216,1 +190,4 @@

| [@ayusharma_](https://twitter.com/ayusharma_) | [@behrang_y](https://twitter.com/behrang_y)
### Disclaimer
This plugin modifies the AST which is against the rules of prettier.
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc