This repository contains a Visual Studio Code settings and theme. Used when coding Digitoimisto Dude Oy's Projects.

Strongly WIP.
Updates regurarly.
Aims to be minimal and usable.

🎨 Beautiful - I'm a highly visual perfectionist-person so and that means my editor must look perfectly minimal, distract-free and beautiful. There are not a lot themes out there that please me, so I decided to build my own.

🧠 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. ⚡ Fast - VSCode has not always been the fastest but I select my extensions wisely. No excessive extensions that don't get updated.

👨‍💻 Customizable - Feel free to fork this repository and modify settings to your liking. Let me know what you have done!

1. Install Visual Studio Code or Visual Studio Code Insiders or VSCodium or Cursor
2. Get Monaspace variable fonts (drag all to Font Book)
3. Open editor and press ⌘ + ⇧ + P (or ctrl + ⇧ + P on Windows system) and select Preferences: Open Keyboard Shortcuts (JSON). Copy the contents of keybindings.json to the editor.
4. Open editor and press ⌘ + ⇧ + P (or ctrl + ⇧ + P on Windows system) and select Snippets: Configure Snippets, select html. Copy the contents of html to the editor.
5. Open editor and press ⌘ + ⇧ + P (or ctrl + ⇧ + P on Windows system) and select Snippets: Configure Snippets, select php. Copy the contents of php to the editor.
6. Open editor and press ⌘ + ⇧ + P (or ctrl + ⇧ + P on Windows system) and select Snippets: Configure Snippets, select scss. Copy the contents of scss to the editor.

1. Open editor and press ⌘ + ⇧ + P (or ctrl + ⇧ + P on Windows system) and select Preferences: Open User Settings (JSON)
2. 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).
3. Tweak to your likings, if you want to
4. Install all extensions and themes from below

You can decide which ones you want to install but I recommend to install them all to get the best experience. These extensions are carefully selected and fully supported by my VSCode settings.json already.

"extensions.gallery.serviceUrl": "https://marketplace.visualstudio.com/_apis/public/gallery",

• EditorConfig for VS Code — EditorConfig.EditorConfig
• Error Lens — usernamehw.errorlens
• ESLint — dbaeumer.vscode-eslint
• GitLens — Git supercharged — eamodio.gitlens
• Helium Icon Theme — helgardrichard.helium-icon-theme
  • or Sweet vscode Icons — sweet-vscode-icons
• PHP_CodeSniffer — obliviousharmony.vscode-php-codesniffer
• Project Manager — alefragnani.project-manager
• Stylelint — stylelint.vscode-stylelint
• SVG — 1000ch.svgo
• Indenticator - SirTori.indenticator
• Prettier - esbenp.prettier-vscode

Fix this never fixed issue by installing SCSS Language Improvements ronilaukkarinen.scss-language-improvements and then adding to settings.json if not already (already added if you use GitHub Purple and settings.json from this repo):

"editor.tokenColorCustomizations": {
  "textMateRules": [
    {
      "scope": "meta.property-name-custom-unique.scss",
      "settings": {
        "foreground": "#79b8ff",
      }
    },
  ]
},

Recommended install: Github Purple + Sweet vscode Icons to get this look:

cd ~/.vscode/extensions/
# Or: cd ~/.cursor/extensions
# Or: cd ~/.vscode-oss/extensions
git clone https://github.com/ronilaukkarinen/github-purple

After this you can select GitHub Purple from the Theme Color navigation (Ctrl + P).

Change these to settings.json:

"helium-icon-theme.saturation": 1,
"helium-icon-theme.opacity": 1,

Then ⌘ + ⇧ + P and select Preferences: File Icon Theme, select any other than Helium. After this re-activate Helium icons.

If you use Windows you need a bat file for executables, see this and this. Get my bat files from vscode-windows-helpers.