VS Code Extensions and Settings

readme.md

VS Code (Backup)

Current VS Code settings reference backup of current setup.

extensions.yml

- AdamCaviness.theme-monokai-dark-soda
- alefragnani.project-manager
- attilabuti.vscode-mjml
- be5invis.toml
- bierner.emojisense
- bierner.markdown-preview-github-styles
- christian-kohler.path-intellisense
- cjhowe7.laravel-blade
- CoenraadS.bracket-pair-colorizer
- dbaeumer.vscode-eslint
- digitalstreamio.mjml-syntax
- dzannotti.vscode-babel-coloring
- eamodio.gitlens
- esbenp.prettier-vscode
- ExodiusStudios.comment-anchors
- FallenMax.mithril-emmet
- file-icons.file-icons
- formulahendry.auto-close-tag
- ginfuru.ginfuru-vscode-jekyll-syntax
- ginfuru.vscode-jekyll-snippets
- IBM.output-colorizer
- JamesBirtles.svelte-vscode
- jasonnutter.search-node-modules
- kenhowardpdx.vscode-gist
- kirchner-trevor.shopify-liquid-preview
- kvnol.mjml-snippets
- lehni.vscode-titlebar-less-macos
- MehediDracula.php-namespace-resolver
- mgmcdermott.vscode-language-babel
- mikestead.dotenv
- mjmcloug.vscode-elixir
- mrmlnc.vscode-scss
- nickdodd79.gulptasks
- nwallace.peep
- onecentlin.laravel-blade
- progre.promise-snippets
- sachittandukar.laravel-5-snippets
- shinnn.stylelint
- SirTori.indenticator
- sissel.shopify-liquid
- Sophisticode.php-formatter
- stackbreak.comment-divider
- Togusa09.tmlanguage
- tombonnike.vscode-status-bar-format-toggle
- vincaslt.highlight-matching-tag
- vscode-icons-team.vscode-icons
- xabikos.JavaScriptSnippets

vscode-settings.json5

