christiankohler / pathintellisense

Visual Studio Code plugin that autocompletes filenames

Path Intellisense

Visual Studio Code plugin that autocompletes filenames.

Installation

In the command palette (cmd-shift-p) select Install Extension and choose Path Intellisense.

To use Path Intellisense instead of the default autocompletion, the following configuration option must be added to your settings:

{ "typescript.suggest.paths": false }
{ "javascript.suggest.paths": false }

Usage

Node packages intellisense

Use npm intellisense

Contributing

Something missing? Found a bug? - Create a pull request or an issue. Github

Open in Gitpod

Are you a windows user?

There is an issue on windows with the period key. See Issue ChristianKohler/NpmIntellisense#12

Add this to the keybinding:

{ "key": ".", "command": "" }

TsConfig support

BaseUrl

Pathintellisense uses the ts.config.compilerOptions.baseUrl as a mapping. So no need to define it twice. There is no support for paths at the moment.

For example:

# Folderstructure

src/
module-a
foo.ts
module-b

// tsconfig

{
	"baseUrl": "src",
}

would allow to type:

{
  import {} from "module-a/foo.ts";
}

You can disable this behaviour by setting it to true:

{
	"path-intellisense.ignoreTsConfigBaseUrl": true,
}

Settings

File extension in import statements

Path Intellisense removes the file extension by default if the statement is a import statement. To enable file extensions set the following setting to true:

{
	"path-intellisense.extensionOnImport": true,
}

Show hidden files

Per default, hidden files are not displayed. Set this to true to show hidden files.

{
	"path-intellisense.showHiddenFiles": true,
}

If set to false, PathIntellisense ignores the default "files.exclude" as well:

{
	"files.exclude": {
		"**/*.map.js": true
	}
}

Auto slash when navigating to folder

Per default, the autocompletion does not add a slash after a directory.

{
	"path-intellisense.autoSlashAfterDirectory": false,
}

Automatically trigger next suggestion

When a suggestion was selected, the next suggestion will automatically pop up.

This setting will override the autoSlashAfterDirectory setting.

{
	"path-intellisense.autoTriggerNextSuggestion": false,
}

Absolute paths

Per default, absolute paths are resolved within the current workspace root path. Set it to false to resolve absolute paths to the disk root path.

{
	"path-intellisense.absolutePathToWorkspace": true,
}

Mappings

Define custom mappings which can be useful for using absolute paths or in combination with webpack resolve options.

{
	"path-intellisense.mappings": {
		"/": "${workspaceFolder}",
		"lib": "${workspaceFolder}/lib",
		"global": "/Users/dummy/globalLibs"
	},
}

Use ${workspaceFolder} when the path should be relative to the current root of the current project. V2.2.1 and lower used ${workspaceRoot}. Newer version support both placeholders.

History

See changelog

License

This software is released under MIT License

pathintellisense's Issues

Error "Extension invalid: manifest publisher mismatch."

Hi
I tried to install your extension in VS Code 1.0.0 and got this error.

Add Support for absolute paths

At the current state of the extension, absolute paths do not get detected, tho i
feel like I'm missing this feature sometimes ("/" would sugest me files from the current directory, tho it is an absolute path).

