TypeScript God
Unlock god mode for TypeScript development 🔱.
Raises the level of tooling support for TypeScript in VSCode. Bringing the learnings and knowledge from previously developing atom-typescript and alm-tools into VSCode to make VSCode the bestest.
Share
Share the love 🌹
Features
All custom commands are preceeded by god and mentioned below. Use ⌘ ⬆ P to perform a vscode command search.
TypeScript
TypeScript service is automatically started if there is a root level tsconfig.json in your project. The service provides the following features:
- Automatic project wide error analysis. Even lists impact for files not open in the editor. (Demo 🖥)
- Error count and TS Service status notified in the vscode status bar so you don't need telepathy to know what TS is doing or done doing.(Demo 🖥)
- If the current editor file is included in the TS analysis we show the icon 😎, otherwise we show the icon 🤓 in the status bar. This helps debug tsconfig
include/exclude errors (invalid tsconfig setups).
If you have multiple tsconfig.json files in your project and you want to use a particular one for the IDE use god.ts-start (⬆ f6) and select a tsconfig of your choice. This is automatically saved as a setting in the workspace's .vscode folder to be shared with your team using git. It then gets automatically reused on opening the workspace folder.
god.ts-restart (f6) : Use this in case you find something going out of sync due to file intensive tasks that you might in the background while the project is open in vscode (e.g. npm-installs / git branch checkouts etc).
Editor
god.format (⌘ ⌥ L / ^ ⌥ L): if selection then format selection else format document. (Demo 🖥)god.duplicateLine (⌘ ⬆ D / ^ ⬆ D): Automatically duplicate line or lines. (Demo 🖥)god.jumpy-enter (⬆ ⏎): Jumpy. Press esc to exit (god.jumpy-exit). (Demo 🖥)⌘ ⬆ v: god.clipboardring-paste Paste from clipboard ring. All copy and cut actions in vscode editors are automatically added to a clipboard ring. (Demo 🖥)god.writeCode (⌘ ⬆ X/^ ⬆ X): Have text selected. Will replace the text and write it again one character at a time so you can explain it as it gets typed. (Demo 🖥)
DocBlockr
(Demo 🖥)
// + tab expands to /** (cursor) *//// + tab expands to /** \n * (cursor) \n *///// + tab expands to ////// \n // (cursor) \n //////
Demo in Node
god.demoInNode (cmd+option+x) / god.demoInNodeStop: Runs a live demo of a TypeScript file using Node. (Demo 🖥)
This file is run in your project so it can easily have imports to other files in your project.
The demo automatically re-runs whenever you save edits to the file allowing you to write code in an exploratory manner with the comfort of saving your work to disk.
Demo in Browser
god.demoInBrowser: Runs a live demo of a TypeScript files as an entry point to a webpack build. (Demo 🖥)
The demo automatically re-runs whenever you save edits to any file that impacts the webpack build, allowing you to be quickly setup for browser demos.
The build is framework agnostic. You can use any framework to render a UI to a #root element. For CSS prefer a zero config CSS in JS framework (e.g. (TypeStyle)[https://typestyle.github.io/]).
Analyze webpack bundle size
god.analyzeWebpackBundleSize: Does a webpack driven bundle size analysis with the current file as the entry point.
- Auto close JSX elements:
<div + > => <div></div>. (Demo 🖥)<div>< + / => <div></div>. (Demo 🖥)
Git
god.git.reset (⌘ ⌥ L / ^ ⌥ z): Git soft reset the current file. If you have any git staged changes, they are preserved 🌹.
JSON to TypeScript
- Select some JSON or Object literal content in the editor and run command
God: Convert JSON to TypeScript to generate a TypeScript type definition. (Demo 🖥)
god.focusExplorer (⌘ ; / ^ ;): Shows the file explorer. Focusing the current active editor (if any). If tree is focused, then collapses the tree and focuses back on the code.explorer.newFile (⌘ n / ^ n): When explorer is focused.
Snippets
xximport for import { $0 } from '${1:module}';xximportas for import * as $0 from '$1';xxreact for import * as React from 'react';xxreactdom for import * as ReactDOM from 'react-dom';xxreactdomserver for import * as ReactDOMServer from 'react-dom/server';xxlog for console.log($1);$0xxelse for else {}xxelseif for else if (condition) {}xxdescribe for describe test block.xxit for it test block.guid expands to a guid string e.g 'ad2ea685-5d29-4e91-a8ff-d32b4e363842'. (Demo 🖥)
Editorconfig
- We provide a command
God: Create .editorconfig that creates a nice default .editorconfig for your project.
Settings
VSCode default settings for some of the options are not ideal in our opinion. We have a command God: Fix default settings that fixes these for you:
- Editor font size: The ratio of the editor font size to the rest of the IDE is a bit off. We bump the editor font size to be at least 14.
- Terminal font size: Makes it at least 15.
- Auto save files: The IDE should auto save files in some form. If it is off we set it to
onFocusChange so editors save files on focus change.
- Snippet suggestion location: We set that to
top making it easier to use snippets like import / if / else / log etc.
- Fix editor wrapping: You don't want code off screen on the right. So we enable softwarp.
- Quick search keep files open: When you open a file using file search it closes unless you make an edit to it. We feel that you searched a file to make edits, so it should stay open, you are probably only thinking of coming back to it to make the edits.
- Tab UI: I like tabs across the top.
Defaults
There are plenty of great things vscode provides by default that I feel are worth mentioning here.
Default Cursor History
^ -: Go Back (workbench.action.goBack)^ ⬆ -: Go Forward (workbench.action.goForward)
⌘ delete: Delete file / folder when explorer is focused.
Default Snippets
if for if (condition) {}switch for switch + first case + fallthrough
Default Editor
⌘ b / ^ b: Editor goto declaration. (added keybinding to default)⬆ f12: Editor find references.⌘ .: Editor quick fix.⌘ z: Editor undo.⌘ ⬆ z: Editor redo.
Default Bottom Panels
⌘ ⬆ U: Toggle output panel.- `^ ``: Toggle terminal.
⌘ ⬆ M: Toggle problems panel.
F8: Goto next problem (only works if problem file is active).⬆ F8: Goto previous problem (only works if problem file is active).
Default Tabs
⌘ ⬆ {: Goto previous tab⌘ ⬆ }: Goto next tab⌘ W: Close tab⌘ ⬆ T: Undo close tab⌘ ⌥ T: Close other tabs⌘ ⬆ W: Close window
Default Others
⌘ ⬆ c: Open external terminal for current workspace.
FAQ
Where is the Source Code
This is currently a private endeavour that I are developing to help me and teams I work with develop applications more efficiently. Coffee sized donations to support my work are welcome and much appreciated ☕️. You can follow me on twitter for updates 🌹 and view the public changelog.
I am on windows
This only supports mac keybinding by default because that is my current daily. You can define you own keybinding for our commands to your heart's content.
I want to add a config option
I've had great success with one way that works every time with ALM tools. I intend to provide the same reliable experince here. Open to discussion on changing defaults but not adding n config options. In return you get reliability ❤️
How to can check error log
- On MAC: Open the VSCode output panel and select
Log (Window) to see any messages that might help us debug.
