Skip to content

mihai-vlc/path-autocomplete

Repository files navigation

Path Autocomplete for Visual Studio Code

Provides path completion for visual studio code.

demo gif

Features

  • it supports relative paths (starting with ./)
  • it supports absolute path to the workspace (starting with /)
  • it supports absolute path to the file system (starts with: C:)
  • it supports paths relative to the user folder (starts with ~)
  • it supports partial paths (./tmp/fol will suggest ./tmp/folder1 if it exists)
  • it supports items exclusions via the path-autocomplete.excludedItems option
  • it supports npm packages (starting with a-z and not relative to disk)
  • it supports automatic suggestion after selecting a folder
  • it supports custom mappings via the path-autocomplete.pathMappings option
  • it supports conditional path mappings that apply to certain sub-folders only
  • it supports custom transformations to the inserted text via the path-autocomplete.transformations
  • it supports Windows paths with the path-autocomplete.useBackslash
  • it supports VS Code for Web (including on Windows)
  • it supports language specific configurations

Installation

You can install it from the marketplace. ext install path-autocomplete

Options

  • 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 pattern
      • replaceString - the replacement string
      • modifiers - modifiers passed to the RegExp constructor
    • inputReplace - Performs a string replace on the input path.
      Parameters:

      • regex - a regex pattern
      • replaceString - the replacement string
      • modifiers - modifiers passed to the RegExp constructor

    The 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
        ]

Language specific configurations

All settings can be overwritten by language specific configurations.

    "path-autocomplete.extensionOnImport": false,
    "[typescript]": {
        "path-autocomplete.extensionOnImport": false,
    },

Configure VSCode to recognize path aliases

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
}

Tips

  • 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 to keybindings.json: { "key": ".", "command": "" }. Refer to ChristianKohler/PathIntellisense#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

Release notes

The release notes are available in the CHANGELOG.md file.

Author

Mihai Ionut Vilcu

Credits

This extension is based on path-intellisense