Customizing VS Code

I always love when I have the option to customize and add a little of my one flavor to something!

Changing editor theme

VS Code lets you change your background color, text color, and language syntax colorization. You can edit the theme directly in the settings, or you can use the ‘Color Theme Picker’ for an easier time. To navigate to the Color Theme Picker either hit

Ctrl+K Ctrl+T or head over to File > Preferences > Color Theme. 

vs-code-theme

To customize the theme items yourself,  you can open the command palette (remember Ctrl+Shift+Pand type themes. 

You can also download themes from the VS Code Marketplace.

Changing icon theme

This one is a small change, but it’s one of the most important for me! Head over to the ‘File Icon Theme’ and select a colorful or discrete set for your icons displayed in the explorer. You can navigate there by either File > Preferences > Color Theme or by the command palette and type file icon theme.

vscode-icons
GIF taken from https://code.visualstudio.com

Changing workspace settings

Open User Settings under File > Preferences > Settings

I’ll go through a few quick ones…

Font
"editor.fontFamily":  "Consolas, 'Courier New', monospace",
Font size

Default = 14

"editor.fontSize": 18,
Word wrap

Default = off

"editor.wordWrap": "on",
Format

Default = false

"editor.formatOnPaste": true,
Auto Save

One of my favs!  Default  = off

"files.autoSave": "afterDelay",
Exclude files
"files.exclude": {
    "**/.git":true,
    "**/.svn":true,
    "**/.hg":true,
    "**/.CVS":true,
    "**/.DS_Store":true,
    "somefolder/": true,
    "somefile": true
}
Auto closing brackets

Default = true;

"editor.autoClosingBrackets": false,
Indentations

Default = inserts spaces and uses 4 spaces per Tab key

"editor.insertSpaces": true,
    "editor.tabSize": 4,
Indent Guides

Default = true

"editor.minimap.enabled": false,
Minimap

Default = enabled

"editor.renderIndentGuides": false,

And the list goes on!

 

Language File Type Editing

For each language, whether it be TypeScript, JavaScript, Rust, etc., you may want to have different editing settings for each one. To customize these settings open the command palette and type ‘Configure language specific settings’. At which point you can select the language you want to edit and begin specifying the settings you want. It’s that simple!

vscode-languagesettings.png

Keymappings

To see all keymappings navigate to File Preferences > Keyboard Shortcuts.

vscode-keys

Editing current keymappings

To edit a current keybinding, navigate to the keyboard shortcuts scroll and type in the command you want to edit. Either right click and select ‘Change Keybinding’, select the command and hit Ctrl+K Ctrl+K or at the far left, hover right before the command and click the pencil icon.

vscode-keybinding

Adding new keymappings

Open the Command Palette and type ‘Open Keyboard Shortcuts File’

vscode-shortcuts

Find the rule that triggers the action in the Default Keyboard Shortcuts file and write a modified version of it in your keybindings.json file (one the right).

Keymapping Extensions

You can import keybindings from other popular editors in the VS Code Marketplace here.

Or navigate to File > Preferences > Keymap Extensions.

vscode-vim    vscode-sublime    vscode-atom    vscode-notepad

Dealing with conflicts

Having many extensions and customizations are great! But this also makes room for conflicts. The same keyboard shortcut can be mapped to several commands and can make for some wonky behavior. vscode-conflicts.png

Luckily, VS Code has provided us with a nifty Show Conflicts feature which filters keybindings based on the shortcut and displays the resulting conflicts, if any.

vscode-conflicts2.png

Extensions

And of course, there are tons of extensions you can find in the marketplace to extending and make the most of your VS Code experience. Find a list of 10 great extensions the community loves here.  To give you a short preview the list includes extensions like Git Lens, CSS Peek, Chrome Debugger, and more! Find others in the marketplace here.

 

Next up

We will be going over version control, terminal, and their settings for VS Code! Stay tuned.

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s