My Coding Setup
I use the software VSCode to code and highly recommend it!
Project Setup
-
Project is a GitHub repository.
- For Neocities: GitHub Action "Deploy to Neocities"
- 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
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:
- Download a config file from here
- Put it into
C:\Users\{USERNAME}
- In the file, add
"browser":true
to the list of environments ("env" at the top of the file) - In the file, add
"sourceType":"module"
to "parserOptions". - In VSCode do ctrl+shift+p "eslint restart server".
- "Problems" tab should show problems
-
Installation:
- "php import checker" (for php)
fun stuff:
-
"vscode-pets" (adds cute pets)
- to use: ctrl + shift + p + 'pet'