This repository contains a Visual Studio Code settings and theme. Used when coding Digitoimisto Dude Oy's Projects.
Strongly WIP. Updated regurarly. Aims to be minimal and usable.
Contains lots of extensions that will not slow down VSCode. Browse extensions here.
Useful snippets like media + tab
for media queries. Browse snippets here.
Useful keybindings for different kind of tasks. Browse keybindings here.
- Install Visual Studio Code or Visual Studio Code Insiders (Preferred, much faster)
- Open Visual Studio Code and type β + β§ + P (or ctrl + β§ + P on Windows system) and select
Preferences: Open Settings (JSON)
- Copy settings.json of this repository and paste it to your settings.json (if you have made settings in this point, backup them, or cherry pick the preferred settings from this repo). By default this settings.json
- Get Ligaturized version of SFMono font and Liga SFMono Nerd Font (works for iTerm2 as well)
- Find all
rolle
from settings.json and replace with your username (or fix paths if you are on different systems than macOS), remove possible leftover API keys or stuff that you don't want to use. In short: Tweak to your likings! - Install Synthwave '84 and Customize UI
- Install Dracula Soft
- Enable Synthwave with β + β§ + P and selecting
Synthwave '84: Enable Neon Dreams
- Change these lines to your settings.json:
"editor.lineHeight": 21,
"editor.fontSize": 12,
"window.zoomLevel": 1,
- Restart
- Some of the addons make core changes so you will most probably get
Your Code installation appears to be corrupt. Please reinstall.
, for that install Fix VSCode Checksums, β + β§ + P and selectFix Checksums: Apply
and restart. If you get the notification again, just ignore it or select Don't show again behind cog igon. Fix Checksums apply should fix the problem though. - Enable Dracula Soft Syntax Theme, β + β§ + P and select
Preferences: Color Theme
- Install your preferred plugins, I recommend to have at least all of the following (see up to date list in .extensions file, updated via cronjob):
- stylefmt
- Project Manager
- PHP Intelephense
- Bracket Pair Colorizer
- ESLint
- GitLens β Git supercharged
- EditorConfig for VS Code
- Helium Icon Theme
- phpcs
- Customize UI
- colorize
- DotENV
- SCSS IntelliSense
- Sublime Text Keymap and Settings Importer
- stylelint
- Highlight Matching Tag
- webhint
- doiuse
- Error Lens
- CSS var hint
- svgo
- VSCodeFileHeader
These plugins are fully supported by my vscode settings.json already.
- If you want to import your Sublime Keymaps, go through this documentation.
- All done!
If you don't want to use CSS customizations, make sure you have these lines set:
"editor.lineHeight": 24,
"window.zoomLevel": 0.4,
"editor.fontSize": 14,
If you already did steps in usage above, you are already covered!
The old dark theme I have used is ported from sublime-settings. It's based on the combination of Monokai Extended, Spacegray and Synthwave '84. Color overrides are achieved via settings.json (settings.backup-darkneon.json) so no actual theme is needed, just activate Monokai Extended, Synthwave '84 Neon Dreams and you are good to go.
So, in summary, how to enable:
- Get settings.json modifications of this repository
- β + β§ + 7, comment out synthwave84.css specific color settings from settings.json if not enabled already
- Install Synthwave '84 and Customize UI
- Install Dracula Soft
- Enable Synthwave with β + β§ + P and selecting
Synthwave '84: Enable Neon Dreams
- Restart
- Install Fix VSCode Checksums, β + β§ + P and select
Fix Checksums: Apply
and restart - Enable Dracula Soft Syntax Theme, β + β§ + P and select
Preferences: Color Theme
With Dracula Soft:
With Monokai Extended:
Current active theme is GitHub with some fixes and overrides with custom.css and settings.json. The theme is a combination of GitHub theme for VS Vode, Github Light Theme and GitHub Theme for Visual Studio Code.
So, in summary, how to enable:
- Get settings.json modifications of this repository
- Uncomment
// GitHub light theme:
and comment out current active"workbench.colorCustomizations": {
- Install thomaspink/vscode-github-theme (not GitHub Light or primer's GitHub theme)
- Comment out Github specific color settings with β + β§ + 7 from settings.json if not enabled already
- Enable Github
If you have some dark areas after this, uncomment them from your settings.json.
See this .extension file which is produced by this crontab entry: * * * * * /bin/ls -1 /Users/rolle/.vscode-insiders/extensions/ > /Users/rolle/Projects/vscode-settings/.extensions
.
If you use Windows you need a bat file for executables, see this and this.