Search code examples
eslintprettier

How to sort import in VSCode by using eslint-plugin-simple-import-sort?

Is it possible to sort imports (by using eslint-plugin-simple-import-sort) after applying Format Document (Shift+Alt+F) in Visual Studio Code?

Currently, it works only after running eslint --fix, but I would like to sort imports on document format.

P.S. Format document triggers prettier

Solution

  • So if your shortcut run prettier, I would go with prettier plugin @trivago/prettier-plugin-sort-imports.

    You can add it to your project following way:

    via npm

    npm install --save-dev @trivago/prettier-plugin-sort-imports

    or, using yarn

    yarn add --dev @trivago/prettier-plugin-sort-imports

    Then, you just need to setup sort rules in your .prettierrc, e.g.:

    "importOrder": ["^@core/(.*)$", "^@server/(.*)$", "^@ui/(.*)$", "^[./]"],
"importOrderSeparation": false,

    And, voilà

    Detailed setup is described on plugin npm page linked in first paragraph.