fmdefranca / vscode-settings

VS Code Settings

Font

• Anonymous Pro

Extensions

See my full list of extensions here.

Themes/Color

• Current theme:
  • Just Black
• Original theme I use in most videos:
  • Seti-Monokai
• I used this darker modification of the above theme for a few videos:
  • Seti-Black
• Material Icon Theme
• Bracket Pair Colorizer
  • Matching parenthesis and curly brackets to with colors

Workflow

• advanced-new-file
  • Adds the ability to create files anywhere in your workspace.
• Auto Close Tag
  • Automatically add HTML/XML close tag
• Auto Rename Tag
  • Automatically rename paired HTML/XML tag
• FontSize ShortCuts
  • Change the font size with keyboard shortcuts.
• Toggle Quotes
  • cmd ' (ctrl ' on win/linux) will cycle the first quote pair found (from the start/end of the section) between ', ", `

IntelliSense/AutoComplete

• IntelliSense for CSS class names in HTML
  • Provides CSS class name completion for the HTML class attribute based on the definitions found in your workspace or external files referenced through the link element
• npm Intellisense
  • Autocompletes npm modules in import/require statements
• Path Intellisense
  • Autocompletes filenames
• Vetur
  • Vue tooling

Style/Formatting

• ESLint
  • Integrates ESLint JS
• Beautify
  • Automatically format javascript, JSON, CSS, Sass, and HTML files.

Useful/Extra

• Import Cost
  • Display inline the size of the required/imported package
• Quokka.js
  • Evaluate code/logs inline and show results in the editor
• VS Live Share
  • Collaborative editing, debugging, and more inside VS Code

Settings

{
    "explorer.openEditors.visible": 0,
    "editor.snippetSuggestions": "top",
    "emmet.showAbbreviationSuggestions": false,
    "editor.multiCursorModifier": "ctrlCmd",
    "editor.formatOnPaste": false,
    "workbench.colorTheme": "Just Black",
    "window.zoomLevel": 1,
    "workbench.iconTheme": "vscode-icons",
    "editor.fontLigatures": true,
    "terminal.integrated.fontSize": 24,
    "editor.fontSize": 24,
    "files.autoSave": "off",
    "editor.fontFamily": "Anonymous Pro",
    "markdown.preview.fontSize": 36,
    "editor.tabSize": 2,
    "editor.detectIndentation": true,
    "editor.minimap.enabled": false,
    "eslint.enable": true,
    "files.exclude": { "**/.*": true },
    "eslint.validate": [
        {
            "language": "vue",
            "autoFix": true
        },
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "javascript",
            "autoFix": true
        }
    ],
    "workbench.startupEditor": "newUntitledFile",
    "editor.suggestSelection": "first",
    "[javascript]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "[json]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "[html]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "[css]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "liveshare.featureSet": "insiders",
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
    "diffEditor.ignoreTrimWhitespace": false,
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "liveshare.anonymousGuestApproval": "accept",
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "workbench.colorCustomizations": {},
    "[scss]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.tokenColorCustomizations": {
        "textMateRules": [
            {
                "scope": [
                    "keyword.operator.logical"
                ],
                "settings": {
                    "fontStyle": ""
                }
            },
            {
                "scope": [
                    "keyword.operator.logical"
                ],
                "settings": {
                    "fontStyle": ""
                }
            },
            {
                "name": "envKeys",
                "scope": "string.quoted.double.env,source.env,constant.numeric.env",
                "settings": {
                    "foreground": "#19354900"
                }
            },
            {
                "scope": [
                    "keyword.operator.logical"
                ],
                "settings": {
                    "fontStyle": ""
                }
            },
            {
                "scope": [
                    "keyword.operator.logical"
                ],
                "settings": {
                    "fontStyle": ""
                }
            },
            {
                "name": "envKeys",
                "scope": "string.quoted.double.env,source.env,constant.numeric.env",
                "settings": {
                    "foreground": "#19354900"
                }
            }
        ]
    }
}

Keybindings

[
  {
    "key": "cmd+1",
    "command": "workbench.action.openEditorAtIndex1"
  },
  {
    "key": "ctrl+1",
    "command": "-workbench.action.openEditorAtIndex1"
  },
  {
    "key": "cmd+2",
    "command": "workbench.action.openEditorAtIndex2"
  },
  {
    "key": "ctrl+2",
    "command": "-workbench.action.openEditorAtIndex2"
  },
  {
    "key": "cmd+3",
    "command": "workbench.action.openEditorAtIndex3"
  },
  {
    "key": "ctrl+3",
    "command": "-workbench.action.openEditorAtIndex3"
  },
  {
    "key": "cmd+4",
    "command": "workbench.action.openEditorAtIndex4"
  },
  {
    "key": "ctrl+4",
    "command": "-workbench.action.openEditorAtIndex4"
  },
  {
    "key": "cmd+5",
    "command": "workbench.action.openEditorAtIndex5"
  },
  {
    "key": "ctrl+5",
    "command": "-workbench.action.openEditorAtIndex5"
  },
  {
    "key": "cmd+6",
    "command": "workbench.action.openEditorAtIndex6"
  },
  {
    "key": "ctrl+6",
    "command": "-workbench.action.openEditorAtIndex6"
  },
  {
    "key": "cmd+7",
    "command": "workbench.action.openEditorAtIndex7"
  },
  {
    "key": "ctrl+7",
    "command": "-workbench.action.openEditorAtIndex7"
  },
  {
    "key": "cmd+8",
    "command": "workbench.action.openEditorAtIndex8"
  },
  {
    "key": "ctrl+8",
    "command": "-workbench.action.openEditorAtIndex8"
  },
  {
    "key": "cmd+9",
    "command": "workbench.action.openEditorAtIndex9"
  },
  {
    "key": "ctrl+9",
    "command": "-workbench.action.openEditorAtIndex9"
  },
  {
    "key": "ctrl+1",
    "command": "workbench.action.focusFirstEditorGroup"
  },
  {
    "key": "cmd+1",
    "command": "-workbench.action.focusFirstEditorGroup"
  },
  {
    "key": "ctrl+3",
    "command": "workbench.action.focusThirdEditorGroup"
  },
  {
    "key": "cmd+3",
    "command": "-workbench.action.focusThirdEditorGroup"
  },
  {
    "key": "ctrl+6",
    "command": "workbench.action.focusSixthEditorGroup"
  },
  {
    "key": "cmd+6",
    "command": "-workbench.action.focusSixthEditorGroup"
  },
  {
    "key": "ctrl+7",
    "command": "workbench.action.focusSeventhEditorGroup"
  },
  {
    "key": "cmd+7",
    "command": "-workbench.action.focusSeventhEditorGroup"
  },
  {
    "key": "ctrl+2",
    "command": "workbench.action.focusSecondEditorGroup"
  },
  {
    "key": "cmd+2",
    "command": "-workbench.action.focusSecondEditorGroup"
  },
  {
    "key": "ctrl+4",
    "command": "workbench.action.focusFourthEditorGroup"
  },
  {
    "key": "cmd+4",
    "command": "-workbench.action.focusFourthEditorGroup"
  },
  {
    "key": "ctrl+5",
    "command": "workbench.action.focusFifthEditorGroup"
  },
  {
    "key": "cmd+5",
    "command": "-workbench.action.focusFifthEditorGroup"
  },
  {
    "key": "ctrl+8",
    "command": "workbench.action.focusEighthEditorGroup"
  },
  {
    "key": "cmd+8",
    "command": "-workbench.action.focusEighthEditorGroup"
  }
]