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

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.


Comments

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Užíváme cookies, abychom vám zajistili co možná nejsnadnější použití našich webových stránek. Pokud budete nadále prohlížet naše stránky předpokládáme, že s použitím cookies souhlasíte. View more
Cookies settings
Accept
Decline
Privacy & Cookie policy
Privacy & Cookies policy
Cookie name Active
 
 

Zásady ochrany osobních údajů

Naposledy aktualizováno: 28.4.2022

Pokud jste návštěvníkem našeho blogu, odběratelem novinek, přispěvatelem do komentářů  poskytujete nám své osobní údaje. My vaše údaje zpracováváme a za jejich bezpečnost odpovídáme. Slibujeme, že vaše údaje dostatečně chráníme a podřizujeme se požadavkům Nařízení o ochraně osobních údajů (GDPR). Neprodáváme žádný produkt, nejste tedy našimi zákazníky, ale návštěvníky blogu.

Správcem vašich osobních údajů je Lukáš (Lucka ani nekouká přes rameno!)

Správcem osobních údajů je Lukáš Kaňka, který provozuje webové stránky lukan.cz a lukan.cekuj.net. Lukáš vaše údaje spravuje a určuje, jak dlouho budou osobní údaje zpracovávány, a za jakým účelem. Vybírá také další zpracovatele, které ke zpracování využíváme.

Jaké údaje zpracováváme a proč

Vaše osobní údaje zpracováváme především proto, abychom vám mohli poskytovat co nejkvalitnější obsah. Jednotlivé důvody zpracování:
  • E-mailové kampaně a newslettery

Jste čtenářem: E-mailem vám posíláme novinky, ke kterým jste se přihlásili. Zpracováváme váš e-mail, sledujeme, na co klikáte v e-mailu a jaké typy e-mailů od nás otevíráte, za účelem lepšího výběru obsahu, který by vás mohl zajímat.

Předávání osobních údajů třetím osobám

Vaše údaje zpracovává správce Lukáš Kaňka, s využitím dalších dvou zpracovatelů, společnosti Endora , jejichž zpracování spočívá v uchovávání údajů na zabezpečených cloudových serverech. Abychom mohli měřit, jak se vám na našem blogu líbí, kde trávíte nejvíce času a kam klikáte, používáme další poskytovatele služeb pro určité zpracovatelské operace. Jsou to: Google – Google Analytics pomocí měřícího kódu

Jak nás můžete kontaktovat

Ať už na nás máte jakoukoliv otázku nebo požadavek, můžete nás kontaktovat ne e-mailové adrese: lukas.kanka@lukan.cz.

Předávání vašich dat mimo Evropskou Unii

Vaše data zpracováváme výhradně v Evropské unii nebo v zemích, které zajišťují odpovídající úroveň ochrany na základě rozhodnutí Evropské komise.

Zabezpečení a ochrana osobních údajů

Vaše data jsou u nás v bezpečí. Přijali jsme technická opatření, která zajišťují zabezpečení osobních údajů šifrováním přenosu dat pomocí HTTPS protokolu (ten zámeček, co je vedle naší URL adresy ;-)) a zabezpečili vaše osobní údaje v souladu s čl. 32 GDPR.

Vaše práva v souvislosti s ochranou osobních údajů

  V souvislosti s ochranou osobních údajů máte řadu práv. Pokud budete chtít některého z těchto práv využít, prosím, kontaktujte nás prostřednictvím e-mailu: lukas.kanka@lukan.cz   Máte právo na informace, které si právě teď čtete. 🙂   Díky právu na přístup nás můžete kdykoli vyzvat a my vám do 30 dnů doložíme, jaké vaše osobní údaje zpracováváme a proč. Pokud se u vás něco změní nebo shledáte své osobní údaje neaktuální nebo neúplné, máte právo na doplnění a změnu osobních údajů.   Právo na omezení zpracování můžete využít, pokud se domníváte, že zpracováváme vaše nepřesné údaje, domníváte se, že provádíme zpracování nezákonně, ale nechcete všechny údaje smazat nebo pokud jste vznesli námitku proti zpracování. Omezit můžete rozsah osobních údajů nebo účelů zpracování.   Právo na výmaz (být zapomenut) Vaším dalším právem je právo na výmaz (být zapomenut). Nechceme na vás zapomenout, ale pokud si to budete přát, máte na to právo. 😞  V takovém případě vymažeme veškeré vaše osobní údaje ze svého systému i ze systému všech dílčích zpracovatelů a záloh. Na zajištění práva na výmaz potřebujeme 30 dní.   Stížnost u Úřadu na ochranu osobních údajů Pokud máte pocit, že s vašimi údaji nezacházíme v souladu se zákonem, máte právo se se svou stížností kdykoli obrátit na Úřad pro ochranu osobních údajů. Budeme moc rádi, pokud nejprve budete o tomto podezření informovat nás, abychom s tím mohli něco udělat a případné pochybení napravit.   Odhlášení ze zasílání newsletterů  E-maily s inspirací, články vám zasíláme, jste-li náš čtenář na základě našeho oprávněného zájmu. Pokud čtenářem ještě nejste, posíláme vám je jen na základě vašeho souhlasu. V obou případech můžete ukončit odběr našich e-mailů stisknutím odhlašovacího odkazu v každém zaslaném e-mailu.

Mlčenlivost

Jsme povinni zachovávat mlčenlivost o osobních údajích a o bezpečnostních opatřeních, jejichž zveřejnění by ohrozilo zabezpečení vašich osobních údajů. Tato mlčenlivost přitom trvá i po skončení závazkových vztahů s námi. Bez vašeho souhlasu také vaše údaje žádné jiné třetí straně nevydáme. Tyto Zásady ochrany osobních údajů nabývají účinnosti 28.4.2022
 
Save settings
Cookies settings