{"id":13479752,"url":"https://github.com/kristijanhusak/vim-js-file-import","last_synced_at":"2025-03-27T10:30:42.815Z","repository":{"id":28404603,"uuid":"115635200","full_name":"kristijanhusak/vim-js-file-import","owner":"kristijanhusak","description":"Import/require files in javascript and typescript with single button!","archived":true,"fork":false,"pushed_at":"2023-10-12T13:22:40.000Z","size":297,"stargazers_count":143,"open_issues_count":3,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-24T11:18:13.820Z","etag":null,"topics":["importer","javascript","neovim","node","nodejs","typescript","vim","vim-plugin","vim-plugins"],"latest_commit_sha":null,"homepage":"","language":"Vim Script","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kristijanhusak.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-12-28T15:20:19.000Z","updated_at":"2025-03-23T07:21:27.000Z","dependencies_parsed_at":"2023-10-12T22:28:13.759Z","dependency_job_id":null,"html_url":"https://github.com/kristijanhusak/vim-js-file-import","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristijanhusak%2Fvim-js-file-import","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristijanhusak%2Fvim-js-file-import/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristijanhusak%2Fvim-js-file-import/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristijanhusak%2Fvim-js-file-import/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kristijanhusak","download_url":"https://codeload.github.com/kristijanhusak/vim-js-file-import/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245826695,"owners_count":20678843,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["importer","javascript","neovim","node","nodejs","typescript","vim","vim-plugin","vim-plugins"],"created_at":"2024-07-31T16:02:22.446Z","updated_at":"2025-03-27T10:30:42.504Z","avatar_url":"https://github.com/kristijanhusak.png","language":"Vim Script","funding_links":[],"categories":["Vim Script"],"sub_categories":[],"readme":"# Vim js file import\n\nThis plugin allows importing javascript and typescript files using ctags. Tested only with [Universal ctags](https://github.com/universal-ctags/ctags).\nThere is also [partial support for Vue](#vue-support).\n\nIt's similar to [vim-import-js](https://github.com/Galooshi/vim-import-js), but much faster because it's written in vimscript.\n\n## Why?\nI tried using [vim-import-js](https://github.com/Galooshi/vim-import-js), but it didn't fullfill all my expectations. This is the list of things that this plugin\nhandles, and [vim-import-js](https://github.com/Galooshi/vim-import-js) is missing:\n\n* **Performance** - Importing is fast because everything is written in vimscript. No dependencies on any external CLI, only ctags which is used by most of people.\n* **Only appends imports** - import-js replaces the content of whole buffer when importing, which can cause undesired results.\n* **Importing files with different naming convention** - import-js doesn't find imports with different naming conventions. This plugin allows importing both snake_case and camelCase/CamelCase.\n    This means that if you have a file named `big_button.js`, You can import it with these words: `BigButton`, `bigButton`, `big_button`\n* **Smarter jump to definition** - Solves same naming convention issues mentioned above, and removes obsolete tags generated by universal-ctags when trying to find the definition.\n* *[repeat.vim](https://github.com/tpope/vim-repeat) support\n## Table of contents\n\n* [Requirements](#requirements)\n* [Installation](#installation)\n* [Examples](#examples)\n* [Mappings](#mappings)\n* [Goto definition](#goto-definition)\n* [Sorting](#sorting)\n* [Typedef imports](#typedef-imports) - Experimental\n* [Removing unused imports](#removing-unused-imports)\n* [Settings](#settings)\n* [Deoplete strip file extension](#deoplete-strip-file-extension)\n* [Contributing](#contributing)\n\n### Requirements\n\n* (N)vim with python support, any version (2 or 3) or `node` installed and available in `$PATH`\n* [Universal ctags](https://github.com/universal-ctags/ctags)\n* Tested only on Neovim and Vim8+\n\n### Installation\n\nInstall [Universal ctags](https://github.com/universal-ctags/ctags)\n```sh\n$ git clone https://github.com/universal-ctags/ctags\n$ cd ctags \u0026\u0026 ./autogen.sh \u0026\u0026 ./configure \u0026\u0026 make \u0026\u0026 sudo make install\n```\n\nIt's also recommended to install some plugin for auto-updating ctags, since this plugin heavily relies on it.\n[gutentags](https://github.com/ludovicchabant/vim-gutentags) is good choice.\n\nAdd plugin to vimrc\n```vimL\nPlug 'ludovicchabant/vim-gutentags'\nPlug 'kristijanhusak/vim-js-file-import'\n```\n\n### Examples\n```js\nimport React from 'react';\n\nclass App extends React.Component {\n  render() {\n    return (\u003cdiv\u003e\u003cMyButton\u003eSubmit\u003c/MyButton\u003e\u003c/div\u003e)\n  }\n}\n```\n\nSetting cursor on `MyButton` and pressing `\u003cLeader\u003eif` finds the component and adds import at top\n\n```js\nimport React from 'react'\nimport MyButton from './components/MyButton'\n\nclass App extends React.Component {\n  render() {\n    return (\u003cdiv\u003e\u003cMyButton\u003eSubmit\u003c/MyButton\u003e\u003c/div\u003e)\n  }\n}\n```\n\nBy default `import \u003cname\u003e from \u003cfile\u003e` is used. If file contains any `const \u003cname\u003e = require(\u003cfile\u003e)`,\nimport will be added like that.\n\n```js\nconst React = require('react')\nconst MyButton = require('./components/MyButton');\n\nclass App extends React.Component {\n  render() {\n    return (\u003cdiv\u003e\u003cMyButton\u003eSubmit\u003c/MyButton\u003e\u003c/div\u003e)\n  }\n}\n```\n\nPartial imports are also handled (`import { \u003cname\u003e } from \u003cfile\u003e`)\n\n```js\nimport { MyButton } from './components/AllComponents';\n\nclass App extends React.Component {\n  render() {\n    return (\u003cdiv\u003e\u003cMyButton\u003eSubmit\u003c/MyButton\u003e\u003c/div\u003e)\n  }\n}\n```\n\n### Mappings\n\nBy default, following mappings are used if they are not already taken:\n\n```vimL\nnnoremap \u003cLeader\u003eif \u003cPlug\u003e(JsFileImport)\n\nnnoremap \u003cLeader\u003eiF \u003cPlug\u003e(JsFileImportList)\n\nnnoremap \u003cLeader\u003eig \u003cPlug\u003e(JsGotoDefinition)\n\nnnoremap \u003cLeader\u003eiG \u003cPlug\u003e(JsGotoDefinition)\n\nnnoremap \u003cLeader\u003eip \u003cPlug\u003e(PromptJsFileImport)\n\nnnoremap \u003cLeader\u003eis \u003cPlug\u003e(SortJsFileImport)\n```\n\n### Goto definition\n\nTo jump to definition use `\u003cLeader\u003eig` mapping, or if you want to leverage built in\ntag jumping functionality, use provided `tagfunc` (see `:help tagfunc`):\n```vimL\nset tagfunc=jsfileimport#tagfunc\n```\n\n### Sorting\nTo sort imports by the import path use `SortJsFileImport` mapping `\u003cLeader\u003eis`:\n\nThis:\n```js\n  import Foo from './file_path'\n  import moment from 'moment'\n```\n\nBecomes this:\n```js\n  import moment from 'moment'\n  import Foo from './file_path'\n```\n\n**Note**: Sorting is not behaving well when there are partial multi-line imports:\n```js\n import {\n    one,\n    two,\n    three\n  } from 'four'\n```\nThis is due to limitation with `:sort` command. If anyone know how to get around this, please open up an issue.\n\nIf you want imports to be always sorted, add `let g:js_file_import_sort_after_insert = 1` to your vimrc\nand plugin will automatically sort imports after every insert\n\n```vimL\nlet g:js_file_import_sort_after_insert = 1\n```\n### Typedef imports\n**Note**: This is still experimental.\n\nImport dependencies as typedefs. Example:\n\n```javascript\n// src/Models/User.js\nclass User {}\n\n\n// index.js\n\n/**          v cursor\n * @param {Us|er} user\n */\nfunction main(user) {\n\n}\n```\n\nDoing `JsFileImportTypedef` or pressing `\u003cleader\u003eit` will import the `User` as typedef:\n```javascript\n/**\n * @typedef {import('./src/Models/User')} User\n */\n\n/**\n * @param {User} user\n */\nfunction main(user) {\n  // Lsp properly handles autocompletion for user now\n}\n```\n\n### Settings\n\nIn case tag is not found for the given word, you will be prompted to enter the file path manually.\nPath needs to be selected from the current (n)vim working directory. Plugin will take care of determining\nif it's full or partial import.\n\nTo disable this option, set `g:js_file_import_prompt_if_no_tag` to `0`:\n\n```vimL\nlet g:js_file_import_prompt_if_no_tag = 0\n```\n\nYou can use prompt whenever you want with mapping `\u003cLeader\u003eip`\n\nBy default `import [name] from [file]` is used to add new imports, in case when there are no any other existing imports.\nIf file contains at least one `require([file])`, it will use the `require()` to import files.\n\nTo force using `require()` always, add this flag to settings:\n\n```vimL\nlet g:js_file_import_force_require = 1\n```\n\nAbsolute imports (packages) are always imported first, which is recommended by most style guides.\nTo import package the same way as files (last), add this flag to settings:\n\n```vimL\nlet g:js_file_import_package_first = 0\n```\n\nSemicolons are added at the end of requires and imports. To disable this add this flag to settings:\n\n```vimL\nlet g:js_file_import_omit_semicolon = 0\n```\n\n#### Overriding mappings\nIf you want to use different mappings, you can disable them all with this setting:\n```vimL\nlet g:js_file_import_no_mappings = 1\n```\n\nAnd then add your mappings like this:\n\n```vimL\nnmap \u003cC-i\u003e \u003cPlug\u003e(JsFileImport)\nnmap \u003cC-u\u003e \u003cPlug\u003e(PromptJsFileImport)\n```\n\n#### Using double quotes\nIf you want to use double quotes instead of single quotes, add this setting:\n```vimL\nlet g:js_file_import_string_quote = '\"'\n```\n\n#### Using FZF for prompts\nBy default, if there is a need for prompt (For example, to select from multiple import option),\nnative `inputlist()` is used. If you want to use [FZF](https://github.com/junegunn/fzf), add this setting:\n```vimL\nlet g:js_file_import_use_fzf = 1\n```\n\n#### Using Telescope for prompts\nBy default, if there is a need for prompt (For example, to select from multiple import option),\nnative `inputlist()` is used. If you want to use [Telescope](https://github.com/nvim-telescope/telescope.nvim), add this setting:\n```vimL\nlet g:js_file_import_use_telescope = 1\n```\n\n#### Importing from files with extension\nIf you want to import files with extension, add this setting:\n```vimL\nlet g:js_file_import_strip_file_extension = 0\n```\n\nCheck help docs for more information.\n\n\n### Deoplete strip file extension\nIf you are using [deoplete.nvim](https://github.com/Shougo/deoplete.nvim) and it's file autocomplete to import files,\nyou probably noticed that the file extension is also part of the name when you autocomplete it,\nso you need to remove it manually each time.\nThis plugin adds a small deoplete converter that strips that file extension out\nof the completion word and shows it separately.\nSo instead of getting this in autocomplete:\n```\nuser_service.js [F]\nMyButton.jsx [F]\n```\nYou get this:\n```\nuser_service [F] [js]\nMyButton [F] [jsx]\n```\n\nThis is enabled by default (only for javascript and typescript syntax). To disable this option, add this to your vimrc:\n```vimL\nlet g:deoplete_strip_file_extension = 0\n```\n\n### Vue support\nThere is some basic support for Vue:\n\n1. Supports importing js/ts files into `*.vue` file `\u003cscript\u003e` tag\n2. Supports importing `.vue` file into another `.vue` file by matching filename. Imports may work better if custom ctags syntax file is used (https://gist.github.com/Fmajor/0024facc213087a3b4f296b50bf2c197)\n3. Webpack alias support with this config:\n```vim\nlet g:js_file_import_from_root = 1\nlet g:js_file_import_root = getcwd().'/src'\nlet g:js_file_import_root_alias = '@/'\n```\n\n### Performance issues\nIn case importing or jumping to definition is slow, make sure you have these set up:\n* [ripgrep](https://github.com/BurntSushi/ripgrep), [silversearher](https://github.com/ggreer/the_silver_searcher) or [ack](https://linux.die.net/man/1/ack) installed. Used for finding files and directories with a matching name. If none of those are installed, falls back to vimscript `findfile()` which is much slower.\n* `node_modules` excluded from `ctags` file and added to `wildignore` option:\n\n  ```vimL\n  set wildignore+=*node_modules/**\n  ```\n  If you use [gutentags](https://github.com/ludovicchabant/vim-gutentags) it will automatically read your `wildignore` so you don't have to worry about ctags part.\n\n  More info on [issue #5](https://github.com/kristijanhusak/vim-js-file-import/issues/5)\n\n### Contributing\nThere are no any special guidelines for contributing.\n\nAll types of contributions, suggestions and bug reports are very welcome!\n\n### Thanks to:\n* [Vim php namespace](https://github.com/arnaud-lb/vim-php-namespace) for inspiration and tests structure\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkristijanhusak%2Fvim-js-file-import","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkristijanhusak%2Fvim-js-file-import","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkristijanhusak%2Fvim-js-file-import/lists"}