Visual Studio Code setup guide

29th of January, 2019 in guide

Visual Studio Code setup guide

  1. Tip & tricks
  2. Extensions
    1. Prettier 🔗
    2. Material icons
    3. https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare
  3. User settings
  4. Key bindings
  5. Sources

Tip & tricks

Extensions

Prettier 🔗

Material icons

https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare

User settings

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
{
    "javascript.implicitProjectConfig.checkJs": true,
    /// files
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 1000,
    /// editor
    "editor.fontSize": 18,
    "editor.fontFamily": "Fira Code",
    "editor.fontLigatures": true,
    "editor.formatOnSave": true,
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
    "editor.renderWhitespace": "all",
    "editor.emptySelectionClipboard": false,
    "editor.wordSeparators": "`~!@#%^&*()=+[{]}\\|;:'\",.<>/?",
    "editor.quickSuggestionsDelay": 0,
    "editor.formatOnPaste": true,
    /// explorer
    "explorer.confirmDelete": false,
    /// Prettier
    //"prettier.eslintIntegration": true,
    /// carbon
    // Automatically adjust the width of the window.
    "carbon.autoAdjustWidth": true,
    // RGBA color to use as the background behind the window.
    "carbon.backgroundColor": "rgba(155,155,155,1)",
    // Render a drop shadow on the window.
    "carbon.dropShadow": false,
    // The drop shadow blur radius. Min: 0, Max: 100
    "carbon.dropShadowBlurRadius": 68,
    // The drop shadow offset. Min: 0, Max: 100
    "carbon.dropShadowOffset": 20,
    // The font family to use.
    "carbon.fontFamily": "Hack",
    // The font size. Min: 10, Max: 18
    "carbon.fontSize": 16,
    // The line height to use. Min: 90, Max: 250
    "carbon.lineHeight": 135,
    // Show line numbers.
    "carbon.lineNumbers": true,
    // The amount of horizontal padding applied to the window.  Min: 0, Max: 100
    "carbon.paddingHorizontal": 0,
    // The amount of vertical padding applied to the window. Min: 0, Max: 200
    "carbon.paddingVertical": 0,
    // Show a watermark.
    "carbon.showWatermark": false,
    // Pick the theme to use.
    "carbon.theme": "solarized light",
    // Change the root url (useful for development).
    "carbon.url": "https://carbon.now.sh",
    // Use your browsers already configured Carbon settings.
    "carbon.useBrowserCache": false,
    // Show window controls.
    "carbon.windowControls": false,
    // The window theme to use. Options: none, sharp, bw 
    "carbon.windowTheme": "none",
}

Key bindings

1
2
3
4
5
6
7
8
9
10
11
12
// Place your key bindings in this file to overwrite the defaults
[
  {
    "key": "ctrl+,",
    "command": "workbench.action.terminal.toggleTerminal"
  },
  {
    "key": "ctrl+,",
    "command": "workbench.action.terminal.focus",
    "when": "!terminalFocus"
  }
]

Sources

https://dev.to/aspittel/my-visual-studio-code-setup-1emn https://medium.com/productivity-freak/the-ultimate-vscode-setup-for-js-react-6a4f7bd51a2 https://blog.bitsrc.io/top-10-vs-code-extensions-for-frontend-developers-in-2018-7992282db2ca https://blog.elmah.io/best-visual-studio-code-extensions/ https://www.shopify.com/partners/blog/best-visual-studio-code-extensions-2017 https://github.com/viatsko/awesome-vscode

Graphic logo for Visual Studio Code software from en.wikipedia.org/wiki/Visual_Studio_Code#/media/File:Visual_Studio_Code_1.18_icon.svg