Helix - Front-End Power
Tags: helix, frontend, czech
Published: 2024-03-12 20:51:40

[Helix](https://helix-editor.com/) se už stal mým hlavním prostředím pro vývoj Front-End. Plně nahradil můj setup, který jsem si vytvořil v [Neovim](https://neovim.io/). Stále některé funkce oproti mému Neovim setupu chybí, jako například podpora Tabnine či GitHub Copilot a několik pár pluginů, ale i bez toho se dá skvěle fungovat a být efektivní.

![helix](https://lukaskanka.cz/img/helix.png)

Mém setupu Helix oproti čisté instalaci najdeš configuraci v `langueges.toml` pro HTML, CSS, Javascript, Typescript a markdown (který velmi využívám). 
Také navíc tu je skvělé téma Osaka kterým jsem nahradil několik let všude používaného Dracula theme, automatické dokončování závorek, separátor, ukazatel v procentech kde se nacházíte v kódu, autosave, auto writte po zmáčknutí escape, vyvolání configurace zkratkou `Tab + C` a další skvělé věci.

Pro správnou funkčnost mého setupu si doinstaluj, [Node.js](https://nodejs.org/en) a pro podporu jazyků  díky LSP tyto balíčky:
[vscode-html-language-server](https://github.com/microsoft/vscode-html-languageservice)
[vscode-css-language-server](https://github.com/microsoft/vscode-css-languageservice)
[typescript-language-server](https://github.com/typescript-language-server/typescript-language-server)
[emmet-ls](https://github.com/aca/emmet-ls)
[tailwindcss-language-server](https://github.com/tailwindlabs/tailwindcss-intellisense/blob/master/packages/tailwindcss-language-server/README.md)
[marksman](https://github.com/artempyanykh/marksman)
[markdoc-ls](https://github.com/markdoc-extra/markdoc-ls)

Na celý setup se můžeš podívat v mám repozitáři na [Gitea](https://git.archoslinux.cz/kankys/Helix-frontend-setup.git)

A samotný setup máš zde, pokud budu dělat změny vždy bude na Gitea aktuální verze:

`config.toml`:
```
theme = "osaka"


[editor]
color-modes = true
auto-pairs = true 
auto-save = true

[keys.normal]
"tab" = { c = [":config-open"]}
"esc" = ["collapse_selection", ":w"]

[keys.select]
"esc" = ["collapse_selection", "normal_mode", ":w"]

[keys.insert]
"esc" = ["normal_mode", ":w"]

[editor.statusline]
left = ["mode", "spinner"]
center = ["file-name"]
right = ["diagnostics", "selections", "position", "file-encoding", "file-line-ending", "file-type", "position-percentage" ]
separator = "│"
mode.normal = "NORMAL"
mode.insert = "INSERT"
mode.select = "SELECT"

[editor.indent-guides]
render = true
```

`languages.toml`:
```
 [language-server.emmet-lsp]
command = "emmet-language-server"
args = ["--stdio"]

[[language]]
name = "html"
roots = [".git"]
language-servers = ["emmet-lsp"]

[language-server.rust-analyzer.config.check]
command = "clippy"

 [language-server.emmet-ls]
 args = ["--stdio"]
 command="emmet-ls"

 [language-server.eslint]
 args = ["--stdio"]
 command = "vscode-eslint-language-server"

[[language]]
name = "html"
formatter = { command = 'prettier', args = ["--parser", "html"] }
language-servers = ["vscode-html-language-server", "emmet-ls"]

 [language-server.vscode-css-language-server.config]
 css = { validate = { enable = true } }
 scss = { validate = { enable = true } }
 less = { validate = { enable = true } }
 provideFormatter = true

[[language]]
 name = "css"
 formatter = { command = 'npx', args = ["prettier", "--parser", "css"] }
 language-servers = [ "vscode-css-language-server", "tailwindcss-react", "emmet-ls", "tailwindcss-ls"]
 auto-format = true

[[language]]
 name = "scss"
 formatter = { command = "prettier", args = ["--stdin-filepath", "dummy.scss"] }
 indent = { tab-width = 4, unit = "\t" }
 language-servers = ["vscode-css-language-server"]
 auto-format = true

[[language]]
name = "javascript"
formatter = { command = 'prettier', args = ["--parser", "typescript"] }
auto-format = true

[[language]]
name = "typescript"
formatter = { command = 'prettier', args = ["--parser", "typescript"] }
auto-format = true

[[language]]
name = "jsx"
formatter = { command = 'prettier', args = ["--parser", "typescript"] }
auto-format = true
language-servers = ["typescript-language-server", "emmet-ls"]

[[language]]
name = "tsx"
formatter = { command = 'prettier', args = ["--parser", "typescript"] }
auto-format = true
language-servers = ["typescript-language-server", "emmet-ls"]

[[language]]
name = "json"
formatter = { command = 'prettier', args = ["--parser", "json"] }

[[language]]
name = "markdown"
formatter = { command = 'prettier', args = ["--parser", "markdown"] }
soft-wrap.enable = true
soft-wrap.wrap-at-text-width = true
```

`themes/osaka.toml`:
```
"attribute" = { fg = "blue300" }
"keyword" = { fg = "green500" }
"keyword.directive" = { fg = "red500" }
"keyword.storage.modifier" = { fg = "green500" }
"keyword.storage.type" = { fg = "green500" }
"keyword.control.import" = { fg = "green500" }
"keyword.function" = { fg = "green500" }
"namespace" = { fg = "violet300" }
"operator" = { fg = "green500" }
# Special also affects typed chars in file finder
"special" = { fg = "orange500" }
"variable" = { fg = "base0" }
"variable.builtin" = { fg = "orange500" }
"variable.parameter" = { fg = "orange500" }
"type" = { fg = "yellow300" }
"type.builtin" = { fg = "yellow300", modifiers = ["bold"] }
"constructor" = { fg = "orange500" }
"function" = { fg = "blue500" }
"function.macro" = { fg = "magenta900" }
"function.builtin" = { fg = "blue900", modifiers = ["bold"] }
"function.special" = { fg = "magenta900" }
"comment" = { fg = "base01" }
"string" = { fg = "cyan500" }
"constant" = { fg = "cyan500" }
"constant.builtin" = { fg = "cyan500", modifiers = ["bold"] }
"constant.character" = { fg = "cyan500" }
"constant.character.escape" = { fg = "red900", modifiers = ["bold"] }
"label" = { fg = "green500" }
"module" = { fg = "violet900" }
"tag" = { fg = "green500" }
"punctuation" = { fg = "orange500" }
"punctuation.delimiter" = { fg = "green500" }
"punctuation.bracket" = { fg = "orange500" }
"punctuation.special" = { fg = "orange500" }
"variable.other.member" = { fg = "blue500" }

# TODO
"markup.heading" = "green900"
"markup.list" = "red300"
"markup.bold" = { fg = "yellow500", modifiers = ["bold"] }
"markup.italic" = { fg = "magenta900", modifiers = ["italic"] }
"markup.strikethrough" = { modifiers = ["crossed_out"] }
"markup.link.url" = { fg = "yellow900", modifiers = ["underlined"] }
"markup.link.text" = "blue500"
"markup.quote" = "cyan900"
"markup.raw" = "green900"

"diff.plus" = { fg = "green900" }
"diff.delta" = { fg = "orange900" }
"diff.minus" = { fg = "red900" }

# Uncomment for transparent background
# "ui.background" = {}
"ui.background" = { bg = "base04" }

"ui.virtual.whitespace" = { fg = "base01" }
"ui.virtual.inlay-hint" = { fg = "base01", modifiers = ["italic"] }

# Line Numbers
"ui.linenr" = { fg = "base01" }
"ui.linenr.selected" = { fg = "yellow500", modifiers = ["bold"] }
"ui.gutter.selected" = { bg = "base02" }
"ui.cursorline" = { bg = "base04" }

"ui.statusline" = { fg = "base1", bg = "base03" }
"ui.statusline.inactive" = { fg = "base0", bg = "base04" }
"ui.statusline.normal" = { fg = "base03", bg = "blue500", modifiers = ["bold"]}
"ui.statusline.insert" = { fg = "base04", bg = "green500", modifiers = ["bold"]}
"ui.statusline.select" = { fg = "base04", bg = "yellow500", modifiers = ["bold"]}
"ui.statusline.seperator" = { bg = "yellow500" }

"ui.popup" = { fg = "base1", bg = "base02" }
"ui.menu.selected" = { fg = "base02", bg = "base2"}
"ui.menu" = { fg = "base0", bg = "base03" }
"ui.window" = { fg = "base3" }
"ui.help" = { modifiers = ["reversed"] }

"ui.popup.info" = {fg = "base02", bg = "base04", modifiers = ["bold"]}

"ui.text" = { fg = "base1" }
"ui.text.focus" = { fg = "blue300", modifiers = ["bold"]}
"ui.text.inactive" = { fg = "base01" }
"ui.text.info" = { fg = "base2" }
"ui.highlight" = { fg = "yellow100" }

"ui.cursor.primary" = { fg = "base04", bg = "base1" }
"ui.cursor.select" = { fg = "base02", bg = "cyan900" }
"ui.cursorline.primary" = { bg = "base02" }
"ui.cursorline.secondary" = { bg = "base03" }

"ui.selection" = { bg = "base02" }
"ui.selection.primary" = { bg = "base01" }

"ui.virtual.indent-guide" = { fg = "base02" }
"ui.virtual.ruler" = { fg = "red900" }

"ui.cursor" = {fg = "base02", bg = "cyan900"}
"ui.cursor.insert" = {fg = "base04", bg = "base3"}
"ui.cursor.match" = { fg = "base04", bg = "base00" }

"warning" =  { fg = "orange500", modifiers= ["bold", "underlined"] }
"error" = { fg = "red500", modifiers= ["bold", "underlined"] }
"info" = { fg = "blue500", modifiers= ["bold", "underlined"] }
"hint" = { fg = "base01", modifiers= ["bold", "underlined"] }

"diagnostic.warning" = { fg = "yellow500", bg = "yellow900", underline = { style = "curl", color = "yellow900" } }
"diagnostic.error" = { fg = "red500", bg = "red900",underline = { style = "curl", color = "red900" } }
"diagnostic.info" = { fg = "blue500", bg = "blue900", underline = { style = "curl", color = "blue900" } }
"diagnostic.hint" = { fg = "cyan500", bg = "cyan900", underline = { style = "curl", color = "cyan900" } }

[palette]
base04 = "#00141A"
base03 = "#002B36"
base02 = "#073642"
base01 = "#586E75"
base00 = "#657B83"
base0 = "#9EACAD"
base1 = "#ADB8B8"
base2 = "#EEE8D5"
base3 = "#FDF6E3"
base4 = "#FFFFFF"

yellow900 = "#332700"
yellow700 = "#664D00"
yellow500 = "#B58900"
yellow300 = "#FFC100"
yellow100 = "#FFE999"

orange900 = "#5C220A"
orange700 = "#A13C11"
orange500 = "#CB4B16"
orange300 = "#F8520E"
orange100 = "#FF9468"

red900 = "#57100F"
red700 = "#B7211F"
red500 = "#DC322F"
red300 = "#F6524F"
red100 = "#FF9D9B"

magenta900 = "#541232"
magenta700 = "#B02669"
magenta500 = "#D33682"
magenta300 = "#F255A1"
magenta100 = "#FF77B9"

violet900 = "#25285B"
violet700 = "#494FB6"
violet500 = "#6C71C4"
violet300 = "#9CA0ED"
violet100 = "#CCCFFF"

blue900 = "#103956"
blue700 = "#1B6497"
blue500 = "#268BD2"
blue300 = "#49AEF5"
blue100 = "#AADCFF"

cyan900 = "#103B3D"
cyan700 = "#1A6265"
cyan500 = "#2AA198"
cyan300 = "#29EEDF"
cyan100 = "#B9FFFA"

green900 = "#2C3300"
green700 = "#596600"
green500 = "#859900"
green300 = "#BAFB00"
green100 = "#D6FFAC"
```

Konfigurace je plně funkční a ozkoušená na [EndeavourOS](https://endeavouros.com/) a MacOS, aleněměl by být problém na jiných OS a distribucích kde funguje Helix.