npm i -D eslint eslint-plugin-optimize-imports
Add optimize-imports to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:
{
"plugins": [
"optimize-imports"
]
}Then configure the rules you want to use under the rules section.
{
"rules": {
"optimize-imports/import-react": "warn",
"optimize-imports/import-quotes": "warn",
"optimize-imports/import-breaks": "warn"
}
}Default options for optimize-quotes rule:
{
"rules": {
"optimize-imports/optimize-quotes": ["warn", {
"single": true,
"exclude": []
}]
}
}Default options for optimize-breaks rule:
{
"rules": {
"optimize-imports/optimize-breaks": ["warn", {
"afterCount": 2,
"symbol": "tab",
"symbolsCount": 1
}]
}
}Result of optimize-react when possible:
import * as React from 'react';
⚠️ React team will drop default imports support in future versions
Result of optimize-quotes when possible:
// Before
import { Fragment } from "react";
// After
import { Fragment } from 'react';Result of optimize-breaks when possible:
// Before
import {
Fragment as ReactFragment, useState,
useEffect, useReducer} from 'react';
// After
import {
Fragment as ReactFragment,
useState,
useEffect,
useReducer
} from 'react';MIT