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í.
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
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 a MacOS, aleněměl by být problém na jiných OS a distribucích kde funguje Helix.
Top comments (0)