Skip to content Go to Sitemap

My Coding Setup

I use the software VSCode to code and highly recommend it!

Project Setup

  • Project is a GitHub repository.
  • Webpack (javascript & (s)css & asset bundler)
  • SCSS (css preprocessor)

My project for this website is on Github and is a good example. Browse the repository here.

Shortcuts I use a lot

  • ctrl + (click) = jump into a function/file
  • ctrl + # = turn current selection into a comment (and reverse)
  • ctrl + d = select the next search result for the current selection (starts multi-cursor)
  • ctrl + alt + ↑/↓ = duplicate current line
  • alt + ↑/↓ = move current line up/down
  • ctrl + T = opens search (e.g. to quickly open files)

Specific key combinations might differ for you, I don't remember if they're the default...

VSCode Settings

Tip: You can turn on setting sync to sync your settings across your devices.

Tip: In the UI, right-click anything you never need to hide it. This will give you more space.

My Favorite Themes:

  • saturated dark+
  • subtle pink
  • vibrancy continued

My Settings:

  • terminal color scheme: search for "workbench color" and click edit json. in workbench.colorCustomizations add a code form this generator
  • set editor hover delay to 800
  • turn off editor insert spaces (i want tab indents)
  • turn off explorer decoration badges
  • turn off source control count badge
  • turn on cursor blinking (style: phase)
  • turn on cursor smooth caret animation
  • turn on file auto save after focus change
  • turn on minimap autohide
  • turn on smooth scrolling
  • window title: i have it empty (default: ${dirty}${activeEditorShort}${separator}${rootName}${separator}${profileName}${separator}${appName})
  • zoom level: 0.3

VSCode Extensions

You can install extensions in VSCode via the "Extensions" menu. Make sure to restart VSCode after installation.

formatting:

  • "format html in php"
  • "formatting toggle"
    • adds a formatting toggle at the bottom right so you can temporarily turn of auto formatting
  • "prettier"
    • note: does not format php files (for that i have 'php intelephense') or html in php files (for that i have 'format html in php')
    • file not formatting?: there is an error in the file. click the prettier button on the bottom right corner.

useful stuff:

  • "alphabetical sorter"
    • to use: ctrl + shift + p + 'sort'
  • "auto close tag" (html)
  • "auto rename tag" (html)
  • "highlight matching tag" (for html)
  • "leet-html" (syntax highlighter for html in javascript)
  • "open in default browser"
    • to use: right-click in file, choose 'open in default browser'
  • "svg viewer" (view svg images in VSCode)
  • "vs code css comment" (for css)
    • to use: type 'comment-section' in css file and press enter

intellisense: (= code completion, parameter info, quick info)

  • "php intelephense" (for php)
    • to use for formatting: right-click in a php file and 'format document'. it will ask which formatter to use, select php intelephense
  • "scss intellisense" (for scss)

linter: (= checks for errors)

  • "stylelint" (for css, scss)
  • "eslint" (for javascript)
    • Installation:
      1. Download a config file from here
      2. Put it into C:\Users\{USERNAME}
      3. In the file, add "browser":true to the list of environments ("env" at the top of the file)
      4. In the file, add "sourceType":"module" to "parserOptions".
      5. In VSCode do ctrl+shift+p "eslint restart server".
    • "Problems" tab should show problems
  • "php import checker" (for php)

fun stuff:

  • "vscode-pets" (adds cute pets)
    • to use: ctrl + shift + p + 'pet'