Switching from Atom to VS Code

Install Extensions
Keyboard Shortcuts
Command Palette Commands
Misc.

Install Extensions

All Autocomplete: Adds autocomplete based on all open files.
Ascii Tree Generator: Generate ascii directory trees for documentation.
Atom Keymap: Brings back the keybindings you're used to.
Atom One Dark Theme: The theme you know and love.
Auto Close Tag: Auto-generates a closing HTML/XML tag.
Auto Rename Tag: Auto-rename a paired HTML/XML tag.
Bookmarks: Allows for adding visual and navigable points in the code.
change-case: Toggle between different text casing of a variable.
Checkpoints: Create a snapshot of the current state of a file so you can more easily go back and forth between changes.
Code Spell Checker: Spell check all the things.
Custom CSS and JS Loader: Allows for adding custom CSS & JS to Code.
Docker: Easily view or interact with all things Docker.
DotENV: Syntax coloring for .env files.
easy-snippet: Easily add, edit, and delete snippets.
ESLint: Add linting support for JS files.
File Utils: For file/folder duplication via context menu in Explorer.
GistPad: Manipulate your GitHub gists from Code.
Git Commits: Adds a Commits and Stashes group to the Source Control panel.
Github Markdown Preview: Allows for previewing MD like it'd appear on GitHub.
GitLens: Allows for easily viewing the history of files.
- Settings:
  - Current Line Blame: disabled
  - Git Code Lens: disabled
  - Hovers: disabled
  - Repositories View: disabled
  - File History View: disabled
LintLens: Adds links to the ESLint docs, so you can see why something is erroring.
Markdown All in One: Makes writing MD easier.
- Settings:
  - List: Indentation Size: inherit
  - Math: disabled
  - Ordered List: Auto Renumber: disabled
  - Ordered List: Marker: one
  - TOC: Update On Save: disabled
- Keyboard Shortcuts:
  - Had to update all the When clauses for Ctrl+B (except for the markdown one) to exclude markdown files && editorLangId != 'markdown'.
Markdown Preview Github Styling: Ensures the MD preview looks like what it'd look like on GH.
Partial Diff: Run diffs on text or files within Code.
Peacock: Useful if you have multiple instances of Code open. It allows you to set colors for the open instances.
Remote - WSL: Seamless integration if you use WSL
Rewrap: Allows for hard wrapping based on your editor.rulers settings.
- Settings:
  - Auto Wrap: Enabled
select highlight in minimap
Settings Sync: Easily keep my Work and Home Dev env's in sync.
- Initial setup requires that you create a Personal Access Token in GitHub. If you already have a Gist with your settings you'll need that Gist id as well.
  - Go here to create a PAT.
    - Only check the gist checkbox since you want to limit the token to allow only gist creations and updates.
- In case you need to have different settings per OS use the @sync pragma.
Sort lines: Keeps data easy to visually parse.
- I remapped the default F9 sort, to F5.
Surround: Wraps selected text in things like if/else, try/catch, etc.
Text Pastry: Multiple macros to manipulate text while in multi-cursor mode.
Toggle Quotes: Toggle between quotes and backticks.
VS DocBlockr: Allows for quick JSDoc scaffolding by just entering /** + ENTER.
vscode-language-todo: Adds TODO, NOTE, etc. code highlighting. Also allows for List All TODOs in the Command Palette.
- Hack: I needed to add support for .svelte files. Had to edit ~/.vscode/extensions/fireyy.vscode-language-todo-1.2.3/package.json. There's an injectTo Array that I just added sources.svelte to.

Keyboard Shortcuts

Keys	Description	Extension
CTRL + `	Open the Terminal Panel
`F1` or `CTRL + SHIFT + P`	Open Command Palette
`CTRL + '`	Toggle between quotes and backticks	Toggle Quotes
`CTRL + U`	Toggle between different text casing of a variable	change-case

Command Palette Commands

Command	Description
`Preferences: Open Settings (JSON)`	Opens the raw JSON file for settings
`Preferences: Open Keyboard Shortcuts (JSON)`	Opens the raw JSON file for key mappings
`Developer: Reload Window`	Reloads Code
`Developer: Toggle Developer Tools`	Opens a Chrome Dev Tools window

Misc.

View the .git Directory in a Repo

Open up settings.json

Add

"files.exclude": {
   "**/.git": false,
},

There's also a bit of a quirk in Code, where the .git directory won't look like it's ignored from VC anymore (when it actually is). You can add .git to your .gitignore to have Code display it properly again.

Hide or Move Parts of the GUI

On the Activity Bar
- Open the Panel CTRL + `, drag the Search icon down to the Panel so that the global searches have more space.
Right-click on the bottom Status Bar
- Un-check Code Spell Checker
- Un-check Tweet Feedback

Managing the Hover Box

The folks over at MS have some odd ideas of what should be enabled by default and not configurable. One of those is the MDN hover that pops up on all sorts of random items. Their solution if you want it to go away - disable all hovers :grimacing:. To make this a little easier to deal with:

Disable all hovers > settings.json > add "editor.hover.enabled": false,
Re-map the keyboard shortcut to open the hover:
- Go into Keyboard Shortcuts
- Search for Show Hover
- Edit it's combination to be CTRL + H

The above works for most cases, unless you need to mouse over the hover to interact with it's content. The only thing that seems workable in that case is to increase the delay time:

Replace the previous "editor.hover.enabled": false, setting with "editor.hover.delay": 1000, instead.

Adding Language Specific Editor Rules

When in a file with a specific file type you can:

Click the file type at the bottom right of the screen, or F1 to open the command palette.
Choose Configure language specific settings...
This would insert something like the below in your settings.json file
```
"[markdown]": {
   "editor.wordWrap": "on",
}
```

Splitting the Editor

Hold Alt (on OSX) or SHIFT (on Windows) while hovering the Split Editor button, to split horizontally instead.

amirhp-com/Switching from Atom to VS Code.md