{"id":15526809,"url":"https://github.com/ronilaukkarinen/vscode-settings","last_synced_at":"2025-04-23T11:13:25.869Z","repository":{"id":43099394,"uuid":"261474459","full_name":"ronilaukkarinen/vscode-settings","owner":"ronilaukkarinen","description":"Superior power-charged settings for Visual Studio Code editor. 🚀 ","archived":false,"fork":false,"pushed_at":"2024-11-05T16:08:08.000Z","size":242383,"stargazers_count":19,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-23T11:13:18.472Z","etag":null,"topics":["visual-studio-code","vscode","vscode-settings","vscode-theme"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ronilaukkarinen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-05T13:16:15.000Z","updated_at":"2025-02-23T01:51:20.000Z","dependencies_parsed_at":"2024-11-05T17:20:33.244Z","dependency_job_id":"33fbc739-609d-41b5-ab8a-e7b0844146d9","html_url":"https://github.com/ronilaukkarinen/vscode-settings","commit_stats":{"total_commits":353,"total_committers":2,"mean_commits":176.5,"dds":"0.025495750708215303","last_synced_commit":"f6604795448dfccbd8121bf7c1efca92498a609e"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ronilaukkarinen%2Fvscode-settings","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ronilaukkarinen%2Fvscode-settings/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ronilaukkarinen%2Fvscode-settings/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ronilaukkarinen%2Fvscode-settings/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ronilaukkarinen","download_url":"https://codeload.github.com/ronilaukkarinen/vscode-settings/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250421906,"owners_count":21427851,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["visual-studio-code","vscode","vscode-settings","vscode-theme"],"created_at":"2024-10-02T11:02:02.990Z","updated_at":"2025-04-23T11:13:25.854Z","avatar_url":"https://github.com/ronilaukkarinen.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚀 The ultimate Visual Studio Code setup\n\nThis repository contains a Visual Studio Code settings and theme.\nUsed when coding [Digitoimisto Dude Oy's Projects](https://github.com/digitoimistodude).\n\n**Strongly WIP.**\u003cbr\u003e\n**Updates regurarly.**\u003cbr\u003e\n**Aims to be minimal and usable.**\u003cbr\u003e\n\n## Features\n\n**🎨 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.\n\n**🧠 Useful extensions** - Contains lots of extensions that will not slow down VSCode. Browse extensions [here](#extensions).\n\n**✂ Snippets** - Useful snippets like `media + tab` for media queries. Browse snippets [here](https://github.com/ronilaukkarinen/vscode-settings/tree/master/snippets).\n\n**⌨ Key bindings** - Useful keybindings for different kind of tasks. Browse keybindings [here](https://github.com/ronilaukkarinen/vscode-settings/blob/master/keybindings.json).\n**⚡ Fast** - VSCode has not always been the fastest but I select my extensions wisely. No excessive extensions that don't get updated.\n\n**👨‍💻 Customizable** - Feel free to fork this repository and modify settings to your liking. Let me know what you have done!\n\n## Installation \u0026 usage\n\n1. Install [Visual Studio Code](https://code.visualstudio.com/) or [Visual Studio Code Insiders](https://code.visualstudio.com/insiders/)\n2. Get [Ligaturized version of SFMono font](https://github.com/lemeb/a-better-ligaturizer/blob/master/output-fonts/SFMono.ttf) and [Liga SFMono Nerd Font](https://github.com/shaunsingh/SFMono-Nerd-Font-Ligaturized) (works for iTerm2 as well)\n3. Open Visual Studio Code and press \u003ckbd\u003e⌘\u003c/kbd\u003e \u003cspan\u003e+\u003c/span\u003e \u003ckbd\u003e⇧\u003c/kbd\u003e \u003cspan\u003e+\u003c/span\u003e \u003ckbd\u003eP\u003c/kbd\u003e (or \u003ckbd\u003ectrl\u003c/kbd\u003e \u003cspan\u003e+\u003c/span\u003e \u003ckbd\u003e⇧\u003c/kbd\u003e \u003cspan\u003e+\u003c/span\u003e \u003ckbd\u003eP\u003c/kbd\u003e on Windows system) and select `Preferences: Open User Settings (JSON)`\n4. Copy [settings.json](https://raw.githubusercontent.com/ronilaukkarinen/vscode-settings/master/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).\n5. Find all `rolle` from [settings.json](https://raw.githubusercontent.com/ronilaukkarinen/vscode-settings/master/settings.json) and replace with your username (or fix paths if you are on different systems than macOS). Save and restart VSCode when asked.\n6. Remove possible leftover API keys or stuff that you don't want to use. (In short: Tweak to your likings, if you want to)\n7. Install all [extensions from below](https://github.com/ronilaukkarinen/vscode-settings#extensions)\n\n## Extensions\n\n**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.**\n\n- [dotenv](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv) — `mikestead.dotenv`\n- [Dracula Soft Theme](https://marketplace.visualstudio.com/items?itemName=yomed.theme-dracula-soft) — `yomed.theme-dracula-soft`\n- [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig) — `EditorConfig.EditorConfig`\n- [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens) — `usernamehw.errorlens`\n- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) — `dbaeumer.vscode-eslint`\n- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) — `GitHub.copilot`\n- [GitLens — Git supercharged](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) — `eamodio.gitlens`\n- [Gremlins tracker for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=nhoizey.gremlins) — `nhoizey.gremlins`\n- [Helium Icon Theme](https://marketplace.visualstudio.com/items?itemName=helgardrichard.helium-icon-theme) — `helgardrichard.helium-icon-theme`\n- [Highlight Matching Tag](https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag) — `vincaslt.highlight-matching-tag`\n- [HTML CSS Support](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css) — `ecmel.vscode-html-css`\n- [Name That Color](https://marketplace.visualstudio.com/items?itemName=guillaumedoutriaux.name-that-color) — `guillaumedoutriaux.name-that-color`\n- [PHP_CodeSniffer](https://marketplace.visualstudio.com/items?itemName=obliviousharmony.vscode-php-codesniffer) — `obliviousharmony.vscode-php-codesniffer`\n- [Project Manager](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager) — `alefragnani.project-manager`\n- [SCSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss) — `mrmlnc.vscode-scss`\n- [stylefmt](https://marketplace.visualstudio.com/items?itemName=ronilaukkarinen.vscode-stylefmt) — `ronilaukkarinen.vscode-stylefmt`\n- [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) — `stylelint.vscode-stylelint`\n- [Sublime Text Keymap and Settings Importer](https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings) — `ms-vscode.sublime-keybindings`\n- [svgo](https://marketplace.visualstudio.com/items?itemName=1000ch.svgo) — `1000ch.svgo`\n- [SCSS Language Improvements](https://marketplace.visualstudio.com/items?itemName=ronilaukkarinen.scss-language-improvements) — `ronilaukkarinen.scss-language-improvements`\n- [CSS Variable Autocomplete](https://marketplace.visualstudio.com/items?itemName=vunguyentuan.vscode-css-variables) — `vunguyentuan.vscode-css-variables`\n- [Simple Todo](https://marketplace.visualstudio.com/items?itemName=SolomonRosemite.lsp-todo) — `SolomonRosemite.lsp-todo`\n- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) — `esbenp.prettier-vscode`\n\n## Optional extensions (fully personal preference)\n\nThese extensions are not related to my settings so you can choose whether you want to install them or not.\n\n[![custom](https://user-images.githubusercontent.com/1534150/169010107-47b0a358-7107-4097-b152-ee3c0676aec2.jpg)](https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css) [![fixchecksums](https://user-images.githubusercontent.com/1534150/169012114-32d71a14-45d3-446c-944f-727f468cbbbc.jpg)](https://marketplace.visualstudio.com/items?itemName=lehni.vscode-fix-checksums)\n\n## Interface\n\n### GitHub Purple + Sweet icons\n\nRecommended install: [Github Purple](https://marketplace.visualstudio.com/items?itemName=4a454646.github-purple) + [Sweet vscode Icons](https://marketplace.visualstudio.com/items?itemName=EliverLara.sweet-vscode-icons) to get this look:\n\n![Screen-Shot-2023-04-03-11-10-24 05](https://user-images.githubusercontent.com/1534150/229450660-3a8c26e6-2382-4f4a-bf66-560edd54edd4.png)\n\n### Dark neon dracula spacegray theme\n\nMy \"theme\" is my own mix of Spacegray, Synthwave '84 and Dracula. Color overrides are achieved via settings.json so no actual theme extension is needed.\n\nTo achieve this, [include these to your settings.json](https://github.com/ronilaukkarinen/vscode-settings/blob/57549e1214e15e4529e690069f32ac57a234e04f/settings.json#L509-L844). Then:\n\n1. Press \u003ckbd\u003e⌘\u003c/kbd\u003e \u003cspan\u003e+\u003c/span\u003e \u003ckbd\u003e⇧\u003c/kbd\u003e \u003cspan\u003e+\u003c/span\u003e \u003ckbd\u003eP\u003c/kbd\u003e (or \u003ckbd\u003ectrl\u003c/kbd\u003e \u003cspan\u003e+\u003c/span\u003e \u003ckbd\u003e⇧\u003c/kbd\u003e \u003cspan\u003e+\u003c/span\u003e \u003ckbd\u003eP\u003c/kbd\u003e on Windows system) and select `Enable Custom CSS and JS`, restart VSCode\n2. Press \u003ckbd\u003e⌘\u003c/kbd\u003e \u003cspan\u003e+\u003c/span\u003e \u003ckbd\u003e⇧\u003c/kbd\u003e \u003cspan\u003e+\u003c/span\u003e \u003ckbd\u003eP\u003c/kbd\u003e (or \u003ckbd\u003ectrl\u003c/kbd\u003e \u003cspan\u003e+\u003c/span\u003e \u003ckbd\u003e⇧\u003c/kbd\u003e \u003cspan\u003e+\u003c/span\u003e \u003ckbd\u003eP\u003c/kbd\u003e on Windows system) and select `Fix Checksums: Apply`, restart VSCode by pressing  \u003ckbd\u003e⌘\u003c/kbd\u003e \u003cspan\u003e+\u003c/span\u003e \u003ckbd\u003eQ\u003c/kbd\u003e and reopen VSCode. You'll need to do this each time VSCode updates (you'll see when the font sizes change)\n\n![Screen-Shot-2022-05-18-12-24-18 07](https://user-images.githubusercontent.com/1534150/169008168-ce74d88f-21fe-4b46-8896-912e1b9bc62a.png)\n\n## Add colored icons\n\nChange these to settings.json:\n\n```json\n\"helium-icon-theme.saturation\": 1,\n\"helium-icon-theme.opacity\": 1,\n```\n\nThen \u003ckbd\u003e⌘\u003c/kbd\u003e \u003cspan\u003e+\u003c/span\u003e \u003ckbd\u003e⇧\u003c/kbd\u003e \u003cspan\u003e+\u003c/span\u003e \u003ckbd\u003eP\u003c/kbd\u003e and select `Preferences: File Icon Theme`, select any other than Helium. After this re-activate Helium icons.\n\n## Disable CSS customizations \n\nIf you don't want to use CSS customizations, everything may look a big big and clumsy. You'll fix this by changing font/UI size settings to this:\n\n```json\n\"editor.lineHeight\": 24,\n\"window.zoomLevel\": 0.4,\n\"editor.fontSize\": 14,\n```\n\n\n\n## Keymaps\n\nIf you want to import your Sublime Keymaps, [go through this documentation](https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings).\n\n## Windows 10-11 support\n\nIf you use Windows you need a bat file for executables, see [this](https://github.com/microsoft/vscode/issues/22391#issuecomment-310593201) and [this](https://www.reddit.com/r/bashonubuntuonwindows/comments/77idb8/where_is_the_executable_for_the_new_wsl_ubuntu_in/donn90c/?utm_source=reddit\u0026utm_medium=web2x\u0026context=3). Get my bat files from [vscode-windows-helpers](https://github.com/ronilaukkarinen/vscode-windows-helpers).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fronilaukkarinen%2Fvscode-settings","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fronilaukkarinen%2Fvscode-settings","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fronilaukkarinen%2Fvscode-settings/lists"}