If it helps, this is the current setup I use with Kakoune and TypeScript.
I define hidden commands for formatting with eslint, prettier, or tslint. Depending on the project’s requirements, a different formatter might be required. I use npx and the actual file to make sure that the tool picks up the correct project config for formatting.
define-command -hidden eslint-format %{
set-option window autoreload 'yes'
execute-keys ': w<ret>'
nop %sh{
npx eslint --fix "$kak_buffile"
}
hook -once window BufReload .* %{
unset-option window autoreload
}
}
define-command -hidden prettier-format %{
execute-keys '%|npx prettier --stdin-filepath $kak_buffile<ret><space>;'
}
define-command -hidden tslint-format %{
set-option window autoreload 'yes'
execute-keys ': w<ret>'
nop %sh{
npx tslint --fix "$kak_buffile"
}
hook -once window BufReload .* %{
unset-option window autoreload
}
}
The nice thing about the prettier formatter is, that it doesn’t need any file changes on disk. It simply updates the buffer with the formatted content.
eslint and tslint save the file to disk, format it there, and then Kakoune auto-reloads that change.
If you have jq available, you can use eslint formatting without writing anything to disk.
Replace the eslint-format command from above with this one:
define-command -hidden eslint-format %{
execute-keys '%|echo "$kak_selection" | npx eslint --format json --fix-dry-run --stdin --stdin-filename "$kak_buffile" | jq -j ".[].output"<ret>'
}
Then I do the following to let me trigger linting and formatting.
For eslint, I use the lintcmd from the wiki (Lint) which works fine for me.
I have a development user mode, where keys for linting, formatting, etc. go.
# Setting eslint as linter and default formatter
hook global WinSetOption filetype=(javascript|typescript) %{
# Eslint
set window lintcmd 'run() { cat "$1" | npx eslint -f $path_to/node_modules/eslint-formatter-kakoune/index.js --stdin --stdin-filename $kak_buffile;} && run '
map window development l -docstring 'lint' ': lint<ret>'
lint-enable
# Formatting
# Defaults to `eslint --fix`
# Overwrite this alias in a `.kakrc.local` to use one of the other formatters
# that are defined commands above.
alias window tsformat eslint-format
map window development f -docstring 'format' ': tsformat<ret>'
}
I try to source .kakrc.local as described in the wiki (IDE), which allows me to set the formatter on a per-project basis.
So:
- Linting with
eslint works just fine and as expected.
- Linting with
tslint doesn’t work, as I don’t know a formatter. However, I try to avoid tslint where possible anyways.
- Formatting “works” with all options, but I really only like the
prettier option and eslint with jq. But that is an extra dependency on jq for eslint.
Could anyone help me and tell me how I could keep the cursor position with the prettier approach? Now it ends up at the very end due to the key combinations.
You could add hooks to auto-lint and/or auto-format on specific occasions if you want, e.g. when leaving insert mode or writing a buffer.
With prettier, since it only changes the buffer, you can do a BufWritePre hook, which works quite nicely. With the other formatters it is required to use BufWritePost.
You can do something like the following in your .kakrc.local:
hook global WinSetOption filetype=(javascript|typescript) %{
# Use *one* of the following to replace eslint as a formatter:
alias window tsformat prettier-format
alias window tsformat tslint-format
# To auto-format on write with prettier:
# (Or eslint if you go with the jq option that doesn't write to disk)
hook buffer BufWritePre .* tsformat
}
Hope this helps anyone looking to do TS development with Kakoune.
I could make it more generic and add it to the Wiki, if there is interest.
