Install VSCode in Linux

The one and only, the fabulous Visual Studio Code in Linux.

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 usual prettier.config.js

module.exports = {
  // semi: true,
  singleQuote: true,
}

Undocumented keyboard shortcuts

To open a terminal press CTRL + j

Links

• Formatting Phoenix HEEx Templates in VS Code