Auto import

[delucca]

Hi!

I'm considering moving from VSCode to Atom (especially because of vim-mode-plus) and I found this package (atom-typescript) really useful.

One of the most common features in any editor Typescript plugin is auto-import (you type a new module exported class/function/whatever and it checks that your current file has not yet imported it and if you type enter it automatically imports for you). Typescript VSCode plugin has it, as well as Emacs and many others.

Does this plugin allow us to do it too? I've searched the web and this repository for this feature and was not able to find anything.

[lierdakil]

It is done here using code actions

You can also activate code actions using Diagnostics: Show Actions At Position if using atom-ide-ui (Alt+A by default), or Intentions: Show if using intentions (Alt+Enter or Ctrl+Enter by default).

The first code action for non-imported identifiers identified in other modules is usually to add them to imports.

[delucca]

Oh, I see.

It works with intentions, but I need to type the entire module name before tapping Alt+Enter. There is any way to suggest modules to import while typing? (like VSCode Typescript module)

[lierdakil]

It works with intentions, but I need to type the entire module name before tapping Alt+Enter. There is any way to suggest modules to import while typing? (like VSCode Typescript module)

Okay, full disclosure, I've used VSCode maybe for a couple of hours and not for TypeScript, so I have no idea what you're referring to when referencing VSCode, sorry.

I find this bit specifically confusing:

I need to type the entire module name

Do you mean you have to type the identifier and would like for autocompletion to pull suggestions not only from the current scope, but also from all project's modules? Or am I misunderstanding something?

[delucca]

@lierdakil to make ti easier to understand I've made a comparison video with both Atom (with atom-typescript, intentions and atom-ide-javascript) and VSCode (default configs)

Atom: https://drive.google.com/file/d/1oz55SQ6ZGqixVP5Fa9hUxnToxyWkYRQh/view?usp=sharing
VSCode: https://drive.google.com/file/d/1s7i5_Ldajwpk9NOsCqwPjXYA3eYEp1cM/view?usp=sharing

As you can see, in Atom we need to type the entire module name (it suggests me the name because there is already another declaration of that module in the file. If it was an empty file it would suggest me nothing) and then type Alt+Enter to auto-import.

VSCode, on the other hand, with just a few words, even with typos and wrong cases, It already suggests to me a possible module to import (based on my tsconfig.json) and if I type enter it automatically imports. While in Atom enter would simply jump to a new line.

[lierdakil]

Okay, I think I understand now. I've just published v14.1.0, wherein something like this is implemented. It's disabled by default for now though, both for compatibility reasons and because I'd prefer a slower rollout to iron out the kinks.

To enable go to Atom-Typescript settings, and enable the option "Include Completions For Module Exports":

You may need to reload Atom for the change to take effect (Window: Reload command is enough, no need to restart)

You can also enable per-project via tsconfig, see CHANGELOG for more details.

[delucca]

Okay, I think I understand now. I've just published v14.1.0, wherein something like this is implemented. It's disabled by default for now though, both for compatibility reasons and because I'd prefer a slower rollout to iron out the kinks.

To enable go to Atom-Typescript settings, and enable the option "Include Completions For Module Exports":

You may need to reload Atom for the change to take effect (Window: Reload command is enough, no need to restart)

You can also enable per-project via tsconfig, see CHANGELOG for more details.

Thanks for developing it!

I've updated to v14.1.0, enabled the feature at the package settings and reloaded Atom, but it seems that it is still not working. I don't know if I need to install any plugin or activate something in order to work. Also, I'm using atom-ide-javascript (from atom-ide-community, since atom-ide-ui from Facebook is archived). Don't know if that affects something.

Here is a quick video where I remove a previous imported packages and tries to auto-import it: https://drive.google.com/file/d/1S1XvXVXhUuBtyGvrd_lQWNgez702PE8u/view?usp=sharing

In the end, I've pressed Alt+Enter to enabled intentions and execute the auto-complete. But, like I've commented before, it would be incredible to have a behaviour like VSCode, where just tapping enter when autocompleting would import it.

Also, I don't know if my auto-completion is working accordingly. I've noticed that it doesn't show all possible module that I can import.

Here is the full list of packages I've installed:

atom-ide-base
atom-ide-datatip
atom-ide-javascript
atom-ide-outline
atom-typescript
autocomplete-paths
busy-signal
editorconfig
ex-mode
intentions
javascript-drag-import
language-dotenv
language-gitignore
linter
linter-eslint
prettier-atom
project-manager
relative-numbers
vim-mode-plus

[lierdakil]

Thanks for testing! So I've noticed you're likely using "show completions on keystroke" autocomplete-plus option. I personally don't as I find this distracting, so I've neglected to test the feature thoroughly in this mode. Sorry.

Anyway, I've released v14.1.1 v14.1.2 ¹, which fixes an unfortunate bug that's probably the reason and also relaxes filtering rules to make completing misspelled identifiers a little easier. Let me know if it works for you.

Also, side note, this feature doesn't work with TypeScript versions prior to v2.9 I think. It's been 3 years since v2.9 released, so it's probably not an issue, but I thought I should mention it just in case.

¹ ... for posterity, I was a little too overeager to publish the patch, and forgot to build the actual bundle before creating the release. So v14.1.2 is the actually fixed version.

[delucca]

Amazing! Now it is working!

Thanks.

[delucca]

@lierdakil quick question, there are any way to ask atom-typescript to prefer absolute imports instead of relative ones?

I ask so because I use relative imports just for same level packages. While importing from parents I always use absolute paths.

[lierdakil]

You can set this either globally, or per-tsconfig.json. Globally, this option in Atom-TypeScript settigns should work:

bear in mind you also need baseUrl set in tsconfig.json for absolute imports to actually work.

Alternatively, you can add preferences object to tsconfig.json and set its importModuleSpecifierPreference to "non-relative", e.g.

{
  "compilerOptions": { "..." },
  "preferences": { "importModuleSpecifierPreference": "non-relative" }
}

see docs for more information

[delucca]

Cool thanks!

[delucca]

@lierdakil sorry for bothering you again, but another quick question

It is possible to have more fine-grain control over absolute vs. relative imports? I prefer relative imports if the imported module is at the same level as the current file or below, and absolute import if it came from a parent package.

Don't know if that is even possible, but I think VSCode handles it that way by default.