Gaze/SpaceVim
1
0
Fork 0
mirror of https://github.com/SpaceVim/SpaceVim.git synced 2025-01-23 10:40:03 +08:00
Code Issues Projects Releases Wiki Activity

Add post for typescript (#3442)

Browse Source
This commit is contained in:
Wang Shidong 2020-04-18 23:10:07 +08:00 committed by GitHub
parent 627f913c75
commit 42ea773008
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 389 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
.projections.json
View File

@ -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"
}
}

50
autoload/SpaceVim/layers/lang/typescript.vim
View File

@ -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 <silent><buffer> K :call SpaceVim#lsp#show_doc()<CR>
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 <silent><buffer> gD :<C-u>TSTypeDef<Cr>
call SpaceVim#mapping#space#langSPC('nnoremap', ['l', 'd'], 'TSDoc',
\ 'show document', 1)
\ 'show-document', 1)
nnoremap <silent><buffer> K :<C-u>TSDoc<Cr>
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 <silent><buffer> gD :<C-u>TsuTypeDefinition<Cr>
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")',

32
doc/SpaceVim.txt
View File

@ -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*

105
docs/_posts/2020-04-11-use-vim-as-a-typescript-ide.md Normal file
View File

@ -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/)》，对语言相关以外的功能有一个大致的了解。
<!-- vim-markdown-toc GFM -->
- [安装模块](#安装模块)
- [代码自动补全](#代码自动补全)
- [语法检查](#语法检查)
- [工程文件跳转](#工程文件跳转)
- [快速运行](#快速运行)
- [代码格式化](#代码格式化)
- [交互式编程](#交互式编程)
<!-- vim-markdown-toc -->
### 安装模块
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)。

97
docs/_posts/2020-04-12-use-vim-as-a-typescript-ide.md Normal file
View File

@ -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:
<!-- vim-markdown-toc GFM -->
- [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)
<!-- vim-markdown-toc -->
### 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).

2
docs/cn/layers/lang/typescript.md
View File

@ -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 |

42
docs/layers/lang/typescript.md
View File

@ -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)
<!-- vim-markdown-toc -->
@ -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 |