├── .github └── FUNDING.yml └── README.md /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | patreon: CodingGardenWithCJ 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # VS Code Settings 2 | 3 | # Font 4 | 5 | * [Anonymous Pro](https://www.marksimonson.com/fonts/view/anonymous-pro) 6 | 7 | ## Themes/Color 8 | 9 | * [Just Black](https://marketplace.visualstudio.com/items?itemName=nur.just-black) 10 | * See [`editor.tokenColorCustomizations`](#settings) in my VS Code settings for a few modifications I make to the theme. 11 | 12 | ## Extensions 13 | 14 | * Theme / Editor Experience 15 | * [FontSize ShortCuts](https://marketplace.visualstudio.com/items?itemName=fosshaas.fontsize-shortcuts) 16 | * Change the font size with keyboard shortcuts. 17 | * [vscode-icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons) 18 | * Nice / colorful icons for many different file types 19 | * [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) 20 | * Integrates ESLint JS 21 | * [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) 22 | * Automatically format javascript, JSON, CSS, Sass 23 | * [Paste JSON as Code](https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype) 24 | * Auto generate TypeScript (and other languages) types from JSON data., and HTML files. 25 | * [PostCSS Intellisense and Highlighting](https://marketplace.visualstudio.com/items?itemName=vunguyentuan.vscode-postcss) 26 | * Works better than the other more popular one of a similar name. 27 | * [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) 28 | * Spell check markdown, comments and variable names. 29 | * [Pretty TypeScript Errors](https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors) 30 | * Makes TS errors more human readable. 31 | * Useful Tools 32 | * [Paste JSON as Code](https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype) 33 | * Auto generate TypeScript (and other languages) types from JSON data. 34 | * [Code Snap](https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap) 35 | * Take pictures of code with your VS Code Theme / Font settings. 36 | * [Thunder Client](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client) 37 | * Make HTTP requests from inside VS Code (similar to Postman / Insomnia). 38 | * Languages and Libraries 39 | * [XML Tools](https://marketplace.visualstudio.com/items?itemName=DotJoshJohnson.xml) 40 | * XML Formatting, XQuery, and XPath Tools for Visual Studio Code. 41 | * [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) 42 | * Intelligent Tailwind CSS tooling for VS Code. 43 | * React 44 | * [ES7+ React/Redux/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets) 45 | * Extensions for React, React-Native and Redux in JS/TS with ES7+ syntax. Customizable. Built-in integration with prettier. 46 | * [CSS to JSS](https://marketplace.visualstudio.com/items?itemName=infarkt.css-to-jss) 47 | * Convert CSS to JSS 48 | * [CSS in JS](https://marketplace.visualstudio.com/items?itemName=paulmolluzzo.convert-css-in-js) 49 | * Get syntax highlighting when working with CSS in JS template strings. 50 | * [vscode-styled-components](https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components) 51 | * Syntax highlighting for styled-components. 52 | * [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) 53 | * Language support for Vue 3 54 | * [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) 55 | * Svelte language support for VS Code. 56 | * [Prisma](https://marketplace.visualstudio.com/items?itemName=Prisma.prisma) 57 | * Adds syntax highlighting, formatting, auto-completion, jump-to-definition and linting for .prisma files. 58 | * [htmx-tags](https://marketplace.visualstudio.com/items?itemName=otovo-oss.htmx-tags) 59 | * Provides HTMX tag completion in HTML files in VSCode 60 | * [Markdown Mermaid Preview](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid) 61 | * View Mermaid diagrams when previewing Markdown. 62 | 63 | ### Extension package names for easy install 64 | 65 | ``` 66 | nur.just-black 67 | fosshaas.fontsize-shortcuts 68 | vscode-icons-team.vscode-icons 69 | dbaeumer.vscode-eslint 70 | esbenp.prettier-vscode 71 | quicktype.quicktype 72 | vunguyentuan.vscode-postcss 73 | streetsidesoftware.code-spell-checker 74 | yoavbls.pretty-ts-errors 75 | quicktype.quicktype 76 | adpyke.codesnap 77 | rangav.vscode-thunder-client 78 | DotJoshJohnson.xml 79 | bradlc.vscode-tailwindcss 80 | dsznajder.es7-react-js-snippets 81 | infarkt.css-to-jss 82 | paulmolluzzo.convert-css-in-js 83 | styled-components.vscode-styled-components 84 | Vue.volar 85 | svelte.svelte-vscode 86 | Prisma.prisma 87 | otovo-oss.htmx-tags 88 | bierner.markdown-mermaid 89 | ``` 90 | 91 | # Settings 92 | 93 | ```json 94 | { 95 | "codesnap.backgroundColor": "#000000", 96 | "codesnap.containerPadding": "0px", 97 | "codesnap.showWindowControls": false, 98 | "codesnap.transparentBackground": true, 99 | "cSpell.enabled": true, 100 | "cSpell.enableFiletypes": [ 101 | "mdx" 102 | ], 103 | "diffEditor.ignoreTrimWhitespace": false, 104 | "editor.detectIndentation": true, 105 | "editor.fontFamily": "Anonymous Pro", 106 | "editor.fontLigatures": true, 107 | "editor.fontSize": 13, 108 | "editor.formatOnPaste": false, 109 | "editor.inlineSuggest.enabled": true, 110 | "editor.lineHeight": 0, 111 | "editor.linkedEditing": true, 112 | "editor.minimap.enabled": false, 113 | "editor.multiCursorModifier": "ctrlCmd", 114 | "editor.snippetSuggestions": "top", 115 | "editor.suggestSelection": "first", 116 | "editor.tabSize": 2, 117 | "editor.tokenColorCustomizations": { 118 | "textMateRules": [ 119 | { 120 | "scope": [ 121 | "keyword.operator", 122 | "punctuation.separator" 123 | ], 124 | "settings": { 125 | "fontStyle": "" 126 | } 127 | }, 128 | { 129 | "scope": [ 130 | "comment", 131 | "comment.block" 132 | ], 133 | "settings": { 134 | "fontStyle": "italic", 135 | "foreground": "#F5F" 136 | } 137 | }, 138 | { 139 | "name": "envKeys", 140 | "scope": "string.quoted.double.env,source.env,constant.numeric.env", 141 | "settings": { 142 | "foreground": "#19354900" 143 | } 144 | } 145 | ] 146 | }, 147 | "editor.unicodeHighlight.invisibleCharacters": false, 148 | "emmet.showAbbreviationSuggestions": false, 149 | "eslint.enable": true, 150 | "eslint.validate": [ 151 | "vue", 152 | "react", 153 | "typescript", 154 | "html", 155 | "javascript" 156 | ], 157 | "explorer.openEditors.visible": 1, 158 | "extensions.ignoreRecommendations": true, 159 | "files.autoSave": "onWindowChange", 160 | "git.autofetch": true, 161 | "git.openRepositoryInParentFolders": "never", 162 | "markdown.preview.fontSize": 36, 163 | "screencastMode.keyboardOptions": { 164 | "showCommandGroups": false, 165 | "showCommands": false, 166 | "showKeybindings": true, 167 | "showKeys": false, 168 | "showSingleEditorCursorMoves": true 169 | }, 170 | "search.exclude": { 171 | "**/*.code-search": true, 172 | "**/bower_components": true, 173 | "**/node_modules": true 174 | }, 175 | "search.useIgnoreFiles": false, 176 | "svelte.enable-ts-plugin": true, 177 | "terminal.integrated.fontSize": 14, 178 | "vsicons.dontShowNewVersionMessage": true, 179 | "window.zoomLevel": 4, 180 | "workbench.colorTheme": "Just Black", 181 | "workbench.editor.labelFormat": "medium", 182 | "workbench.editor.showTabs": "none", 183 | "workbench.iconTheme": "vscode-icons", 184 | "workbench.sideBar.location": "right", 185 | "workbench.startupEditor": "newUntitledFile", 186 | "workbench.statusBar.visible": false, 187 | "[css]": { 188 | "editor.defaultFormatter": "esbenp.prettier-vscode" 189 | }, 190 | "[handlebars]": { 191 | "editor.defaultFormatter": "esbenp.prettier-vscode" 192 | }, 193 | "[html]": { 194 | "editor.defaultFormatter": "esbenp.prettier-vscode" 195 | }, 196 | "[javascript]": { 197 | "editor.defaultFormatter": "esbenp.prettier-vscode" 198 | }, 199 | "[javascriptreact]": { 200 | "editor.defaultFormatter": "esbenp.prettier-vscode" 201 | }, 202 | "[json]": { 203 | "editor.defaultFormatter": "esbenp.prettier-vscode" 204 | }, 205 | "[jsonc]": { 206 | "editor.defaultFormatter": "esbenp.prettier-vscode" 207 | }, 208 | "[markdown]": { 209 | "editor.defaultFormatter": "esbenp.prettier-vscode" 210 | }, 211 | "[scss]": { 212 | "editor.defaultFormatter": "esbenp.prettier-vscode" 213 | }, 214 | "[svelte]": { 215 | "editor.defaultFormatter": "svelte.svelte-vscode" 216 | }, 217 | "[typescript]": { 218 | "editor.defaultFormatter": "esbenp.prettier-vscode" 219 | }, 220 | "[typescriptreact]": { 221 | "editor.defaultFormatter": "esbenp.prettier-vscode" 222 | }, 223 | } 224 | ``` 225 | 226 | # Keybindings 227 | 228 | ```json 229 | [ 230 | { 231 | "key": "cmd+1", 232 | "command": "workbench.action.openEditorAtIndex1" 233 | }, 234 | { 235 | "key": "ctrl+1", 236 | "command": "-workbench.action.openEditorAtIndex1" 237 | }, 238 | { 239 | "key": "cmd+2", 240 | "command": "workbench.action.openEditorAtIndex2" 241 | }, 242 | { 243 | "key": "ctrl+2", 244 | "command": "-workbench.action.openEditorAtIndex2" 245 | }, 246 | { 247 | "key": "cmd+3", 248 | "command": "workbench.action.openEditorAtIndex3" 249 | }, 250 | { 251 | "key": "ctrl+3", 252 | "command": "-workbench.action.openEditorAtIndex3" 253 | }, 254 | { 255 | "key": "cmd+4", 256 | "command": "workbench.action.openEditorAtIndex4" 257 | }, 258 | { 259 | "key": "ctrl+4", 260 | "command": "-workbench.action.openEditorAtIndex4" 261 | }, 262 | { 263 | "key": "cmd+5", 264 | "command": "workbench.action.openEditorAtIndex5" 265 | }, 266 | { 267 | "key": "ctrl+5", 268 | "command": "-workbench.action.openEditorAtIndex5" 269 | }, 270 | { 271 | "key": "cmd+6", 272 | "command": "workbench.action.openEditorAtIndex6" 273 | }, 274 | { 275 | "key": "ctrl+6", 276 | "command": "-workbench.action.openEditorAtIndex6" 277 | }, 278 | { 279 | "key": "cmd+7", 280 | "command": "workbench.action.openEditorAtIndex7" 281 | }, 282 | { 283 | "key": "ctrl+7", 284 | "command": "-workbench.action.openEditorAtIndex7" 285 | }, 286 | { 287 | "key": "cmd+8", 288 | "command": "workbench.action.openEditorAtIndex8" 289 | }, 290 | { 291 | "key": "ctrl+8", 292 | "command": "-workbench.action.openEditorAtIndex8" 293 | }, 294 | { 295 | "key": "cmd+9", 296 | "command": "workbench.action.openEditorAtIndex9" 297 | }, 298 | { 299 | "key": "ctrl+9", 300 | "command": "-workbench.action.openEditorAtIndex9" 301 | }, 302 | { 303 | "key": "ctrl+1", 304 | "command": "workbench.action.focusFirstEditorGroup" 305 | }, 306 | { 307 | "key": "cmd+1", 308 | "command": "-workbench.action.focusFirstEditorGroup" 309 | }, 310 | { 311 | "key": "ctrl+3", 312 | "command": "workbench.action.focusThirdEditorGroup" 313 | }, 314 | { 315 | "key": "cmd+3", 316 | "command": "-workbench.action.focusThirdEditorGroup" 317 | }, 318 | { 319 | "key": "ctrl+6", 320 | "command": "workbench.action.focusSixthEditorGroup" 321 | }, 322 | { 323 | "key": "cmd+6", 324 | "command": "-workbench.action.focusSixthEditorGroup" 325 | }, 326 | { 327 | "key": "ctrl+7", 328 | "command": "workbench.action.focusSeventhEditorGroup" 329 | }, 330 | { 331 | "key": "cmd+7", 332 | "command": "-workbench.action.focusSeventhEditorGroup" 333 | }, 334 | { 335 | "key": "ctrl+2", 336 | "command": "workbench.action.focusSecondEditorGroup" 337 | }, 338 | { 339 | "key": "cmd+2", 340 | "command": "-workbench.action.focusSecondEditorGroup" 341 | }, 342 | { 343 | "key": "ctrl+4", 344 | "command": "workbench.action.focusFourthEditorGroup" 345 | }, 346 | { 347 | "key": "cmd+4", 348 | "command": "-workbench.action.focusFourthEditorGroup" 349 | }, 350 | { 351 | "key": "ctrl+5", 352 | "command": "workbench.action.focusFifthEditorGroup" 353 | }, 354 | { 355 | "key": "cmd+5", 356 | "command": "-workbench.action.focusFifthEditorGroup" 357 | }, 358 | { 359 | "key": "ctrl+8", 360 | "command": "workbench.action.focusEighthEditorGroup" 361 | }, 362 | { 363 | "key": "cmd+8", 364 | "command": "-workbench.action.focusEighthEditorGroup" 365 | } 366 | ] 367 | ``` 368 | 369 | ## Past Themes 370 | 371 | * Original theme I use in some videos: 372 | * [Seti-Monokai](https://marketplace.visualstudio.com/items?itemName=SmukkeKim.theme-setimonokai) 373 | * I used this darker modification of the above theme for a few videos: 374 | * [Seti-Black](https://marketplace.visualstudio.com/items?itemName=bobsparadox.seti-black) 375 | --------------------------------------------------------------------------------