We can't find the internet
Attempting to reconnect
Something went wrong!
Hang in there while we get back on track
2020 / 04 / 04
2023 / 12 / 12
Install VSCode in Linux
2020 / 04 / 04
2023 / 12 / 12
The one and only, the fabulous Visual Studio Code in Linux.
linux
dev
vscode
One code editor to rule them all…
Visual Studio Code is fast, nimble, and beautiful.
cd ~/tmp
git clone https://aur.archlinux.org/visual-studio-code-bin.git
cd visual-studio-code-bin/
makepkg -siExecute with:
code &inotify watchers
We need to increase the amount of inotify watchers.
This is needed so Visual Studio Code can manage projects with a lot of files:
echo fs.inotify.max_user_watches=524288 | sudo tee \
/etc/sysctl.d/40-max-user-watches.conf && sudo sysctl --systemUseful VSCode extensions
Mostly the ones I install, time and time again:
- Better Comments: Improve your code commenting by annotating with alert, informational, TODOs, and more.
- Code Spell Checker: Spelling checker for source code.
- Credo (Elixir Linter): VSC Support for Elixir linter ‘Credo’.
- ElixirLS: Elixir support and debugger: Elixir support with debugger, autocomplete, and more.
- ESLint: Integrates ESLint JavaScript into VS Code.
- gettext: Gettext PO files language support for Visual Studio Code.
- GitLens: Supercharge the Git capabilities built into Visual Studio Code.
- indent-rainbow: Makes indentation easier to read.
- markdownlint: Markdown linting and style checking for Visual Studio Code.
-
MJML: MJML preview, lint, compile for Visual Studio Code.
mjmlio.vscode-mjml - Peacock: Subtly change the workspace color of your workspace.
- Phoenix Framework: Syntax highlighting support for HEEx.
- Playwright Test for VSCode: Run Playwright Test tests in Visual Studio Code.
- Prettier - Code formatter: Prettier is an opinionated code formatter.
- Spanish - Code Spell Checker: Spanish Add-On for Code Spell Checker.
- Stylelint: Modern CSS/SCSS/Less linter
- Tailwind CSS IntelliSense: Intelligent Tailwind CSS tooling for VS Code.
- vscode-icons: Icons for Visual Studio Code.
- Vue Language Features (Volar): Language support for Vue 3.
The best dark themes around:
- Dracula Official: Official Dracula Theme. A dark theme for many editors, shells and more.
- Monokai Pro: Professional theme and matching icons.
- Night Owl: A VS Code theme for the night owls out there.
- One Dark Pro: Atom’s iconic One Dark theme for Visual Studio Code.
- Palenight Theme: An elegant and juicy material-like theme for Visual Studio Code.
Misc
My settings.json
You can open your settings with CTRL + ,:
{
"cSpell.language": "en,es",
"cSpell.userWords": [
"adduser",
"allowfullscreen",
"benchee",
"castore",
"cdmx",
"citext",
"colspan",
"commitlint",
"corsica",
"Cyclomatic",
"deepseek",
"defmock",
"defmodule",
"ecto",
"erlang",
"esbenp",
"esbuild",
"extname",
"fkey",
"floki",
"gettext",
"github",
"heex",
"heroicons",
"iframe",
"initializers",
"iodata",
"irlos",
"jason",
"lastnames",
"linux",
"maxlength",
"minlength",
"mjml",
"moka",
"mult",
"noopener",
"noreferrer",
"noreply",
"nowrap",
"nullable",
"oban",
"ollama",
"onclick",
"outdir",
"pacman",
"perp",
"pinia",
"pnpm",
"postgres",
"postgresql",
"postprocessor",
"qpdf",
"querétaro",
"sobelow",
"srcset",
"strftime",
"struct",
"stylelint",
"subgrid",
"tailwindcss",
"tailwindlabs",
"tbody",
"thead",
"topbar",
"trunc",
"upsert",
"Upserts",
"urxvt",
"Vialist",
"vsicons",
"vulkan",
"Xresources"
],
"css.validate": false,
"editor.acceptSuggestionOnCommitCharacter": false,
"editor.acceptSuggestionOnEnter": "off",
"editor.bracketPairColorization.enabled": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
"editor.detectIndentation": false,
"editor.formatOnSave": false,
"editor.guides.bracketPairs": true,
"editor.insertSpaces": true,
"editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback'",
"editor.fontLigatures": true,
"editor.minimap.enabled": false,
"editor.pasteAs.preferences": ["markdown.link"],
"editor.renderWhitespace": "boundary",
"editor.tabSize": 2,
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "markup.bold",
"settings": {
"foreground": "#f8f528",
"fontStyle": "bold"
}
},
{
"scope": "markup.italic",
"settings": {
"foreground": "#ff6daa",
"fontStyle": "italic bold"
}
},
{
"scope": "markup.quote",
"settings": {
"foreground": "#c5cc83",
"fontStyle": "italic bold"
}
}
]
},
"editor.unicodeHighlight.nonBasicASCII": true,
"elixir.credo.strictMode": true,
"elixirLS.dialyzerEnabled": true,
"elixirLS.fetchDeps": false,
//"elixirLS.signatureAfterComplete": false,
"elixirLS.suggestSpecs": false,
"emmet.includeLanguages": {
"elixir": "html",
"mjml": "html",
"phoenix-heex": "html"
},
"emmet.triggerExpansionOnTab": true,
"explorer.confirmDragAndDrop": false,
"explorer.excludeGitIgnore": true,
"files.autoSave": "onFocusChange",
"files.associations": {
"*.heex": "phoenix-heex"
},
"files.exclude": {
"**/_build": true,
"**/.elixir_ls": true,
"**/deps": true
},
"files.insertFinalNewline": true,
"files.trimFinalNewlines": true,
"gitlens.defaultDateStyle": "absolute",
"javascript.validate.enable": false,
"markdownlint.config": {
"MD012": false, // MD012/no-multiple-blanks: Multiple consecutive blank lines
"MD024": {
"siblings_only": true // MD024/no-duplicate-heading/no-duplicate-header: Multiple headings with the same content
},
"MD025": false, // MD025/single-title/single-h1: Multiple top-level headings in the same document
"MD033": false, // MD033/no-inline-html: Inline HTML
"MD034": false, // MD034/no-bare-urls: Bare URL used
"MD038": false // MD038/no-space-in-code: Spaces inside code span elements
},
"peacock.affectAccentBorders": false,
"peacock.favoriteColors": [
{
"name": "Angular Red",
"value": "#b52e31"
},
{
"name": "Auth0 Orange",
"value": "#eb5424"
},
{
"name": "Azure Blue",
"value": "#007fff"
},
{
"name": "C# Purple",
"value": "#68217A"
},
{
"name": "Gatsby Purple",
"value": "#639"
},
{
"name": "Go Cyan",
"value": "#5dc9e2"
},
{
"name": "Java Blue-Gray",
"value": "#557c9b"
},
{
"name": "JavaScript Yellow",
"value": "#f9e64f"
},
{
"name": "Mandalorian Blue",
"value": "#1857a4"
},
{
"name": "Node Green",
"value": "#215732"
},
{
"name": "React Blue",
"value": "#00b3e6"
},
{
"name": "Something Different",
"value": "#832561"
},
{
"name": "Vue Green",
"value": "#42b883"
},
{
"name": "Agua 1",
"value": "#b8e8e8"
},
{
"name": "Azul 1",
"value": "#3b5487"
},
{
"name": "Durazno 1",
"value": "#fcdca8"
},
{
"name": "Menta 1",
"value": "#53c5d0"
},
{
"name": "Menta 2",
"value": "#34c690"
},
{
"name": "Naranja 1",
"value": "#9e5e24"
},
{
"name": "Púrpura 1",
"value": "#76618f"
},
{
"name": "Rosa 1",
"value": "#98616e"
},
{
"name": "Verde 1",
"value": "#336144"
},
{
"name": "Verde 2",
"value": "#bceec0"
},
{
"name": "Vino 1",
"value": "#73153d"
}
],
"solargraph.diagnostics": true,
"solargraph.formatting": true,
"tailwindCSS.classAttributes": [
"class",
"className",
"ngClass",
".*Classes.*",
".*-class"
],
"tailwindCSS.includeLanguages": {
"elixir": "html",
"phoenix-heex": "html"
},
"volar.codeLens.pugTools": false,
"vsicons.associations.files": [{ "icon": "eex", "extensions": ["heex"] }],
"window.titleBarStyle": "custom",
"window.zoomLevel": 1.5,
"workbench.colorCustomizations": {
// "editor.background": "#131212",
"editorCursor.foreground": "#ff00ff",
"editorWhitespace.foreground": "#ff00ff60"
//"sideBar.background": "#1a1a1a"
},
"workbench.colorTheme": "Dracula",
"workbench.editor.decorations.badges": true,
"workbench.editor.decorations.colors": false,
"workbench.iconTheme": "vscode-icons",
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[elixir]": {
"editor.defaultFormatter": "JakeBecker.elixir-ls",
"editor.formatOnSave": true
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[mjml]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[phoenix-heex]": {
"editor.defaultFormatter": "JakeBecker.elixir-ls",
"editor.formatOnSave": true
},
"[ruby]": {
"editor.formatOnSave": true
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}
}My .vscode/extensions.json
{
// See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
// Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
// List of extensions which should be recommended for users of this workspace.
"recommendations": [
"aaron-bond.better-comments",
"streetsidesoftware.code-spell-checker",
"pantajoe.vscode-elixir-credo",
"jakebecker.elixir-ls",
"dbaeumer.vscode-eslint",
"mrorz.language-gettext",
"eamodio.gitlens",
"oderwat.indent-rainbow",
"davidanson.vscode-markdownlint",
"mjmlio.vscode-mjml",
"johnpapa.vscode-peacock",
"phoenixframework.phoenix",
"ms-playwright.playwright",
"esbenp.prettier-vscode",
"streetsidesoftware.code-spell-checker-spanish",
"stylelint.vscode-stylelint",
"bradlc.vscode-tailwindcss",
"vscode-icons-team.vscode-icons",
"vue.volar"
],
// List of extensions recommended by VS Code that should not be recommended for users of this workspace.
"unwantedRecommendations": []
}Undocumented keyboard shortcuts
To open a terminal press CTRL + j