Web Interface

devtoolz ui starts a small web server on your own machine and opens a page in the browser. The page runs the commands of this package with forms, tables, graphs and previews instead of flags: pick folders in a file browser, see every finding next to the code it points to, and approve each change to your files one by one. Nothing leaves your machine.

devtoolz ui

devtoolz ui is running at http://127.0.0.1:52144/?token=5f3c…
Press Ctrl+C to stop.

The browser opens at that address by itself. The menu on the left lists the modules; the interface is built to take more of them over time.

Starting it

Run the command anywhere. The folder it is started from is the starting folder of the file browser and the default project: the place where the checks look, and where project-wide configs and presets are kept. --cwd <path> starts it from another folder, and the project can be changed on the page itself.

By default the server picks a free port (--port <n> sets one) and listens on 127.0.0.1, so only this machine can reach it. --no-open only prints the address. Ctrl+C stops the server.

The interface is part of the package, so there is nothing else to install. The image modules moved to MediaToolz together with their commands.

Safe by design

• Only this machine. The server listens on 127.0.0.1. The address printed on start carries a one-time token: opening it sets a cookie, and every request after that must carry the cookie. A request with a foreign Host or Origin header is refused.
• Reading stays inside the project. The code viewer shows only files of the chosen project, up to 1 MB.
• Writing is always explicit. The checks only read. Code cleanup changes files only for the ones you tick, after a confirmation, and keeps a backup it can undo.

Code checks

The checks of this package, in one place. Pick a project, pick a check, press Run check.

• Overview runs every check at once and shows a card for each: clean, or how many findings, split into errors, warnings and notes. A click on a card opens the details. The slow check, Stale @ts-ignore, is left out unless you tick the box, because it type-checks the whole project.
• Code — Dead exports, Empty catch blocks, Orphan tests, Import case, Circular imports, TODO comments, Stale @ts-ignore.
• Dependencies — Unused dependencies, package.json exports.
• Documentation — README code samples, npm scripts in the docs.

Each check has its own options (for example “include public entry points” for Dead exports, the tags to look for in TODO comments, the files to read for the README checks), and every one can skip patterns you list.

A result is a list of findings grouped by file. Filter it by text or by the kind of finding, collapse a file, and click a finding to open the code: the file is shown with syntax highlighting, scrolled to the line, which is highlighted, with a hint of what to do. The arrow keys move to the previous and next finding. Copy path copies the absolute path, and Open in VS Code jumps to the line in your editor.

Circular imports as a graph

For import cycles the result can be shown as a Graph. Files are nodes and imports are arrows. A file that sits in several cycles is red, one that sits in a single cycle is yellow, and an import made only of types is dashed. The list on the right numbers the cycles: pick one to light it up and dim the rest. Scroll to zoom, drag to move, click a file to open it. List shows the same cycles as findings.

Code cleanup

Removes comments (strip-comments) or console calls (console-strip) with a review first. Scan the project lists the files that would change and how many comments or calls each one loses. Nothing is changed yet.

Open a file to see the real diff with syntax highlighting, tick the files you accept, and press Change N files. The page asks once more, with the number of items about to go. Files are not ticked by default.

• A file that changed after the scan is skipped with a note to scan again, so a stale preview can never overwrite newer work.
• Only source files inside the project are touched.
• Before the first write the originals are copied to ~/.devtoolz/cleanup-backups/, outside the project. Undo this cleanup puts them back, and Recent cleanups keeps the earlier ones. A file you edited after the cleanup is left alone by an undo.
• A console call that cannot be removed safely (part of a larger expression, or the only statement of a brace-less if) is listed separately with its place, never guessed at.

Options

--port <n>

The port to listen on. The default, 0, picks a free one.

--host <address>

The address to listen on. The default, 127.0.0.1, keeps the interface on this machine. Anything else makes it reachable from the network, over plain HTTP, protected only by the token: leave it alone unless you know why you need it.

--no-open

Print the address and do not open the browser.

--token <value>

Use this access token instead of a random one. For development.

--cwd <path>

The folder the interface starts in. The default is the current folder.

--plain

Turn off color and the banner, even in a real terminal.

--color

Force colored output even when piped.

Problems and exit codes

• A port that is taken: error: port 4000 is already in use — pick another with --port, or leave it out, exit code 1.
• A port that is not a whole number from 0 to 65535: exit code 2.
• Stopping with Ctrl+C is a normal exit, code 0.
• If the page cannot reach the server any more (it was stopped), reload the page from the address that the command printed.