On my local Debian System, I fixed it as a "works for me"-algorithm by simply checking
if the string starts with a "/" (Root of the filesystem) and there is no other "/" left (so one can actually navigate). This does not work for Windows systems and - of course - is not the best solution for this problem.

   provide(fileName, textWithinString, mappings, isImport, documentExtension) {
        const path = getPath(fileName, textWithinString, mappings);
        if(textWithinString.startsWith("/") && textWithinString.lastIndexOf("/") == 0) {
            // absolute path, so start at "/"
            return this.getChildrenOfPath("/").then(children => ([
              new UpCompletionItem(),
              ...children.map(child => new PathCompletionItem(child, isImport, documentExtension))
            ]));
        }```

It would be nice to find a general solution for this.

PathIntellisense not autocomplete

Hello since I update to the latest version when I type something after / the PathIntellisense don't autocomplete and the standard visual studio intellisense will show up,

Error: Cannot read property 'indexOf' of undefined

Hi,
I saw this in CDT console output. Not sure how it happened, sorry :(

//Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js:142 Cannot read property 'indexOf' of undefined: TypeError: Cannot read property 'indexOf' of undefined
    at /Users/ondrejbrejla/.vscode/extensions/christian-kohler.path-intellisense-1.2.0/out/src/PathIntellisense.js:27:110
    at Array.some (native)
    at PathIntellisense.shouldProvide (/Users/ondrejbrejla/.vscode/extensions/christian-kohler.path-intellisense-1.2.0/out/src/PathIntellisense.js:27:55)
    at PathIntellisense.provideCompletionItems (/Users/ondrejbrejla/.vscode/extensions/christian-kohler.path-intellisense-1.2.0/out/src/PathIntellisense.js:22:21)
    at /Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/node/extensionHostProcess.js:14:11877
    at /Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/node/extensionHostProcess.js:6:17664
    at new n.Class.derive._oncancel (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/node/extensionHostProcess.js:6:13768)
    at Object.h [as asWinJsPromise] (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/node/extensionHostProcess.js:6:17627)
    at e.provideCompletionItems (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/node/extensionHostProcess.js:14:11831)
    at /Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/node/extensionHostProcess.js:14:21033

Thanks!

Add support for environment variables in the path.

Add support for paths like $HOME/.local/bin etc.

Have to using dot-slash to getting result

Hello,

Open up a folder contains index.html & /sass/skin.scss. (I'm using latest version of VSCode)

React import the extensions

Maybe I missed something but this is normal I get the extensions .js at the end of each file. I see I can toggle it but by default you say this is remove.

TypeError: Path must be a string. Received undefined

from the VS Code error telemetry

at Object.getPath (/christian-kohler.path-intellisense-0.2.0/out/src/fs-functions.js:12:19) <no sourcemaps> 
at PathIntellisense.provideCompletionItems (/christian-kohler.path-intellisense-0.2.0/out/src/PathIntellisense.js:13:35) <no sourcemaps> 
at /out/vs/workbench/node/extensionHostProcess.js:17:4899 <no sourcemaps> 
at /out/vs/workbench/node/extensionHostProcess.js:7:12373 <no sourcemaps> 
at new __dirname.undefined.t.Class.derive._oncancel (/out/vs/workbench/node/extensionHostProcess.js:5:17530) <no sourcemaps> 
at Object.c [as asWinJsPromise] (/out/vs/workbench/node/extensionHostProcess.js:7:12338) <no sourcemaps> 
at e.suggest (/out/vs/workbench/node/extensionHostProcess.js:17:4853) <no sourcemaps> 
at /out/vs/workbench/node/extensionHostProcess.js:17:12037 <no sourcemaps> 

Doesn't play nice with relative paths

Firstly, thank you for a mostly amazing extension. Path-Intellisense makes my dev life so much easier every day. ❤️

That said, there's one annoying issue that crops up every time I deal with a relative path (which is often).

In a typescript file when attempting to import from a relative path, when typing the first period you get a list of all installed packages that have a period in them and no option for 'current directory' (.) or 'up one directory' (..):

Hitting a second period to go up one directory incorrectly automatically selects one of those packages.

Similarly, if I want to jump up a few directories:

When I hit the first period, it automatically selects 'up a directory' and adds my period to the end, incorrectly making 3 periods:

I think basically Path-Intellisense should not try to auto-complete relative path parts at all, or treat periods like any other alpha character (i.e. not auto-complete the option if there are multiple matches) - that would make this extension perfect imo!

node_modules support

Can you add support to autocomplete paths from custom folder like node_modules?

Regards.

Add Path mapping

It would be great to have ability to use path mapping like webpack resolve.root or [TS 2.0] paths (microsoft/TypeScript#5039)

Example workspaceSettings.json

...
"path-intellisense.paths": {
  "~": "${workspaceRoot}/",
  "server": "${workspaceRoot}/server",
  "myLib": "${workspaceRoot}/../my-lib"
},
...

It looks like simple replacement

  if path starts with oneOfKeys 
    replace oneOfKey with oneOfValue in path

Doesn't work when the path is surrounded with backticks

apparently it only works when I use single ' or double quotes " but it doesn't even get triggered if I use the backticks `

Append / when path is a folder

When

<link rel="import" href="../bower_co<TAB>">

It should

<link rel="import" href="../bower_components/">

Instead of

<link rel="import" href="../bower_components">

Thanks for a great extension! :)

