Product Designer Setup
  • Introduction
  • Preparation
    • Preparing Your Mac
    • Installing macOS
  • Setup
    • Xcode
    • System Preferences
      • Finder
    • Homebrew
      • Cask
    • Terminal Setups
      • Warp Setup
      • Hyper Setup
      • iTerm2 Setup
        • Zsh
    • Terminal Packages
    • Git
      • Git Ignore
    • Code Editor Setups
      • Visual Studio Code
        • Extensions
        • Preferences
      • Sublime Text
        • Preferences
        • Packages
    • Tech Stack
      • Package Managers
  • Apps + Tools
    • Intro
    • Productivity Tools
    • Design Tools
    • Developer Tools
Powered by GitBook
On this page

Was this helpful?

  1. Setup
  2. Code Editor Setups
  3. Visual Studio Code

Extensions

PreviousVisual Studio CodeNextPreferences

Last updated 4 years ago

Was this helpful?

Sublime Text Keymap and Settings Importer This extension imports keybindings and settings from Sublime Text to VS Code. This cuts the learning curve if you're switching from SublimeText into VS Code. However, if VS Code is your first editor and you're

I'm very much used to the keyboard shortcuts using

One Dark Pro Atom's iconic One Dark theme for Visual Studio Code

Auto Rename Tag Auto rename paired html tags

CSS Peak Allow you to peak on CSS classes directly on the HTML markup

File Utils A more convenient way of creating, duplicating, moving, renaming and deleting files

IntelliSense for CSS class names in HTML Provides CSS class name completions for the HTML class attribute based on the definitions found in your workspace or external files referenced through the link element

Material Icon Theme Adds material icons to opened tabs and items in the Explorer window

Manually running prettier from the command palette (cmd+shift+p)

1. CMD + Shift + P -> Format Document
OR
1. Select the text you want to Prettify
2. CMD + Shift + P -> Format Selection

Or running it automatically on every save, add this to your preferences

// Set the default
"editor.formatOnSave": false,
// Enable per-language
"[javascript]": {
    "editor.formatOnSave": true
}

Sass VS Code has built-in support for SCSS syntax, this will add support for SASS syntax

Prettier - Code Formatter VS Code package to format your JavaScript / TypeScript / CSS using .

stylelint A extension to lint // with

Trailing Spaces A extension that allows you to highlight trailing spaces and delete them in a flash!

Prettier
Visual Studio Code
CSS
SCSS
Less
stylelint
VS Code