Skip to content

Instantly share code, notes, and snippets.

@amirhp-com

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

Forked from the0neWhoKnocks/Switching from Atom to VS Code.md
Created December 11, 2022 10:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save amirhp-com/fd9ae8c5e5a6a4281df5428f4401c184 to your computer and use it in GitHub Desktop.
Save amirhp-com/fd9ae8c5e5a6a4281df5428f4401c184 to your computer and use it in GitHub Desktop.
Download ZIP
Switching from Atom to VS Code
Raw
Switching from Atom to VS Code.md

Switching from Atom to VS Code

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:

  1. Disable all hovers > settings.json > add "editor.hover.enabled": false,
  2. 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:

  1. 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment