Path autocomplete for visual studio code.
Provides path completion for visual studio code.
path-autocomplete.excludedItems
optionpath-autocomplete.pathMappings
optionpath-autocomplete.transformations
path-autocomplete.useBackslash
You can install it from the marketplace.
ext install path-autocomplete
path-autocomplete.extensionOnImport
- boolean If true it will append the extension as well when inserting the file name on import
or require
statements.
path-autocomplete.includeExtension
- boolean If true it will append the extension as well when inserting the file name.
path-autocomplete.excludedItems
This option allows you to exclude certain files from the suggestions.
"path-autocomplete.excludedItems": {
"**/*.js": { "when": "**/*.ts" }, // ignore js files if i'm inside a ts file
"**/*.map": { "when": "**" }, // always ignore *.map files
"**/{.git,node_modules}": { "when": "**" }, // always ignore .git and node_modules folders
"**": { "when": "**", "isDir": true }, // always ignore `folder` suggestions
"**/*.ts": { "when": "**", "context": "import.*" }, // ignore .ts file suggestions in all files when the current line matches the regex from the `context`
}
minimatch is used to check if the files match the pattern.
path-autocomplete.pathMappings
Useful for defining aliases for absolute or relative paths.
"path-autocomplete.pathMappings": {
"/test": "${folder}/src/Actions/test", // alias for /test
"/": "${folder}/src", // the absolute root folder is now /src,
"$root": "${folder}/src", // the relative root folder is now /src
// or multiple folders for one mapping
"$root": ["${folder}/p1/src", "${folder}/p2/src"] // the root is now relative to both p1/src and p2/src
}
In monorepos the following setup could be used:
"path-autocomplete.pathMappings": {
"$root": {
"conditions": [
{
"when": "**/packages/math/**",
"value": "${folder}/packages/math"
},
{
"when": "**/packages/ui/**",
"value": "${folder}/packages/ui"
}
]
}
},
Supported variables:
Name | Description |
---|---|
${home} | User home folder |
${folder} | The root folder of the current file |
${workspace} | The root folder of the current workspace |
${fileDirname} | The directory of the current file |
${relativeFileDirname} | The current opened file's dirname relative to workspaceFolder |
path-autocomplete.pathSeparators
- string Lists the separators used for extracting the inserted path when used outside strings.
The default value is: \t({[
path-autocomplete.transformations
List of custom transformation applied to the inserted text.
Example: replace _
with an empty string when selecting a SCSS partial file.
"path-autocomplete.transformations": [
{
"type": "replace",
"parameters": ["^_", ""],
"when": {
"fileName": "\\.scss$"
}
},
// replace spaces with %20
{
"type": "replace",
"parameters": [ " ", "%20", "g" ],
"when": {
"path": ".*routes"
}
},
// replace %20 with spaces when reading the already inserted path
{
"type": "inputReplace",
"parameters": [ "%20", " ", "g" ],
"when": {
"path": ".*routes"
}
},
// useful if extensionOnImport is true
{
"type": "replace",
"parameters": [
"\\.\\w+$",
""
],
"when": {
"fileName": "\\.(ts|tsx|js|jsx)$"
}
}
],
Supported transformation:
replace
- Performs a string replace on the selected item text.
Parameters:
regex
- a regex patternreplaceString
- the replacement stringmodifiers
- modifiers passed to the RegExp constructorinputReplace
- Performs a string replace on the input path.
Parameters:
regex
- a regex patternreplaceString
- the replacement stringmodifiers
- modifiers passed to the RegExp constructorThe fileName
and path
can be used for filtering the items/instances where the transformation should be applied.
For the replace
transformation considering we selected /home/mihai/a.txt
:
fileName
- regex applied to the basename of the selected suggestion a.txt
path
- regex applied to the the full path of the selected suggestion /home/mihai/a.txt
For the inputReplace
transformation considering that what we typed so far is /home/mihai
:
path
- regex applied to the path inserted so far /home/mihai
path-autocomplete.triggerOutsideStrings
boolean - if true it will trigger the autocomplete outside of quotes
path-autocomplete.enableFolderTrailingSlash
boolean - if true it will add a slash after the insertion of a folder path that will trigger the autocompletion.
path-autocomplete.disableUpOneFolder
boolean - disables the up one folder (..) element from the completion list.
path-autocomplete.useBackslash
boolean - if true it will use \\
when iserting the paths.
path-autocomplete.useSingleBackslash
boolean - If enabled it will insert a single backslash (\) even inside quoted strings.
path-autocomplete.ignoredFilesPattern
- string - Glob patterns for disabling the path completion in the specified file types. Example: "*/.{css,scss}"
path-autocomplete.ignoredPrefixes
array - list of ignored prefixes to disable suggestions
on certain preceeding words/characters.
Example:
"path-autocomplete.ignoredPrefixes": [
"//" // type double slash and no suggesstions will be displayed
]
All settings can be overwritten by language specific configurations.
"path-autocomplete.extensionOnImport": false,
"[typescript]": {
"path-autocomplete.extensionOnImport": false,
},
VSCode doesn't automatically recognize path aliases so you cannot alt+click to open files. To fix this you need to create jsconfig.json
or tsconfig.json
to the root of your project and define your alises. An example configuration:
{
"compilerOptions": {
"target": "esnext", // define to your liking
"baseUrl": "./",
"paths": {
"test/*": ["src/actions/test"],
"assets/*": ["src/assets"]
}
},
"exclude": ["node_modules"] // Optional
}
if you want to use this in markdown or simple text files you need to enable path-autocomplete.triggerOutsideStrings
./
for relative paths
If
./
doesn't work properly, add this tokeybindings.json
:{ "key": ".", "command": "" }
. Refer to https://github.com/ChristianKohler/PathIntellisense/issues/9
When I use aliases I can't jump to imported file on Ctrl + Click
This is controlled by the compiler options in jsconfig.json. You can create the JSON file in your project root and add paths for your aliases. jsconfig.json Reference https://code.visualstudio.com/docs/languages/jsconfig#_using-webpack-aliases
if you have issues with duplicate suggestions please use the path-autocomplete.ignoredFilesPattern
option to disable the path autocomplete in certain file types
if you need more fine grained control for handing duplicate items you can use the path-autocomplete.excludedItems
option as follows:
// disable all suggestions in HTML files, when the current line contains the href or src attributes
"path-autocomplete.excludedItems": {
"**": {
"when": "**/*.html",
"context": "(src|href)=.*"
}
},
// for js and typescript you can disable the vscode suggestions using the following options
"javascript.suggest.paths": false,
"typescript.suggest.paths": false
The release notes are available in the CHANGELOG.md file.
Mihai Ionut Vilcu
This extension is based on path-intellisense