{

  /* -------------------------------------------- */
  /*                SECTION EDITOR                */
  /* -------------------------------------------- */

  // ANCHOR FONTS
  "editor.matchBrackets": false,
  "editor.renderWhitespace": "all",
  "editor.fontFamily": "Courier New",
  "editor.fontSize": 17.60,
  "editor.codeLens": true,
  "editor.tabSize": 2,
  "editor.letterSpacing": 0.35,
  "editor.lineHeight": 23.25,
  "editor.fontWeight": "500",

  // ANCHOR SCROLLING
  "editor.smoothScrolling": true,
  "editor.scrollBeyondLastLine": false,

  // ANCHOR FORMATTING
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.formatOnType": false,

  // ANCHOR INDENTATION
  "editor.wordWrap": "on",
  "editor.detectIndentation": true,
  "editor.renderIndentGuides": true,

  // ANCHOR RULERS
  "editor.rulers": [
    100
  ],

  // ANCHOR SUGGESTIONS
  "editor.quickSuggestions": {
    "other": true,
    "comments": false,
    "strings": true
  },

  /* !SECTION */

  /* -------------------------------------------- */
  /*                 SECTION EMMET                */
  /* -------------------------------------------- */

  // ANCHOR SUGGESTIONS
  "emmet.includeLanguages": {
    "liquid": [
      "html"
    ]
  },

  /* !SECTION */

  /* -------------------------------------------- */
  /*                SECTION ESLINT                */
  /* -------------------------------------------- */

  "eslint.alwaysShowStatus": true,
  "eslint.autoFixOnSave": true,
  "eslint.options": {
    "extensions": [
      ".html",
      ".liquid",
      ".js",
      ".vue",
      ".jsx"
    ]
  },

  // ANCHOR LANGUAGE
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    /*
      NOTE Use below settings when working with `<script>` tags.
      Apply validating based on language as workspace settings.
    */
    {
      "language": "html",
      "autoFix": false
    },
    {
      "language": "liquid",
      "autoFix": false
    }
  ],

  /* !SECTION */

  /* -------------------------------------------- */
  /*               SECTION PRETTIER               */
  /* -------------------------------------------- */

  "prettier.requireConfig": true,
  "prettier.eslintIntegration": true,
  "prettier.stylelintIntegration": true,
  "prettier.disableLanguages": [
    "html",
    "liquid"
  ],

  /* !SECTION */

  /* -------------------------------------------- */
  /*               SECTION GIT LENS               */
  /* -------------------------------------------- */

  "gitlens.mode.statusBar.alignment": "left",
  "gitlens.settings.mode": "advanced",

  /* !SECTION */

  /* -------------------------------------------- */
  /*                 SECTION HTML                 */
  /* -------------------------------------------- */

  // TODO Below settings should* be applied per workspace settings.
  "html.format.unformatted": "stream, schema, script",

  /* !SECTION */

  /* -------------------------------------------- */
  /*             SECTION CSS / SCSS               */
  /* -------------------------------------------- */

  "scss.validate": true,
  "css.validate": false,

  /* !SECTION */

  /* -------------------------------------------- */
  /*              SECTION JAVASCRIPT              */
  /* -------------------------------------------- */

  "javascript.format.enable": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "typescript.surveys.enabled": false,

  /* !SECTION */

  /* -------------------------------------------- */
  /*               SECTION FILES                  */
  /* -------------------------------------------- */

  // ANCHOR ASSOCIATIONS
  "files.associations": {
    ".sync": "json",
    "b2ebc1d885fba044acb9d868c626676f": "json"
  },

  // ANCHOR EXCLUDES
  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true,
    "**/.vscode": false,
    "**/coverage": true,
    "**/.idea": true,
    "**/.bundle": true
  },

  // ANCHOR AUTO-SAVE
  "files.autoSaveDelay": 2500,
  "files.autoSave": "onFocusChange",

  // ANCHOR  OTHER
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.hotExit": "onExitAndWindowClose",

  /* !SECTION */

  /* -------------------------------------------- */
  /*                 SECTION MJML                 */
  /* -------------------------------------------- */

  // # MJML - EXTENSION CONFIGURATION
  // # The default settings for `.mjml` files
  "mjml.screenshotQuality": 100,
  "mjml.beautifyHtmlOutput": true,
  "mjml.autoPreview": true,

  /* !SECTION */

  /* -------------------------------------------- */
  /*               SECTION TELEMETRY              */
  /* -------------------------------------------- */

  "telemetry.enableTelemetry": false,
  "telemetry.enableCrashReporter": false,

  /* !SECTION */

  /* -------------------------------------------- */
  /*               SECTION WORKBENCH              */
  /* -------------------------------------------- */

  "workbench.colorTheme": "Monokai Dark Soda", // ANCHOR COLOR THEME
  "workbench.iconTheme": "vscode-icons", // ANCHOR ICON THEME
  "workbench.activityBar.visible": true,
  "workbench.editor.highlightModifiedTabs": true,
  "workbench.statusBar.feedback.visible": false,

  /* SECTION COLORS*/

  "workbench.colorCustomizations": {

    // ANCHOR ACTIVITY BAR
    "activityBar.background": "#0c0c0c",
    "activityBar.border": "#302f2f",

    // ANCHOR DROPDOWN
    "dropdown.background": "#0c0c0c",
    "dropdown.foreground": "#d4d4d4",
    "dropdown.border": "#302f2f",

    // ANCHOR EDITOR
    "editor.lineHighlightBackground": "#ffffff15",
    "editorLineNumber.activeForeground": "#d4d4d4",
    "editorGroupHeader.tabsBackground": "#0c0c0c",
    "editor.background": "#0c0c0c",
    "editorGutter.background": "#0c0c0c",

    // ANCHOR INPUT
    "input.background": "#0a0a0a",
    "input.border": "#302f2f",
    "inputOption.activeBorder": "#60bbf0a6",

    // ANCHOR SIDEBAR
    "sideBarSectionHeader.background": "#111111",
    "sideBarSectionHeader.border": "#302f2f",
    "sideBar.background": "#0c0c0c",
    "sideBar.border": "#302f2f",
    "sideBar.foreground": "#d4d4d4",

    // ANCHOR STATUS BAR
    "statusBar.background": "#0c0c0c",
    "statusBar.border": "#302f2f",

    // ANCHOR TABS
    "tab.activeBackground": "#0c0c0c",
    "tab.activeBorderTop": "#60bbf0",
    "tab.hoverBackground": "#0c0c0c",
    "tab.border": "#302f2f",
    "tab.inactiveBackground": "#141414",
    "tab.unfocusedActiveBorder": "#302f2f",

    // ANCHOR TERMINAL
    "terminal.background": "#0c0c0c",

    // ANCHOR PANEL
    "panel.background": "#0c0c0c",
    "panel.border": "#302f2f",
    "panelTitle.activeBorder": "#60bbf0a6",

    // ANCHOR TITLE BAR
    "titleBar.activeBackground": "#111111",
  },

  /* !SECTION END COLORS*/

  /* !SECTION END WORKBENCH*/

  /* -------------------------------------------- */
  /*                SECTION WINDOW                */
  /* -------------------------------------------- */

  "window.zoomLevel": 0,
  "window.restoreFullscreen": true,

  // ANCHOR TITLE BAR
  // NOTE Required settings for `titlebar-less` extension
  "window.titleBarStyle": "custom",

  // ANCHOR TABS
  "window.nativeTabs": false,

  /* !SECTION */

  /* -------------------------------------------- */
  /*                SECTION EXPLORER              */
  /* -------------------------------------------- */

  "explorer.confirmDragAndDrop": false,
  "explorer.autoReveal": true,

  /* !SECTION */

  /* -------------------------------------------- */
  /*                SECTION SEARCH                */
  /* -------------------------------------------- */

  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/_build": true,
    "**/dist": true,
    "**/_build.nosync": true,
    "**/deps": true,
    "**/.idea": true,
    "**/.bundle": true,
    "**/cover": true,
    "**/coverage": true
  },

  /* !SECTION */

  /* -------------------------------------------- */
  /*               SECTION TERMINAL               */
  /* -------------------------------------------- */

  "terminal.external.osxExec": "iTerm.app",
  "terminal.integrated.fontSize": 15.45,
  "terminal.integrated.enableBell": true,
  "terminal.integrated.fontWeight": "500",
  "terminal.integrated.letterSpacing": 0.5,

  /* !SECTION */

  /* -------------------------------------------- */
  /*             SECTION EXTENSIONS               */
  /* -------------------------------------------- */

  // ANCHOR VSC DEFAULT
  "extensions.showRecommendationsOnlyOnDemand": true,

  // ANCHOR INDENTICATOR
  "indenticator.showCurrentDepthInStatusBar": false,
  "indenticator.inner.style": "none",
  "indenticator.style": "solid",
  "indenticator.color.dark": "#ac642ad6",
  "indenticator.width": 0.7,
  "indenticator.inner.showHighlight": false,
  "indenticator.inner.width": 1,

  // ANCHOR MATCHING TAG
  "highlight-matching-tag.styles": {
    "opening": {
      "left": {
        "custom": {
          "borderWidth": "1px",
          "borderStyle": "solid",
          "borderColor": "#ac642ad6"
        }
      }
    }
  },

  // ANCHOR COMMENT DIVIDER
  "comment-divider.length": 50,

  // ANCHOR LIQUID
  "liquid.format": true,
  "liquid.formatIgnore": [
    "case"
  ],

  // ANCHOR EMOJISENSE
  "emojisense.markupCompletionsEnabled": true,
  "emojisense.languages": {
    "markdown": true,
    "json": true,
    "jsonc": true,
    "plaintext": {
      "markupCompletionsEnabled": false,
      "emojiDecoratorsEnabled": false
    },
    "git-commit": true
  },

  // ANCHOR PROJECT MANAGER
  "projectManager.groupList": true,

  /* !SECTION */


}