Support Custom Mapping with Placeholders/Globbing

Hi,
it would be nice if custom mapping could support placeholders/globs.

Say we have the folder structure, where "app" lies in the working dir root:

If it is required that you specify urls relative to "app" as the root, i would like to add the following mapping:

"*": "${workspaceRoot}/app/*"

When I type core as the begin of the url, the plugin would map this to ${workspaceRoot}/app/core.

Cheers

Merge NpmIntellisense into this extension

Hi again,

What do you think about merging your other extension (https://github.com/ChristianKohler/NpmIntellisense) with this one?

I think it makes sense to have one extension take care of import statements.

E

Add support for absolute file system paths

When working with data in a REPL driven style, the files to process will not necessarily be located in a specific location relative to the code file, and maybe (on Windows) not even on the same drive. It would be great to have support for globally absolute paths for those scenarios.

Allow option to remove trailing forward slash in import statement completion item

Hi,

When I type in an import statement and select a folder from the completion item list I it adds a trailing forward slash automatically. Then, in order to get the next completion item I need to hit ctrl+space. I think it'd be easier to remove the trailing slash and then instead of hitting ctrl+space you type the forward slash in. It's a little silly but in terms of usability it's one less keystroke. I think it'd be best to add a property in the settings to allow to control that.

Thanks!

add an extensionOnExport setting

With typescript's latest versions, it is forbidden to make this :

export * from "./myFile.ts"

but this one is valid :

export * from "./myFile"

adding a setting like this would solve this problem:

{
    "path-intellisense.extensionOnImport": false,
}

path-intellisense.mappings doesn't work / not used correctly

i tried using that to solve my webpack absolute pathto autocomplete modules.

• The projects sits on /Users/myuser/Workspace/foo.
• The directory that I want to autocomplete is /Users/myuser/Workspace/foo/src.
• I want to use it on my code so I can write in a file:

import Bar from 'utils/bar'

and it will be resolved to: /Users/myuser/Workspace/foo/src/utils/bar.

I tried as above:

"path-intellisense.mappings": {
    "/": "${workspaceRoot}/src"
}

what am i doing wrong ?

also - my src folder contains 10 directories that I want to be auto-mapped.. do I have to add a record for each of them or it will be auto-mapped ?

Latest VSC added IntelliSense for paths

Like you can see here: https://code.visualstudio.com/updates#_javascript

So my question is that is this plugin still needed? :D

Allow usage of Absolute File Path

Hello,

Firstly, many thanks for this extension. It's great...
Secondly, I would like to suggest you an improvement to this extension by allowing the possibility of absolute path autocomplete (relative to project root folder). Many developers prefer using absolute path to their file paths (me included). It makes your life easier when you decide to move the things around.

- vs -

Bye,
Dalton Andrade

Support for Advanced path resolution in TypeScript 2.0

System information

• OS: Windows 10 AU
• TypeScript Hero version: 0.10.1
• VSCode version: 1.7.2

Feature advanced path resolution in TypeScript 2.0

There is a new path resolution in Typescript 2.0, paths and baseUrl. Those are able to import code from the project itself as a npm module, when baseUrl it's set, and any other paths set.

It would be nice if the path resolution detects the compiler configuration setting, and if there is a relative route resolve inside baseUrl or any of the paths set, suggest from that route as a npm module, instead of relative as usual. This behavior should evaluate first if the module to load it's in the same folder, and if it is, it should import relative as usual.

Reason

Because sometimes we move the file or something, and have to handle the reimports again, and if the imports are from the baseUrl settings, those would not change if the file that imports moves.

Enabling extension breaks Emmet expansion

With Path Intellisense enabled, Emmet snippet expansion in HTML files is broken.

Steps to reproduce:

1. Enable Path Intellisense plugin
2. Open any .html file
3. Type nested HTML elements like div>ul>li. Only an
4. tag is created, the rest is ignored.

Verified that Emmet completion works properly with Path Intellisense disabled.

extensionOnImport - only if different file extension

I'd would be nice if I could use

{
    "path-intellisense.extensionOnImport": true,
}

only if the file extension from the imported file is different from the importing file. Say I'm in foo.ts and want to import bar.ts and baz.css (in a webpack project). I want the .css extension, but not .ts.

Add an icon in front of the intellisense according to the theme

Is it possible to do this?

Works only if no characters entered in 1.3.0

Extension shows the list of all deps after entering quotation marks. However, as soon as any character is entered (even if it's the first letter of a module name), all deps disappear completely and don't appear until you delete all characters and hit the suggestions command.

This happens with NpmIntellisense as well. I initially thought all similar extensions are broken in 1.3.0 and wanted to report it to vscode, however HTML/CSS Class Completion works without a problem.

Collides with html complition

When I installed your extension VSC stopped giving hints in html attributes like ng-app etc :(

Parent folder bug

Hi!
Looks like after VSCode last release here is some issue with resolution of parent folder

From this screenshot I should get sugeessions from project root folder, and I got them from current folder

Autocomplete paths in markdown documents

It would be nice to have the path autocomplete feature in markdown documents for link and images:

[link](path)
![link](path)

obviously no need to autocomplete path if it starts with http or https.

Obey editor.quickSuggestions setting

I really like this extension, but it keeps popping up as soon as a / is typed.

I have editor.quickSuggestions set to false since I'd like to manually trigger autcompletion when I need it. This extension should also check this setting and only show the autocompletion popup if it's set to true.

Importing .ts files in .tsx.

When import .ts in .ts or .tsx in .tsx, it doesn't add extension. That's great. But when I am using both extension files .ts and .tsx it auto completes with .ts and etc.

Could not intellisense any more...

I updated vscode to 1.3.0, but it dosen't intellisense
like this

even worse, when i try to append class to my html document

i have uninstalled the extention and install again, but nothing happen

heres all of my extentions:

Add an option "path-intellisense.extensionOnExport"

File extensions can be removed when importing modules, but there's another syntax that could benefit from this, notably in barrel files, where the file extension can also be omitted:

export * from './path/to/file';

Add support for folder names starting with dot

In my project i have folder '.Shared'(name starting with dot), because i want to have it on top. Extension didn't showing this folder in list. See attached gif(.Shared path: '../../.Shared/'):

Support Typescript 2's baseUrl setting

Typescript 2 includes a baseUrl option in its tsconfig.json.

This option specifies the base path (relative to tsconfig.json) from which non-relative modules are imported (without conflicting with node_modules and such).

It could be nice for PathIntellisense to support this as well.

Example:

import { MyClass } from 'api/myModule'; // here, api folder is at the root of the project, though we can import it with this syntax from anywhere.

Hidden files shown in suggestions

I have path-intellisense.showHiddenFiles set to false, but hidden files are still shown in the suggestions.

I am hiding JavaScript files that were transpiled from a TypeScript file using the following rule in my settings:
"files.exclude": { "**/*.js": {"when": "$(basename).ts"}, "**/*.js.map": true }

but the JavaScript still show up in the intellisense suggestions:

Dont work in vscode 1.6

With the last version (vscode 1.6) the extensión not work

Remove the tail when path is applied

When adding a new import I often make a copy of an existing line

<link rel="import" href="../bower_components/paper-styles/color.html">
<link rel="import" href="../bower_components/paper-styles/color.html">

Then I modify the path

<link rel="import" href="../bower_components/paper-styles/color.html">
<link rel="import" href="../bower_components/paper-styles/sha<TAB>.html">

Now I have two .html extensions ;)

<link rel="import" href="../bower_components/paper-styles/color.html">
<link rel="import" href="../bower_components/paper-styles/shadow.html.html">

When the completed path is a directory the tail should be preserved, but when the path is a file it should remove that extra stuff on the right side of the cursor.

Remove leading "_" & extention ".scss"

Hi, would like to add support for scss import support.
"_reset.scss" should be "reset"

Option to exclude files

Hi! Thanks for the tools.

This is not an issue, but a suggestion. I would like to be able to exclude some files.

ex:

{
  "files.exclude": {
    "**/*.js": {"when": "$(basename).ts"},
    "**/*.map": true
  }
}

This would be mainly to work with ts transpiler and the generated .map also.

Again, thanks. 👍

Does plugin work under Windows?

Hello, thanks for awesome plugin

Looks like after last update it stopped working on windows (VS Code 1.7.2). I'm pressing ctrl+space under cursorPosition defined at import {xx} from "./<cursorPosition>" and nothing happens.

Add support for pug includes

Pug's include paths are not surrounded by quotes (see https://pugjs.org/language/includes.html) and therefore PathIntellisense does not get triggered.

PathIntellisense is an excellent extension (thanks for your work!) and it would be great if it would also support pug includes.

Completions for '.' and '..' do not work on Windows

When I use . or .., it does not take into account the current project directory.
. resolves to C:\Program Files (x86)\Microsoft VS Code\ which is where the vscode binary resides.
.. resolves to C:\Program Files (x86)\

UPDATE:
The problem lies here:
https://github.com/ChristianKohler/PathIntellisense/blob/master/src/fs-functions.ts#L17

The document.fileName returned on windows contains \ instead of / as a directory separator.
eg. d:\Desktop\vscode-trailingspaces\src\extension.ts.
Thus fileName.substring(0, fileName.lastIndexOf("/")) returns an empty string

dont work in vscode 1.6

it dont work in vscode 1.6

Conflicting with NpmIntellisense

It seems that even after requiring relative paths, NpmIntellisense gets activated, which in turn disables PathIntellisense.

Example:
I'm inside of header.ts and want to require("./header.html"). After typing./, I get the correct list:
.., header.ts, header.html. However, as soon as I type in any character, everything falls back to NpmIntellisense. That is, I get suggestions from npm packages, as if I just entered require("").

I think NpmIntellisense should be completely disabled if the path starts with ..

Edit: I opened the issue here since PathIntellisense is the one that isn't working. However, NpmIntellisense is the one that should probably be fixed, so I opened an issue there too.

../../ triggers selection instead of adding just the dot

Problem only is on windows. No problem on macOs.

1. Start with import -> opens suggestions, still ok
   import {} from '../'
2. Type . -> Adds the first suggestion and one dot
   import {} from '../myfile.'

I have not figured out why a dot triggers the selection on windows.

use of path-intellisense.mappings confusion or bug ?

Using the following:

{
    "path-intellisense.mappings": {
        "/": "${workspaceRoot}/docs/"
    }
}

I hoped this plugin started looking in the /root/docs/ folder as soon as I would hit the "/" button. But it doesn't. I always get suggestions pointing to the current folder the opened file is in...
Am I misinterpreting this option or is something wrong ?

Support for more languages

Refactor application to make it easier to add support for specific languages

does not seems to work with ES6 imports

I tried to use it in my JSX file (and reguar .js) without luck.
I typed

import a from './

followed by CTRL+SPACE

and a box say "no suggestions", I don't know if it is your plugin or "npm intellisense" that display that.

Optionaly leave out extension when importing

First of all, thank you for this really helpful extension.

It is common to leave out extension on js file when doing import or require.
e.g.
Path:

./some-folder/someFile.js

Code:

import {something} from './some-folder/someFile';

Would you agree to make this default behavior of extension, or at least define a setting for this?
Would you include this, or accept PR for this?