DEV Community

Lukáš Kaňka
Lukáš Kaňka

Posted on • Edited on

Helix - Front-End Power

Helix 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. 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

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 a pro podporu jazyků díky LSP tyto balíčky:
vscode-html-language-server
vscode-css-language-server
typescript-language-server
emmet-ls
tailwindcss-language-server
marksman
markdoc-ls

Na celý setup se můžeš podívat v mám repozitáři na Gitea

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

Konfigurace je plně funkční a ozkoušená na EndeavourOS a MacOS, aleněměl by být problém na jiných OS a distribucích kde funguje Helix.

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more