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 -si

Execute 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 --system

Useful 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": [
    "castore",
    "cdmx",
    "commitlint",
    "corsica",
    "esbenp",
    "esbuild",
    "floki",
    "heex",
    "linux",
    "noreply",
    "pacman",
    "pinia",
    "pnpm",
    "qpdf",
    "stylelint",
    "tailwindcss",
    "urxvt",
    "vulkan",
    "Xresources"
  ],
  "css.validate": false,
  "editor.acceptSuggestionOnCommitCharacter": false,
  "editor.acceptSuggestionOnEnter": "off",
  "editor.bracketPairColorization.enabled": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "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.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,
  "elixirLS.fetchDeps": false,
  //"elixirLS.signatureAfterComplete": false,
  //"elixirLS.suggestSpecs": false,
  "emmet.includeLanguages": {
    "elixir": "html",
    "mjml": "html",
    "phoenix-heex": "html"
  },
  "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",
  "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

Links

• Formatting Phoenix HEEx Templates in VS Code