pmneo / ts-importer Goto Github PK

Generators functions are not tracked by ts-importer.
e.g. export function* foo() {...}

It's a strange issue, I thought that this extension doesn't provide import code completion feature but it was just a bug 😄

If you have (even commented) line import "reflect-metadata"; (it's a shim to make TypeScript decorators work) in your file, the import code completion doesn't work at all - there's no suggestion about symbols to import on typing or on CTRL+SPACE.

Documentation's configuration section contains the description of the plugin's options but no reference where and how to set the.

Should I create a file in project root?
Same about the knownSymbols object which can be generated. Where I should add it to make use of ti?

Great extension!

It would be great if you could provide a setting, so the extension will not add a semicolon to the end of the import statement?

Currently when importing from a file named middleoutCompression/index.ts ts-importer specifies the './middleoutCompression/index' as the path.

I would be nicer if it instead simplified the path down to './middleoutCompression'.

If tsimporter.preferRelative is true import statement is not being added automatically when selecting symbol from drop-down menu.

Would it be possible to add custom import / export statements?

I work with a custom JS engine that has this import schema

part.js

var a = 42;

main.js

// #import "part.js"
console.log(a) // Logs 42 to the console

In the above script the complete content of the script part.js is copied into the script main.js. Would this extension be extendable to serve this functionality?

I can't exactly figure out why this might be happening, but I have a specific export at the end of a file that sets up a logger that looks like this:

const defaultLogger = getLogger("default") as Logger;
export { defaultLogger as logger }

Typescript Importer indexes this export as "this" instead of logger. So, usually on accident I get an import statement at the top of my file that looks like this:
import { this } from "relative/path/to/logger/file";

This is what the symbol index file looks like for this export:

"this": [
		{
			"name": "this",
			"path": "path\\to\\logger.ts",
			"isDefault": false
		}
]

It's super annoying, since 'this' is used all the time. Any idea why this would be happening?

Thanks,
Tyler Robinson

Thanks so much for this awesome plugin! Couldn't live without it.

Would it be possible to add an option to prefer an export from an index.ts file if it's available? This way it ts-importer could help me keep imports a lot cleaner. This is a common use case when dealing with angular2 modules for example.

Currently ts-importer adds new dependencies to an existing import statement as the last item in the statement.

Instead, it would be great if it inserted new dependencies alphabetically amongst the existing dependencies with an import statement.

e.g. When adding dependency a instead of this:

import { x, y, z, a  } from './blah';

It would do this:

import { a, x, y, z  } from './blah';

This way one wouldn't have to use the fixer in ts-lint to reorder after each added import.

Current behavior:
When the cursor is inside a comment, typing a symbol that can be exported automatically imports it when pressing space, tab or enter.

Expected behavior
When typing inside comments, no import suggestions should be done.

My configuration:

• VS Code 1.6.1
• ts-importer 1.2.7
• settings.json:

"tsimporter.lowImportance": true,
"tsimporter.spaceBetweenBraces": false

Nice work, by the way!

Hi,

Great job on this project, it is awesome! This is a suggestion to make it even more awesome:

I usually have tsconfig.json set up like this:

{
	"compilerOptions": {
		"baseUrl": ".",
		"paths": {
			"*": [
				"bower_components/*",
				"*"
			]
		}
	}
}

TS importer then produces absolute paths like:

import { LibComponent } from 'lib/LibComponent' // From bower
import { Baz } from 'src/main/typescript/foo/bar/Baz' // From this project

By using a relative path, the latter could be a lot shorter, like:

import { LibComponent } from 'lib/LibComponent' // From bower
import { Baz } from './Baz' // From this project

Would it be possible to get this result somehow? Maybe by calculating both the absolute and the relative path and using the shorter one? (That would let the LibComponent keep the absolute path, because the relative path for it would be something like ../../../../../bower_components/lib/LibComponent which is longer.

This could help greatly when writing library code, to be used in another project – not having to insert the ./ manually.

The plugin still imports inside comments and strings. And what's really annoying is that it adds the imports when I press space when I finish a word resulting in many imports after I write a comment or string.

Organizing imports would be a perfect feature. Please take a look how it's done in Typescript Hero https://github.com/buehler/typescript-hero

In short.
The sequence of the groups located in settings to workspace, it uses regular expressions to identify the group.

[
    "Plains",
    "/@angular/",
    {
        "identifier": "/Foo[1-9]Bar/",
        "order": "desc"
    },
    "Workspace",
    {
        "identifier": "Remaining",
        "order": "desc"
    }
]

Also if you will do some kind of imports organization, please provide a hot key to force organizing and an option for settings to do it automatically on save.

The reason why I'm using your extension not a TsHero is your extension uses paths from tsconfig, which is more important for me, and imho the killing feature!:)

Thank you.

When I paste part of my code to new file, I have to create necessary imports. This extensions provide support for it:

The tooltip statement is appropriate but it insert wrong, default import syntax:

Even when I manually correct the import, the next imports from this module appears as new line with default import syntax.

The trace might be that I had in other file the syntax import uiRouter, { StateProvider } from "angular-ui-router"; so the cached version might be incorrect. When I removed the mixed statement and reloaded VS Code, the import works ok.

If you can find one and load it, (maybe using tslint itself to do it?) you could override settings that aren't explicitly set in the workspace. That would be cool. Interested in accepting a PR for it? Thanks!

This project is awesome. I like it and recommend to many friends.
And will you support javascript?

Thank you.

Based on my issue,
microsoft/vscode#52756

It would be nice if the plugin would rewrite the import paths when a typescript file in the workspace is moved.

Out of the TS extensions I've tried, yours is the definitely best of the lot for managing imports. Would love to request the following:

• Remove unused imports (an annoying chore I encounter frequently)
• Have the context menu deprioritise options I never choose, and vice versa
• Format/sort imports inside braces:
  • Inside braces: import { D, A, C, B } --> import { A, B, C, D }
  • Case sensitivity: import { fn1, Type1, fn2, Type2, someVar } --> import { Type1, Type2, fn1, fn2, someVar }
  • Multiline with line breaking when there are too many imports on one line:

import { someReallyLongFunctionOrVariableName, fn1, someVar2, Type1, fn2, Type2, SomeReallyLongTypeName, someVar1}

// becomes:

import {
  SomeReallyLongTypeName, Type1, Type2,
  fn1, fn2, someReallyLongFunctionOrVariableName, someVar2, someVar1
} from 'somewhere';

// or (as per settings):

import { SomeReallyLongTypeName, Type1, Type2,
         fn1, fn2, someReallyLongFunctionOrVariableName, someVar2, someVar1 } from 'somewhere';

After updating VSCode to the last version the ts-importer extension became absolutely unusable.
As soon as I enter several symbols in my *.ts file the CPU gets 100% loaded.
(after extension disabling things get normal again)

We have identified this extension as emitting ES5-JavaScript code and extending API-types, like vscode.Disposable or vscode.CompletionItem. VS Code itself has changed to emit ES6 JavaScript code and too enable functions extending from classes we have added a utility in our code. Given the small number of es5-emitting extensions that also extend API-types we ask for your help, which is emitting ES6 instead of ES5.

For this extension the following should be enough

• in tsconfig.json change the target to es6
• recompile via tsc -p tsconfig.json
• run vsce publish patch

Thanks and #HappyCoding!

For example, I always use this:

import * as path from 'path';

However, it can't auto import path when I typed path.
I'm not sure if this is a common demand, but think it will be really useful if somewhere I can add some customize index. (Just like the dump index file)

And another problem is that , once use ts-importer, I found that some hint of basic type disappeared.
e.g. I type this:

let a: string;

Code hint of string can not work. While I disable ts-importer it could.

Hi guys!

Congrats for this amazing plugin 🎉

Just spotted an issue when having multiline imports:

Disclaimer: this issue is not linked to React Native, I'm just using it for the purpose of this issue ;)

Initial situation

// Some multiline import 
import {
  View,
  StyleSheet,
} from 'react-native';

// ... some other imports

Then the plugin add the import for the Image component from 'react-native'

Current behaviour

import {
  View,
  StyleSheet,
} from 'react-native';

// ... some other imports
import { Image } from 'react-native'; // <= unfortunatly it adds another import from `'react-native'`

Expected behaviour

import {
  View,
  StyleSheet,
  Image, // <= It would be super nice to have it here :D
} from 'react-native';

// ... some other imports

Cheers 🚀

if the final import item contains a line break, the new import will corrupt it by being added inside the brackets.

import { 
    Component
} from '@angular/core';

@Component()
class Test {
}

And then you add another one, for example, Subject

import {
import { Subject } from 'rxjs';
  Component
} from '@angular/core';

@Component()
class Test {
  property: Subject
}

This plugin was working great for me until yesterday. Now it is consistently importing stuff I don't want. I'm not sure what's changed.

every time I type console._ [logger] it adds:

imports console as * from 'console'

because some library I have in my node_modules folder exports a console module.

If I type window._ (global window object) it adds this import.

imports import { window } from 'rxjs/operator/window';

Annoying - it was working so well but I had to disable it. If I can do anything to help diagnose the issue please let me know.

The filesToExclude option is not working for me. I have tried all possibile combinations like "tsimporter.filesToExclude": [ "./old/**" ], "tsimporter.filesToExclude": [ "old/**" ] or "tsimporter.filesToExclude": [ "./old/**/*" ]. It still resolve also the old project folder:

Maybe it has cached exports from before I turned the filesToExclude setting?

When I am at the top of a .ts file where all the imports are and I want to import a new component manually, for example AppComponent, I type "import App" and when the suggestion for AppComponent pops up, I hit enter on my keyboard. The result is two lines:
import { AppComponent } from './app.component';
import AppComponent

it should be only the first line:
import { AppComponent } from './app.component';

This is a truly useful extension. Great job.

Would it be possible to add some additional commands for organizing the imports (i.e., remove unused imports, sort imports by name, etc.)

Hi, much ❤️ for the extension!
Any plans on adding sort + removing unused imports?

Hi, when I use this extension it makes using interfaces quite bad. It is probably a bug:

Expected behavior and when I disable the extension:

In both screenshots I press ctrl + space within these brakets.

Is it possible to add auto imports of namespaces / modules?

I have tsimporter.doubleQuotes set to false in my settings (which seems redundant seeing as it's the default), but tsimporter still uses double quotes when inserting import statements.

Is it possible to add an settings flag to disable the statusbar icon? It's quite useless and just needs a lot of space...

There is still v1.2.13 on the marketplace - https://marketplace.visualstudio.com/items?itemName=pmneo.tsimporter

If you try to use a module from an upper directory structure, the plugin will put the path like "./../my-module", but it should be only "../my-module".

Normally when hitting Control + Space (on a Mac) to reveal members for an object VS Code will only show members of the object.

However, when ts-importer is installed it shows all your potential dependencies in your app. In this scenario this is just noise and unfortunately makes the member dropdown almost completely unusable.

I love this extension and recommend it to fellow developers but this specific issue is a show stopper for them. Its a shame as I must admit, I feel like ts-importer makes me much more productive with auto importing dependencies, but less productive by getting in the way of member lists. If this issue was fixed I feel like it would make a huge difference in productivity. 🙏

Hey, love the plugin!

Just wondering, is there a specific reason why .tsx files arent supported?

Currently ts-importer adds new import statements to the end of the import list.

It would be great if it instead inserted new import statements alphabetically amongst all the import statements.

e.g. Instead of

import { yada } from './a';
import { etc } from './c';
import { nested } from './c/a';
import { andSoOn } from './d';
import { blah } from './b'; // <-- Just added

It would do this:

import { yada } from './a';
import { blah } from './b'; // <-- Just added
import { etc } from './c';
import { nested } from './c/a';
import { andSoOn } from './d';

This way one wouldn't have to use the fixer in ts-lint to reorder after each added import.

Hey

If you want to have an interface as the default export from a file, the syntax is:

interface Foo { ... }
export default Foo;

At the moment this doesn't work if you try to auto-import it by typing
let foo: Foo
(the interface wont appear in auto complete list).

Any chance you might implement this feature?

Btw thanks for the nice extension :)

Please add support for import of namespace. Currently it imports a class but it is not visible without importing namespace.

Great plugin!

Given a file with no imports something like:

// Copyright 2017 Some company

const x = "foo";

If I let the plugin automatically import a type, it will put it above the copyright header, like

import * as React from "react";
// Copyright 2017 Some company

const x = "foo";

When in reality I want

// Copyright 2017 Some company

import * as React from "react";

const x = "foo";

Is it a feasible FR to have the plugin import the first import after an comment at the beginning of the file?

A demo project here:
https://github.com/k8w/vscode-gitignore-problem-example

Why ignore folder should be index?
My project structure:

|- __shared
|- frontend
    |- shared  // a symlink to ../__shared
|- backend
    |- shared  // a symlink to ../__shared

In order to not submit a symlink, .gitignore is:

/frontend/shared
/backend/shared

And when I open frontend or backend via vscode, shared cannot be indexed by tsimporter

The intellisence within TSX react component gets flooded with a list of unrelated references making the selection unusable.

Current behaviour:

Expected behaviour (ts-importer disabled):

Often modules extend other modules, and partially expose some of their features

export {x as y} from 'z';

spaceBetweenBraces is only taken into account when updating existing import but is not when a new import is added.

Hi, your extension is amazing, the best importer there is currently available. Only question i had was: How can i exclude the tmp folder?.

Because in an app generated with the angular-cli i have a tmp folder full of brocolli .ts files and when the auto import looks for the components them there.

Or maybe not exclude the tmp folder explicitly for allow to select an array of expressions to be matched against when looking for folders to watch.

Thanks for this great extension, if you need some help i am more than willing!. Cheers

Hi.

When I import, from the same module, a named export and then the default export (or the other way around), it produces two different import entries instead of a single one.

Expected result:

import something, { named } from "./something";

Actual result:

import something from "./something";
import { named } from "./something";

Thanks for your time.

I'm sure if VScode's API allows for that, but would it be possible for the extension's suggestions to be displayed below the "default" suggestions proposed by VScode?

I have removed a single property from the object on the screenshot below to illustrate the point. This one was done without the extension:

And this one with the extension: