TypeScript God

basarat

|
1,532 installs
|
4,209 downloads
| (1) | Free
Raises the level of TypeScript tooling in VSCode to God level 🔱
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

TypeScript God

Donate

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

Jest

Setting up jest with TypeScript is super easy. We automatically start the jest service if:

  • jest installed in the workspace.
  • AND ts-jest installed in the workspace.
  • AND jest.config.js present.
  • AND TS Service is active (used for smart test dependency detection).

The following features are provided by the jest service:

  • For all test files report the its results in the editor as green (success) yellow (skip) / red (fail) dots ●.
  • We report all failures to the VSCodes problem panel along with the error message.
  • Whenever you save a file in the IDE (⌘ s) we run any tests that might be impacted.

Demo 🖥

Additional utilities:

  • There is a command God: Create jest.config.js to create a jest.config.js for you.
  • Use the command God: Start jest service to restart if you feel like the test results are out of sync with reality. This can happen because of file intensive tasks (e.g. npm installs, git branch checkouts etc.). Also use this if you have just met the requirements while vscode was open (installed jest / ts-jest 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 */

Demo in Node

  • god.demoInNode / 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.

JSX auto close tags

  • Auto close JSX elements:

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

  • import for import { $0 } from '${1:module}';
  • importas for import * as $0 from '$1';
  • react for import * as React from 'react';
  • reactdom for import * as ReactDOM from 'react-dom';
  • reactdomserver for import * as ReactDOMServer from 'react-dom/server';
  • log for console.log($1);$0
  • else for else {}
  • elseif for else if (condition) {}
  • 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.
  • 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)

Explorer Sidebar

  • ⌘ 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.