/vscode-setup

A collection of opinions on how to setp VSCode

MIT LicenseMIT

VS Code setup

This is my configurations and extensions for VS Code, my new editor.

Begin

Shortcuts

basic commands that I use

  • Cmd + P to open any file
  • Cmd + Shift + P to access the command palette
  • Cmd + Shift + ´ to access the terminal
  • Cmd + K + B to open and close explorer
  • Cmd + , to open settings file

Set your User Settings

Open the user settings file, Cmd + ,. Here, you'll find all of the settings that can be modified for VS Code. Once you find one that you want to modify, click next to it and it will be copied over into your own settings file. A few good custom settings to start with are font size and font family.

{
    "editor.fontFamily": "Fira Code Medium",
    "editor.fontSize": 15,
    "editor.fontLigatures": true,
    "editor.lineHeight": 40,
    "workbench.colorTheme": "Magoon",
    "workbench.iconTheme": "vs-seti",
    "workbench.sideBar.location": "left",
    "window.menuBarVisibility": "toggle",
    "editor.minimap.enabled": false,
    "explorer.openEditors.visible": 0,
    "workbench.statusBar.visible": false,
    "vsicons.projectDetection.autoReload": true,
    "editor.renderIndentGuides": false,
    "vsicons.dontShowNewVersionMessage": true,
    "atomKeymap.promptV3Features": true
}

Extensions

The list of extensions with links to the VSCode marketplace. To install press Cmd + P and paste the install command listed next to each extension.

Workspace enhancements

  • All Autocomplete

    ext install All-Autocomplete

    Provides autocompletion in Visual Studio Code items based on all open editors.

  • Auto Close Tag

    ext install auto-close-tag

    Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does.

  • Auto Import

    ext install autoimport

    Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX.

  • Beautify

    ext install beautify

    Beautify javascript, JSON, CSS, Sass, and HTML in Visual Studio Code.

  • Settings Sync

    ext install code-settings-sync

    Previously known as Visual Studio Code Settings Sync.

  • PHP Intellisense - Crane

    ext install crane

    Crane is a productivity enhancement extension for Visual Studio Code that provides code-completion for PHP.

  • HTML Snippets

    ext install html-snippets

    This extension adds rich language support for the HTML Markup to VS Code.

  • Laravel Blade Snippets

    ext install laravel-blade

    Laravel blade snippets and syntax highlight support for Visual Studio Code.