diff --git a/.projections.json b/.projections.json index f0563a8bb..53eff1598 100644 --- a/.projections.json +++ b/.projections.json @@ -1,41 +1,97 @@ { - "autoload/SpaceVim/api/*.vim": {"alternate": "test/api/{}.vader"}, - "autoload/SpaceVim/plugins/a.vim": {"alternate": "test/plugin/a.vader"}, - "test/plugin/a.vader": {"alternate": "autoload/SpaceVim/plugins/a.vim"}, - "autoload/SpaceVim/layers/lang/*.vim": {"doc": "docs/layers/lang/{}.md"}, - "test/api/*.vader": {"alternate": "autoload/SpaceVim/api/{}.vim"}, - "docs/*.md": {"alternate": "docs/cn/{}.md"}, - "docs/cn/*.md": {"alternate": "docs/{}.md"}, - "doc/*.txt": {"alternate": "doc/{}.cnx"}, - "doc/*.cnx": {"alternate": "doc/{}.txt"}, - "docs/*.cmd": {"alternate": "docs/cn/{}.cmd"}, - "docs/cn/*.cmd": {"alternate": "docs/{}.cmd"}, - "wiki/en/Project-layout.md": {"alternate": "wiki/cn/Project-layout.md"}, - "wiki/cn/Project-layout.md": {"alternate": "wiki/en/Project-layout.md"}, - "wiki/en/Following-HEAD.md": {"alternate": "wiki/cn/Following-HEAD.md"}, - "wiki/cn/Following-HEAD.md": {"alternate": "wiki/en/Following-HEAD.md"}, - "docs/_posts/2017-02-11-use-vim-as-a-java-ide.md": {"alternate": "docs/_posts/2018-09-19-use-vim-as-a-java-ide.md"}, - "docs/_posts/2018-09-19-use-vim-as-a-java-ide.md": {"alternate": "docs/_posts/2017-02-11-use-vim-as-a-java-ide.md"}, - "docs/_posts/2019-01-08-use-vim-as-a-go-ide.md": {"alternate": "docs/_posts/2019-01-07-use-vim-as-a-go-ide.md"}, - "docs/_posts/2019-01-07-use-vim-as-a-go-ide.md": {"alternate": "docs/_posts/2019-01-08-use-vim-as-a-go-ide.md"}, - "docs/_posts/2019-01-28-use-vim-as-a-coffeescript-ide.md": {"alternate": "docs/_posts/2019-01-29-use-vim-as-a-coffeescript-ide.md"}, - "docs/_posts/2019-01-29-use-vim-as-a-coffeescript-ide.md": {"alternate": "docs/_posts/2019-01-28-use-vim-as-a-coffeescript-ide.md"}, - "docs/_posts/2018-09-27-use-vim-as-a-python-ide.md": {"alternate": "docs/_posts/2018-09-28-use-vim-as-a-python-ide.md"}, - "docs/_posts/2018-09-28-use-vim-as-a-python-ide.md": {"alternate": "docs/_posts/2018-09-27-use-vim-as-a-python-ide.md"}, - "docs/_posts/2019-02-11-use-vim-as-a-perl-ide.md": {"alternate": "docs/_posts/2019-02-12-use-vim-as-a-perl-ide.md"}, - "docs/_posts/2019-02-12-use-vim-as-a-perl-ide.md": {"alternate": "docs/_posts/2019-02-11-use-vim-as-a-perl-ide.md"}, - "docs/_posts/2019-02-17-use-vim-as-a-ruby-ide.md": {"alternate": "docs/_posts/2019-02-18-use-vim-as-a-ruby-ide.md"}, - "docs/_posts/2019-02-18-use-vim-as-a-ruby-ide.md": {"alternate": "docs/_posts/2019-02-17-use-vim-as-a-ruby-ide.md"}, - "docs/_posts/2019-05-08-use-vim-as-a-php-ide.md": {"alternate": "docs/_posts/2019-05-09-use-vim-as-a-php-ide.md"}, - "docs/_posts/2019-05-09-use-vim-as-a-php-ide.md": {"alternate": "docs/_posts/2019-05-08-use-vim-as-a-php-ide.md"}, - "docs/_posts/2019-05-10-use-vim-as-a-c-cpp-ide.md": {"alternate": "docs/_posts/2019-05-11-use-vim-as-a-c-cpp-ide.md"}, - "docs/_posts/2019-05-11-use-vim-as-a-c-cpp-ide.md": {"alternate": "docs/_posts/2019-05-10-use-vim-as-a-c-cpp-ide.md"}, - "docs/_posts/2018-09-27-use-vim-as-ide.md": {"alternate": "docs/_posts/2018-09-28-use-vim-as-ide.md"}, - "docs/_posts/2018-01-23-grep-on-the-fly-in-spacevim.md": {"alternate": "docs/_posts/2018-01-31-grep-on-the-fly-in-spacevim.md"}, - "docs/_posts/2018-01-31-grep-on-the-fly-in-spacevim.md": {"alternate": "docs/_posts/2018-01-23-grep-on-the-fly-in-spacevim.md"}, - "docs/_posts/2018-09-28-use-vim-as-ide.md": {"alternate": "docs/_posts/2018-09-27-use-vim-as-ide.md"}, - "docs/_posts/2020-01-27-manage-project-alternate-files.md": {"alternate": "docs/_posts/2020-01-28-manage-project-alternate-files.md"}, - "docs/_posts/2020-01-28-manage-project-alternate-files.md": {"alternate": "docs/_posts/2020-01-27-manage-project-alternate-files.md"}, - "docs/_posts/2019-07-17-Asynchronous-todo-manager.md": {"alternate": "docs/_posts/2019-07-16-Asynchronous-todo-manager.md"}, - "docs/_posts/2019-07-16-Asynchronous-todo-manager.md": {"alternate": "docs/_posts/2019-07-17-Asynchronous-todo-manager.md"} + "autoload/SpaceVim/api/*.vim": { "alternate": "test/api/{}.vader" }, + "autoload/SpaceVim/plugins/a.vim": { "alternate": "test/plugin/a.vader" }, + "test/plugin/a.vader": { "alternate": "autoload/SpaceVim/plugins/a.vim" }, + "autoload/SpaceVim/layers/lang/*.vim": { "doc": "docs/layers/lang/{}.md" }, + "test/api/*.vader": { "alternate": "autoload/SpaceVim/api/{}.vim" }, + "docs/layers/lang/*.md": { + "alternate": "docs/cn/layers/lang/{}.md", + "code": "autoload/SpaceVim/layers/lang/{}.vim" + }, + "docs/cn/layers/lang/*.md": { + "alternate": "docs/layers/lang/{}.md", + "code": "autoload/SpaceVim/layers/lang/{}.vim" + }, + "docs/*.md": { "alternate": "docs/cn/{}.md" }, + "docs/cn/*.md": { "alternate": "docs/{}.md" }, + "doc/*.txt": { "alternate": "doc/{}.cnx" }, + "doc/*.cnx": { "alternate": "doc/{}.txt" }, + "docs/*.cmd": { "alternate": "docs/cn/{}.cmd" }, + "docs/cn/*.cmd": { "alternate": "docs/{}.cmd" }, + "wiki/en/Project-layout.md": { "alternate": "wiki/cn/Project-layout.md" }, + "wiki/cn/Project-layout.md": { "alternate": "wiki/en/Project-layout.md" }, + "wiki/en/Following-HEAD.md": { "alternate": "wiki/cn/Following-HEAD.md" }, + "wiki/cn/Following-HEAD.md": { "alternate": "wiki/en/Following-HEAD.md" }, + "docs/_posts/2017-02-11-use-vim-as-a-java-ide.md": { + "alternate": "docs/_posts/2018-09-19-use-vim-as-a-java-ide.md" + }, + "docs/_posts/2018-09-19-use-vim-as-a-java-ide.md": { + "alternate": "docs/_posts/2017-02-11-use-vim-as-a-java-ide.md" + }, + "docs/_posts/2019-01-08-use-vim-as-a-go-ide.md": { + "alternate": "docs/_posts/2019-01-07-use-vim-as-a-go-ide.md" + }, + "docs/_posts/2019-01-07-use-vim-as-a-go-ide.md": { + "alternate": "docs/_posts/2019-01-08-use-vim-as-a-go-ide.md" + }, + "docs/_posts/2019-01-28-use-vim-as-a-coffeescript-ide.md": { + "alternate": "docs/_posts/2019-01-29-use-vim-as-a-coffeescript-ide.md" + }, + "docs/_posts/2019-01-29-use-vim-as-a-coffeescript-ide.md": { + "alternate": "docs/_posts/2019-01-28-use-vim-as-a-coffeescript-ide.md" + }, + "docs/_posts/2018-09-27-use-vim-as-a-python-ide.md": { + "alternate": "docs/_posts/2018-09-28-use-vim-as-a-python-ide.md" + }, + "docs/_posts/2018-09-28-use-vim-as-a-python-ide.md": { + "alternate": "docs/_posts/2018-09-27-use-vim-as-a-python-ide.md" + }, + "docs/_posts/2019-02-11-use-vim-as-a-perl-ide.md": { + "alternate": "docs/_posts/2019-02-12-use-vim-as-a-perl-ide.md" + }, + "docs/_posts/2019-02-12-use-vim-as-a-perl-ide.md": { + "alternate": "docs/_posts/2019-02-11-use-vim-as-a-perl-ide.md" + }, + "docs/_posts/2019-02-17-use-vim-as-a-ruby-ide.md": { + "alternate": "docs/_posts/2019-02-18-use-vim-as-a-ruby-ide.md" + }, + "docs/_posts/2019-02-18-use-vim-as-a-ruby-ide.md": { + "alternate": "docs/_posts/2019-02-17-use-vim-as-a-ruby-ide.md" + }, + "docs/_posts/2019-05-08-use-vim-as-a-php-ide.md": { + "alternate": "docs/_posts/2019-05-09-use-vim-as-a-php-ide.md" + }, + "docs/_posts/2019-05-09-use-vim-as-a-php-ide.md": { + "alternate": "docs/_posts/2019-05-08-use-vim-as-a-php-ide.md" + }, + "docs/_posts/2019-05-10-use-vim-as-a-c-cpp-ide.md": { + "alternate": "docs/_posts/2019-05-11-use-vim-as-a-c-cpp-ide.md" + }, + "docs/_posts/2019-05-11-use-vim-as-a-c-cpp-ide.md": { + "alternate": "docs/_posts/2019-05-10-use-vim-as-a-c-cpp-ide.md" + }, + "docs/_posts/2018-09-27-use-vim-as-ide.md": { + "alternate": "docs/_posts/2018-09-28-use-vim-as-ide.md" + }, + "docs/_posts/2018-01-23-grep-on-the-fly-in-spacevim.md": { + "alternate": "docs/_posts/2018-01-31-grep-on-the-fly-in-spacevim.md" + }, + "docs/_posts/2018-01-31-grep-on-the-fly-in-spacevim.md": { + "alternate": "docs/_posts/2018-01-23-grep-on-the-fly-in-spacevim.md" + }, + "docs/_posts/2018-09-28-use-vim-as-ide.md": { + "alternate": "docs/_posts/2018-09-27-use-vim-as-ide.md" + }, + "docs/_posts/2020-01-27-manage-project-alternate-files.md": { + "alternate": "docs/_posts/2020-01-28-manage-project-alternate-files.md" + }, + "docs/_posts/2020-01-28-manage-project-alternate-files.md": { + "alternate": "docs/_posts/2020-01-27-manage-project-alternate-files.md" + }, + "docs/_posts/2019-07-17-Asynchronous-todo-manager.md": { + "alternate": "docs/_posts/2019-07-16-Asynchronous-todo-manager.md" + }, + "docs/_posts/2019-07-16-Asynchronous-todo-manager.md": { + "alternate": "docs/_posts/2019-07-17-Asynchronous-todo-manager.md" + } } diff --git a/autoload/SpaceVim/layers/lang/typescript.vim b/autoload/SpaceVim/layers/lang/typescript.vim index 4db71602c..420b234a4 100644 --- a/autoload/SpaceVim/layers/lang/typescript.vim +++ b/autoload/SpaceVim/layers/lang/typescript.vim @@ -6,6 +6,22 @@ " License: GPLv3 "============================================================================= +"" +" @section lang#typescript, layer-lang-typescript +" @parentsection layers +" This layer provides typescript development support for SpaceVim. +" To enable this layer, add following sinippet into SpaceVim configuration +" file. +" > +" [layers] +" name = "lang#typescript" +" < +" @subsection mappings +" > +" Ket binding Description +" ---------------------------------------- +" g d defintion preview +" < function! SpaceVim#layers#lang#typescript#plugins() abort let plugins = [] @@ -15,7 +31,7 @@ function! SpaceVim#layers#lang#typescript#plugins() abort if has('nvim') call add(plugins, ['mhartington/nvim-typescript', {'build': './install.sh'}]) else - call add(plugins, ['Quramy/tsuquyomi']) + call add(plugins, ['Quramy/tsuquyomi', {'merged' : 0}]) endif endif return plugins @@ -34,6 +50,11 @@ function! SpaceVim#layers#lang#typescript#config() abort call SpaceVim#mapping#space#regesit_lang_mappings('typescript', \ function('s:on_ft')) call SpaceVim#plugins#repl#reg('typescript', ['ts-node', '-i']) + call SpaceVim#plugins#runner#reg_runner('typescript', { + \ 'exe' : 'ts-node', + \ 'usestdin' : 1, + \ 'opt': [], + \ }) endfunction function! SpaceVim#layers#lang#typescript#set_variable(var) abort @@ -55,30 +76,27 @@ function! s:on_ft() abort nnoremap K :call SpaceVim#lsp#show_doc() call SpaceVim#mapping#space#langSPC('nnoremap', ['l', 'd'], - \ 'call SpaceVim#lsp#show_doc()', 'show_document', 1) + \ 'call SpaceVim#lsp#show_doc()', 'show-document', 1) call SpaceVim#mapping#space#langSPC('nnoremap', ['l', 'e'], - \ 'call SpaceVim#lsp#rename()', 'rename symbol', 1) + \ 'call SpaceVim#lsp#rename()', 'rename-symbol', 1) else if has('nvim') - call SpaceVim#mapping#space#langSPC('nnoremap', ['l', 'c'], 'TSTypeDef', - \ 'type definition', 1) + nnoremap gD :TSTypeDef call SpaceVim#mapping#space#langSPC('nnoremap', ['l', 'd'], 'TSDoc', - \ 'show document', 1) + \ 'show-document', 1) + nnoremap K :TSDoc call SpaceVim#mapping#space#langSPC('nnoremap', ['l', 'e'], 'TSRename', - \ 'rename symbol', 1) + \ 'rename-symbol', 1) call SpaceVim#mapping#space#langSPC('nnoremap', ['l', 'f'], 'TSGetCodeFix', \ 'code fix', 1) call SpaceVim#mapping#space#langSPC('nnoremap', ['l', 'i'], 'TSImport', \ 'import', 1) call SpaceVim#mapping#space#langSPC('nnoremap', ['l', 'p'], 'TSDefPreview', \ 'preview definition', 1) - call SpaceVim#mapping#space#langSPC('nnoremap', ['l', 'r'], 'TSRefs', - \ 'references', 1) call SpaceVim#mapping#space#langSPC('nnoremap', ['l', 't'], 'TSType', \ 'view type', 1) else - call SpaceVim#mapping#space#langSPC('nnoremap', ['l', 'c'], 'TsuTypeDefinition', - \ 'type definition', 1) + nnoremap gD :TsuTypeDefinition call SpaceVim#mapping#space#langSPC('nnoremap', ['l', 'd'], 'TsuquyomiSignatureHelp', \ 'show document', 1) call SpaceVim#mapping#space#langSPC('nnoremap', ['l', 'e'], 'TsuquyomiRenameSymbol', @@ -87,15 +105,19 @@ function! s:on_ft() abort \ 'import', 1) call SpaceVim#mapping#space#langSPC('nnoremap', ['l', 'm'], 'TsuImplementation', \ 'interface implementations', 1) - call SpaceVim#mapping#space#langSPC('nnoremap', ['l', 'r'], 'TsuquyomiReferences', - \ 'references', 1) endif endif - let g:_spacevim_mappings_space.l.g = {'name' : '+Generate'} + " code runner + call SpaceVim#mapping#space#langSPC('nnoremap', ['l', 'r'], + \ 'call SpaceVim#plugins#runner#open()', 'execute current file', 1) + + " generate groups + let g:_spacevim_mappings_space.l.g = {'name' : '+Generate'} call SpaceVim#mapping#space#langSPC('nnoremap', ['l', 'g', 'd'], 'JsDoc', \ 'generate JSDoc', 1) + " REPL support let g:_spacevim_mappings_space.l.s = {'name' : '+Send'} call SpaceVim#mapping#space#langSPC('nmap', ['l','s', 'i'], \ 'call SpaceVim#plugins#repl#start("typescript")', diff --git a/doc/SpaceVim.txt b/doc/SpaceVim.txt index 59be0792a..ad6a5ecfd 100644 --- a/doc/SpaceVim.txt +++ b/doc/SpaceVim.txt @@ -122,13 +122,14 @@ CONTENTS *SpaceVim-contents* 47. lang#rust.................................|SpaceVim-layer-lang-rust| 48. lang#scala...............................|SpaceVim-layer-lang-scala| 49. lang#tcl...................................|SpaceVim-layer-lang-tcl| - 50. lang#xml...................................|SpaceVim-layer-lang-xml| - 51. operator...................................|SpaceVim-layer-operator| - 52. shell.........................................|SpaceVim-layer-shell| - 53. test...........................................|SpaceVim-layer-test| - 54. tmux...........................................|SpaceVim-layer-tmux| - 55. tools#dash...............................|SpaceVim-layer-tools-dash| - 56. tools#zeal...............................|SpaceVim-layer-tools-zeal| + 50. lang#typescript.....................|SpaceVim-layer-lang-typescript| + 51. lang#xml...................................|SpaceVim-layer-lang-xml| + 52. operator...................................|SpaceVim-layer-operator| + 53. shell.........................................|SpaceVim-layer-shell| + 54. test...........................................|SpaceVim-layer-test| + 55. tmux...........................................|SpaceVim-layer-tmux| + 56. tools#dash...............................|SpaceVim-layer-tools-dash| + 57. tools#zeal...............................|SpaceVim-layer-tools-zeal| 7. API........................................................|SpaceVim-api| 1. cmdlinemenu................................|SpaceVim-api-cmdlinemenu| 2. data#dict....................................|SpaceVim-api-data-dict| @@ -2472,6 +2473,23 @@ This layer also provides REPL support for tcl, the key bindings are: < +============================================================================== +LANG#TYPESCRIPT *SpaceVim-layer-lang-typescript* + +This layer provides typescript development support for SpaceVim. To enable +this layer, add following sinippet into SpaceVim configuration file. +> + [layers] + name = "lang#typescript" +< +MAPPINGS + +> + Ket binding Description + ---------------------------------------- + g d defintion preview +< + ============================================================================== LANG#XML *SpaceVim-layer-lang-xml* diff --git a/docs/_posts/2020-04-11-use-vim-as-a-typescript-ide.md b/docs/_posts/2020-04-11-use-vim-as-a-typescript-ide.md new file mode 100644 index 000000000..958dde213 --- /dev/null +++ b/docs/_posts/2020-04-11-use-vim-as-a-typescript-ide.md @@ -0,0 +1,105 @@ +--- +title: "使用 Vim 搭建 TypeScript 开发环境" +categories: [tutorials_cn, blog_cn] +image: https://user-images.githubusercontent.com/13142418/79134364-2bd8db80-7de0-11ea-848e-71d3f07cb79d.png +excerpt: "这篇文章主要介绍如何使用 SpaceVim 搭建 TypeScript 的开发环境，简介 lang#typescript 模块所支持的功能特性以及使用技巧" +permalink: /cn/:title/ +lang: zh +type: BlogPosting +comments: true +commentsID: "使用 Vim 搭建 TypeScript 开发环境" +--- + +# [Blogs](../blog/) >> 使用 Vim 搭建 TypeScript 开发环境 + +SpaceVim 是一个模块化的 Vim IDE，针对 TypeScript 这一语言的支持主要依靠 `lang#typescript` 模块以及与之相关的其它模块。 +的这篇文章主要介绍如何使用 SpaceVim 搭建 TypeScript 的开发环境，侧重介绍跟 TypeScript 开发相关使用技巧。 +在阅读这篇文章之前，可以先阅读《[使用 Vim 搭建基础的开发环境](../use-vim-as-ide/)》，对语言相关以外的功能有一个大致的了解。 + + + +- [安装模块](#安装模块) +- [代码自动补全](#代码自动补全) +- [语法检查](#语法检查) +- [工程文件跳转](#工程文件跳转) +- [快速运行](#快速运行) +- [代码格式化](#代码格式化) +- [交互式编程](#交互式编程) + + + +### 安装模块 + +SpaceVim 初次安装时默认并未启用 TypeScript 相关语言模块。首先需要启用 +`lang#typescript` 模块, 通过快捷键 `SPC f v d` 打开配置文件，添加： + +```toml +[[layers]] + name = "lang#typescript" +``` + +启用 `lang#typescript` 模块后，在打开 TypeScript 文件时，就可以使用语言专属快捷键，这些快捷键都是以 `SPC l` 为前缀的。 + +### 代码自动补全 + +代码自动补全依赖 `autocomplete` 模块，该模块默认已经启动了，为 SpaceVim 提供了自动补全功能。 +该模块会根据当前环境自动在多种补全引擎之间选择合适的， +默认的补全引擎有：deoplete、neocomplete、ycm、asyncomplete 以及 neocomplcache。 +几种自动补全引擎当中，要数 deoplete 的体验效果最好。 + +![ts](https://user-images.githubusercontent.com/13142418/79134364-2bd8db80-7de0-11ea-848e-71d3f07cb79d.png) + +### 语法检查 + +`checkers` 模块为 SpaceVim 提供了语法检查的功能，该模块默认已经载入。该模块默认使用 [neomake](https://github.com/neomake/neomake) +这一异步语法检查工具。对于 TypeScript 的支持是通过异步调用 [tslint](https://www.npmjs.com/package/tslint) 命令来完成的。 + +可通过以下命令安装： + +```sh +npm install -g tslint +``` + +### 工程文件跳转 + +SpaceVim 自带工程管理插件，可以识别项目根目录，自动跳转alternate文件。 +可以在工程根目录添加 `.project_alt.json` 文件，并加入以下内容： + +```json +{ + "src/*.ts": {"alternate": "test/{}.ts"}, + "test/*.ts": {"alternate": "src/{}.ts"} +} +``` + +通过以上的配置，就可以使用命令 `:A` 在源文件和测试文件之间进行跳转。 + +### 快速运行 + +在编辑 TypeScript 文件时，可以快速运行当前文件，这个功能有点类似于 vscode 的 code runner 插件，默认的快捷键是 `SPC l r`。按下后， +会在屏幕下方打开一个插件窗口，运行的结果会被展示在窗口内。于此同时，光标并不会跳到该插件窗口，避免影响编辑。在这里需要说明下， +这一功能是根据当前缓存器调用相对应的 `node` 命令，无需保存文件。 + +![tsrunner](https://user-images.githubusercontent.com/13142418/79641052-b4cc8a00-81c7-11ea-8e95-35bc816b17d9.png) + +### 代码格式化 + +TypeScript 代码格式化，主要依赖 `format` 模块，同时需要安装相关的后台命令 [`tsfmt`](https://www.npmjs.com/package/typescript-formatter)： + +```toml +[[layers]] + name = "format" +``` + +安装 `tsfmt` 命令： + +```sh +npm install -g typescript-formatter +``` + +### 交互式编程 + +在编辑 TypeScript 文件时，可通过快捷键 `SPC l s i` 启动 `ts-node -i` 交互窗口，之后使用快捷键将代码发送至解释器。默认快捷键都以 `SPC l s` 为前缀。 + +目前 TypeScript 交互式编程还未完全实现，主要是因为 `ts-node -i` 执行是并不刷新buffer，可查看[ts-node #1013](https://github.com/TypeStrong/ts-node/issues/1013)。 + diff --git a/docs/_posts/2020-04-12-use-vim-as-a-typescript-ide.md b/docs/_posts/2020-04-12-use-vim-as-a-typescript-ide.md new file mode 100644 index 000000000..77bdf1821 --- /dev/null +++ b/docs/_posts/2020-04-12-use-vim-as-a-typescript-ide.md @@ -0,0 +1,97 @@ +--- +title: "Use Vim as a TypeScript IDE" +categories: [tutorials, blog] +image: https://user-images.githubusercontent.com/13142418/79134364-2bd8db80-7de0-11ea-848e-71d3f07cb79d.png +excerpt: "A general guide for using SpaceVim as TypeScript IDE, including layer configuration, requiems installation and usage." +type: BlogPosting +comments: true +commentsID: "Use Vim as a TypeScript IDE" +--- + +# [Blogs](../blog/) >> Use Vim as a TypeScript IDE + +This is a general guide for using SpaceVim as a TypeScript IDE, including layer configuration and usage. +Each of the following sections will be covered: + + + +- [Enable language layer](#enable-language-layer) +- [Code completion](#code-completion) +- [Syntax linting](#syntax-linting) +- [Jump to test file](#jump-to-test-file) +- [running code](#running-code) +- [Code formatting](#code-formatting) +- [REPL support](#repl-support) + + + +### Enable language layer + +By default `lang#typescript` layer is not loaded. To add TypeScript language support in SpaceVim, +you need to enable the `lang#typescript` layer. Press `SPC f v d` to open +SpaceVim configuration file, and add following configuration: + +```toml +[[layers]] + name = "lang#typescript" +``` + +for more info, you can read the [lang#typescript](../layers/lang/typescript/) layer documentation. + +### Code completion + +`lang#typescript` layer will load the typescript plugins automatically, unless overriden in your `init.toml`. +The completion menu will be opened as you type. + +![ts](https://user-images.githubusercontent.com/13142418/79134364-2bd8db80-7de0-11ea-848e-71d3f07cb79d.png) + +### Syntax linting + +The checkers layer is enabled by default. This layer provides asynchronous syntax linting via [neomake](https://github.com/neomake/neomake). +It will run [tslint](https://www.npmjs.com/package/tslint) asynchronously. + +To install eslint, just run following command in terminal. + +```sh +npm install -g tslint +``` + +### Jump to test file + +SpaceVim use built-in plugin to manage the files in a project, +you can add a `.project_alt.json` to the root of your project with following content: + +```json +{ + "src/*.ts": {"alternate": "test/{}.ts"}, + "test/*.ts": {"alternate": "src/{}.ts"} +} +``` + +with this configuration, you can jump between the source code and test file via command `:A`. + +### running code + +To run code in current buffer, you can press `SPC l r`, and a split window +will be opened, the output will be shown in this window. +It is running asynchronously, and will not block your vim. + +![tsrunner](https://user-images.githubusercontent.com/13142418/79641052-b4cc8a00-81c7-11ea-8e95-35bc816b17d9.png) + +### Code formatting + +The format layer is also enabled by default, with this layer you can use key binding `SPC b f` to format current buffer. +Before using this feature, please install the command line tool [`tsfmt`](https://www.npmjs.com/package/typescript-formatter). + +```sh +npm install -g typescript-formatter +``` + +### REPL support + +Start a `ts-node -i` inferior REPL process with `SPC l s i`. After the REPL process has been started, you can +send code to inferior process, all key bindings begins with `SPC l s` prefix, including sending line, sending selection or even +send whole buffer. + +NOTE: repl support for typescript has not be implemented, because the `ts-node -i` do not fflush stdout, see [ts-node #1013](https://github.com/TypeStrong/ts-node/issues/1013). + diff --git a/docs/cn/layers/lang/typescript.md b/docs/cn/layers/lang/typescript.md index 1b1c30c03..b0137bde0 100644 --- a/docs/cn/layers/lang/typescript.md +++ b/docs/cn/layers/lang/typescript.md @@ -53,7 +53,6 @@ npm install -g typescript | 快捷键 | 功能描述 | | ----------- | ------------------ | -| `SPC l c` | type definition | | `SPC l d` | show documentation | | `SPC l e` | rename symbol | | `SPC l f` | code fix | @@ -63,3 +62,4 @@ npm install -g typescript | `SPC l t` | type | | `SPC l g d` | generate doc | | `g d` | defintion preview | +| `g D` | type definition | diff --git a/docs/layers/lang/typescript.md b/docs/layers/lang/typescript.md index aed9d9ae7..ec01b3b6e 100644 --- a/docs/layers/lang/typescript.md +++ b/docs/layers/lang/typescript.md @@ -12,6 +12,8 @@ description: "This layer is for TypeScript development, includding code completi - [Features](#features) - [Layer configuration](#layer-configuration) - [Key bindings](#key-bindings) + - [Code runner](#code-runner) + - [Inferior REPL process](#inferior-repl-process) @@ -50,15 +52,31 @@ npm install -g typescript ## Key bindings -| Key Bindings | Descriptions | -| ------------ | ------------------ | -| `SPC l c` | type definition | -| `SPC l d` | show documentation | -| `SPC l e` | rename symbol | -| `SPC l f` | code fix | -| `SPC l g` | definition | -| `SPC l i` | import | -| `SPC l r` | references | -| `SPC l t` | type | -| `SPC l g d` | generate doc | -| `g d` | defintion preview | +| Key Bindings | Descriptions | +| --------------- | ------------------ | +| `SPC l d` / `K` | show documentation | +| `SPC l e` | rename symbol | +| `SPC l f` | code fix | +| `SPC l g` | definition | +| `SPC l i` | import | +| `SPC l t` | type | +| `SPC l g d` | generate doc | +| `g d` | defintion preview | +| `g D` | type definition | + +### Code runner + +To run TypeScript code in current buffer, you can press `SPC l r`. It will run without loss focus, +and the result will be shown in a runner buffer. + +### Inferior REPL process + +Start a `ts-node -i` inferior REPL process with `SPC l s i`. + +Send code to inferior process commands: + +| Key Bindings | Descriptions | +| ------------ | ------------------------------------------------ | +| `SPC l s b` | send buffer and keep code buffer focused | +| `SPC l s l` | send line and keep code buffer focused | +| `SPC l s s` | send selection text and keep code buffer focused |