Frankie-B / vscode-settings

Superior power-charged settings for Visual Studio Code editor. 🚀

The ultimate Visual Studio Code setup

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.

Features

Useful extensions

Contains lots of extensions that will not slow down VSCode. Browse extensions here.

Snippets

Useful snippets like media + tab for media queries. Browse snippets here.

Key bindings

Useful keybindings for different kind of tasks. Browse keybindings here.

Usage

1. Install Visual Studio Code or Visual Studio Code Insiders (Preferred, much faster)
2. Open Visual Studio Code and type ⌘ + ⇧ + P (or ctrl + ⇧ + P on Windows system) and select Preferences: Open Settings (JSON)
3. 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
4. Get Ligaturized version of SFMono font and Liga SFMono Nerd Font (works for iTerm2 as well)
5. 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!
6. Install Synthwave '84 and Customize UI
7. Install Dracula Soft
8. Enable Synthwave with ⌘ + ⇧ + P and selecting Synthwave '84: Enable Neon Dreams
9. Change these lines to your settings.json:

"editor.lineHeight": 21,
"editor.fontSize": 12,
"window.zoomLevel": 1,

10. Restart
11. 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 select Fix 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.
12. Enable Dracula Soft Syntax Theme, ⌘ + ⇧ + P and select Preferences: Color Theme
13. 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.

15. If you want to import your Sublime Keymaps, go through this documentation.
16. 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,

Dark neon theme (custom)

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:

1. Get settings.json modifications of this repository
2. ⌘ + ⇧ + 7, comment out synthwave84.css specific color settings from settings.json if not enabled already
3. Install Synthwave '84 and Customize UI
4. Install Dracula Soft
5. Enable Synthwave with ⌘ + ⇧ + P and selecting Synthwave '84: Enable Neon Dreams
6. Restart
7. Install Fix VSCode Checksums, ⌘ + ⇧ + P and select Fix Checksums: Apply and restart
8. Enable Dracula Soft Syntax Theme, ⌘ + ⇧ + P and select Preferences: Color Theme

With Dracula Soft:

With Monokai Extended:

Light GitHub theme (custom)

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:

1. Get settings.json modifications of this repository
2. Uncomment // GitHub light theme: and comment out current active "workbench.colorCustomizations": {
3. Install thomaspink/vscode-github-theme (not GitHub Light or primer's GitHub theme)
4. Comment out Github specific color settings with ⌘ + ⇧ + 7 from settings.json if not enabled already
5. Enable Github

If you have some dark areas after this, uncomment them from your settings.json.

Plugins

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.

Windows 10

If you use Windows you need a bat file for executables, see this and this.