Absolutely

Absolutely writes absolute imports for you so don't have to. Never type out import { useState } from 'react' again!

Features

Write your code, hit save, and the common imports you've specified in your absolutely.json file will be automagically added as imports to the top of the file!

Set-up

1. Edit your VSCode settings with the editor.codeActionsOnSave property. Make sure to add "source.organizeImports".

"[javascript]": {
  "editor.codeActionsOnSave": [
    "source.organizeImports",
    "source.fixAll.eslint"
  ]
},
"[typescript]": {
  "editor.codeActionsOnSave": [
    "source.organizeImports",
    "source.fixAll.eslint"
  ]
}

2. Create an absolutely.json file in the root of your project. This JSON object should have keys of the common libraries you want to import from, and values of an array of the items from that library you want to watch for.

Example:

{
  "react": ["useState", "useEffect", "useCallback", "useRef"],
  "react-hook-form": ["useForm", "Controller"],
  "next/router": ["useRouter"],
  "components": ["Button", "Icon", "Box", "Input"],
}

Limitations

Absolutely only works for a niche use-case: you import everything as named imports from an absolute destination. It does not work with default exports or any relative paths.

Additionally, it really only works well in conjunction with the ESLint plugin unused-imports. If you don't have this in your workflow, Absolutely will stupidly add duplicate imports. All Absolutely is doing is searching for the keywords you've specified in absolutely.json, and adding them as import statements to the top of the file. ESLint can then come in and remove duplicates and clean it up.

Development

1. Open this project in VSCode (only the project, not a containing monorepo)
2. Press fn + F5 to open VSCode Development Environment
3. Reference https://code.visualstudio.com/api/references/vscode-api#workspace for most things
4. Make sure your VSCode javascript settings look like this:

 "[javascript]": {
    "editor.formatOnSave": false,
    "editor.codeActionsOnSave": [
      "source.organizeImports",
      "source.fixAll.eslint"
    ],
  },

Deployment