VSCode settings for Scott Granneman’s Web Dev courses

grannepack-html-vscode-settings.json

// Place your settings in this file to overwrite the default settings
{
  // Color Picker
  "colorHelper.formatsOrder": [
    "hsl",
    "hex",
    "named"
  ],
  "css.format.spaceAroundSelectorSeparator": true,
  "diffEditor.ignoreTrimWhitespace": false,
  "editor.acceptSuggestionOnEnter": "on",
  "editor.bracketPairColorization.enabled": true,
  "editor.columnSelection": false,
  "editor.cursorSurroundingLines": 3,
  "editor.detectIndentation": false,
  "editor.fontFamily": "Source Code Pro, Menlo, Consolas, Fira Mono, Courier, monospace",
  "editor.fontSize": 11,
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.guides.bracketPairs": true,
  "editor.hover.delay": 2000,
  "editor.inlineSuggest.enabled": true,
  "editor.lineHeight": 0,
  "editor.linkedEditing": true,
  "editor.multiCursorModifier": "ctrlCmd",
  "editor.padding.bottom": 25,
  "editor.padding.top": 25,
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
  "editor.renderWhitespace": "selection",
  "editor.snippetSuggestions": "bottom",
  "editor.stickyScroll.enabled": false,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.wrappingIndent": "indent",
  "emmet.preferences": {
    "format.forceIndentationForTags": [
      "address",
      "article",
      "aside",
      "audio",
      "blockquote",
      "body",
      "canvas",
      "div",
      "dl",
      "fieldset",
      "figcaption",
      "figure",
      "footer",
      "form",
      "head",
      "header",
      "iframe",
      "main",
      "map",
      "nav",
      "object",
      "ol",
      "p",
      "pre",
      "script",
      "section",
      "style",
      "table",
      "tbody",
      "td",
      "tfoot",
      "th",
      "thead",
      "tr",
      "ul",
      "video"
    ]
  },
  "emmet.showSuggestionsAsSnippets": true,
  "explorer.compactFolders": false,
  "extensions.ignoreRecommendations": true,
  "files.exclude": {
    "**/._*": true
  },
  "files.insertFinalNewline": true,
  "html-css-class-completion.enableEmmetSupport": true,
  "html.format.extraLiners": "body",
  "html.format.indentInnerHtml": true,
  "html.format.unformatted": "b,em,i,pre,span,strong,wbr",
  "html.format.wrapLineLength": 0,
  "htmlhint.options": {
    //HTML Hint options: https://htmlhint.com/docs/user-guide/list-rules
    "alt-require": true,
    "attr-lowercase": [
      "allowReorder",
      "attributeName",
      "attributeType",
      "autoReverse",
      "baseFrequency",
      "baseProfile",
      "calcMode",
      "clipPath",
      "clipPathUnits",
      "contentScriptType",
      "contentStyleType",
      "diffuseConstant",
      "edgeMode",
      "externalResourcesRequired",
      "filterRes",
      "filterUnits",
      "glyphRef",
      "gradientTransform",
      "gradientUnits",
      "kernelMatrix",
      "kernelUnitLength",
      "keyPoints",
      "keySplines",
      "keyTimes",
      "lengthAdjust",
      "limitingConeAngle",
      "markerHeight",
      "markerUnits",
      "markerWidth",
      "maskContentUnits",
      "maskUnits",
      "numOctaves",
      "onBlur",
      "onChange",
      "onClick",
      "onFocus",
      "onKeyUp",
      "onLoad",
      "pathLength",
      "patternContentUnits",
      "patternTransform",
      "patternUnits",
      "pointsAtX",
      "pointsAtY",
      "pointsAtZ",
      "preserveAlpha",
      "preserveAspectRatio",
      "primitiveUnits",
      "refX",
      "refY",
      "repeatCount",
      "repeatDur",
      "requiredExtensions",
      "requiredFeatures",
      "specularConstant",
      "specularExponent",
      "spreadMethod",
      "startOffset",
      "stdDeviation",
      "stitchTiles",
      "surfaceScale",
      "systemLanguage",
      "tableValues",
      "targetX",
      "targetY",
      "textLength",
      "viewBox",
      "viewTarget",
      "xChannelSelector",
      "yChannelSelector",
      "zoomAndPan"
    ],
    "attr-no-duplication": true,
    "attr-no-unnecessary-whitespace": true,
    "attr-value-double-quotes": true,
    "attr-whitespace": true,
    "doctype-first": true,
    "empty-tag-not-self-closed": true,
    "html-lang-require": true,
    "id-unique": true,
    "inline-style-disabled": true,
    "src-not-empty": true,
    "tag-pair": true,
    "tagname-lowercase": [
      "animateMotion",
      "animateTransform",
      "clipPath",
      "feBlend",
      "feColorMatrix",
      "feComponentTransfer",
      "feComposite",
      "feConvolveMatrix",
      "feDiffuseLighting",
      "feDisplacementMap",
      "feDistantLight",
      "feDropShadow",
      "feFlood",
      "feFuncA",
      "feFuncB",
      "feFuncG",
      "feFuncR",
      "feGaussianBlur",
      "feImage",
      "feMerge",
      "feMergeNode",
      "feMorphology",
      "feOffset",
      "fePointLight",
      "feSpecularLighting",
      "feSpotLight",
      "feTile",
      "feTurbulence",
      "foreignObject",
      "linearGradient",
      "radialGradient",
      "textPath"
    ],
    "tagname-specialchars": true,
    "title-require": true
  },
  "http.systemCertificates": false,
  // Live Preview
  "livePreview.openPreviewTarget": "External Browser",
  "livePreview.autoRefreshPreview": "On Changes to Saved Files",
  // Live Sass Compiler
  "liveSassCompile.settings.generateMap": false,
  // Markdown-only settings
  "[markdown]": {
    "editor.tabSize": 4
  },
  // Placeholder Images
  "placeholderImages.quoteStyle": "double",
  "window.restoreWindows": "preserve",
  "window.zoomLevel": 1.25,
  "workbench.editor.enablePreview": false,
  "workbench.editor.enablePreviewFromQuickOpen": false,
  "workbench.editor.highlightModifiedTabs": true,
  "workbench.editor.tabSizing": "shrink",
  // SVG should open as code, not preview
  "workbench.editorAssociations": {
    "*.svg": "default"
  },
  "workbench.settings.openDefaultSettings": true,
  "workbench.settings.useSplitJSON": true,
  "workbench.startupEditor": "none"
}

Removed html.format.endWithNewline, as it was removed in June 2022 in favor of files.insertFinalNewline. See https://code.visualstudio.com/updates/v1_69#_html-final-new-line-formatter-setting-change.

Removed workbench.activityBar.visible as it no longer works (& probably hasn’t for quite some time!).

Removed livePreview.tasks.browserPreviewLaunchServerLogging as it is no longer supported.

Removed editorIndentGuide.activeBackground as it is unnecessary.

Changed editor.stickyScroll.enabled to false. I hate sticky scroll.

Added pre to html.format.unformatted. Duh!

Added spaces to font names in editor.fontFamily

Removed "breadcrumbs.enabled": true, as it is the default.

Had to add this because VS Code 1.97 (Jan. 2025) stupidly changed the default for SVG files from showing the code to showing a preview:

// SVG should open as code, not preview
"workbench.editorAssociations": {
  "*.svg": "default"
},

Changed title to “VSCode settings for Scott Granneman’s Web Dev courses”