Why:

VSCode is a modern tool made by Microsoft. It is maintained and extensible via its Extensions tab/store. We can do local development, control the Ubuntu terminal to host our local environment docker containers (using DDEV), show the browser and dev tools for chromium browsers, SSH connect to our RunCloud servers, visualize the Git source control tree, and other reasons I’m certain I’m forgetting.

Download:

Extensions list:

auto close tag (jun han)
auto complete tag (jun han)
auto rename tag (jun han)
easy snippet
git blame
git graph
open in browser
php intelephense (ben mewburn)
prettier
remote -ssh
remote -ssh:editting conf
remote explorer
twig language support (rholdos)
css peek
indent-rainbow
todo tree
todo+
twig pack (bajdizs)
broswer lite anthony fu
easy snippet inu1255
email leighlondon
microstof edge tools for vs code
night owl
open in browser
peacock
snazzy operator
theme
code spell checker
formatting toggle
git graph
gremlins tracker for vscode
tailwind css intellisense
vim
vite

CTRL + Shift + p , select ‘Preferences: Open user settings (JSON)’:

{
  "security.workspace.trust.untrustedFiles": "open",
  "php.validate.executablePath": "",
  "editor.accessibilitySupport": "off",
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "diffEditor.ignoreTrimWhitespace": false,
  "gitlens.codeLens.dateFormat": "",
  "gitlens.defaultDateFormat": "",
  "emmet.includeLanguages": {
    "twig": "html"
  },
  "auto-close-tag.activationOnLanguage": [
    "twig",
    "xml",
    "php",
    "blade",
    "ejs",
    "jinja",
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "plaintext",
    "markdown",
    "vue",
    "liquid",
    "erb",
    "lang-cfml",
    "cfml",
    "HTML (EEx)",
    "HTML (Eex)",
    "plist",
    "twig"
  ],
  "[markdown]": {
    "editor.defaultFormatter": "DavidAnson.vscode-markdownlint"
  },
  "[twig]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "files.associations": {
    "*.twig": "twig"
    // "*.scss": "tailwindcss"
  },
  "vscode-edge-devtools.defaultEntrypoint": "index.twig",
  "remote.SSH.remotePlatform": {
     },
  "workbench.colorTheme": "Night Owl",
  "workbench.startupEditor": "none",
  "prettier.prettierPath": "./node_modules/prettier",
  "todo-tree.general.tags": [
    "BUG",
    "HACK",
    "FIXME",
    "TODO",
    "XXX",
    "[ ]",
    "[x]",
    "CRIT"
  ],
  "todo-tree.highlights.customHighlight": {
    "CRIT": {
      "foreground": "red",
      "iconColour": "red",
      "gutterIcon": true
    },
    "BUG": {
      "icon": "bug"
    },
    "HACK": {
      "icon": "tools"
    },
    "FIXME": {
      "icon": "flame"
    },
    "XXX": {
      "icon": "x"
    },
    "[ ]": {
      "icon": "issue-draft"
    },
    "[x]": {
      "icon": "issue-closed"
    }
  },
  "remote.SSH.defaultForwardedPorts": [],
  "githubPullRequests.pullBranch": "never",
  "diffEditor.useInlineViewWhenSpaceIsLimited": false,
  "cSpell.enableFiletypes": ["twig"],
  "cSpell.userWords": [
    "barba",
    "endfor",
    "endswitch",
    "fullsize",
    "gsap",
    "labelledby",
    "noopener",
    "noreferrer",
    "olivemenus",
    "primarynav",
    "striptags",
    "stylesheet",
    "subnav",
    "tabindex",
    "vite",
    "webroot"
  ],
  "editor.formatOnPaste": false,
  "editor.formatOnSave": false,
  "editor.formatOnType": false,
  "workbench.editor.doubleClickTabToToggleEditorGroupSizes": "maximize"
}

VSCode for Twig

Thanks for reading!