Category: Tools

My Favorite VS Code Extensions

Posted on by Andrew Minion

In a given day, I tend to work primarily on Laravel apps, some using Livewire and some with Inertia.js and a Vue.js frontend, as well as a smattering of WordPress sites and/or custom plugins.

I’ve tried PhpStorm and didn’t care for it, so like what feels like 90% of the rest of the industry, I use VS Code as my primary editor.

Here’s a list of the extensions I use on a daily basis:

General

Sublime Text Keymap and Settings Importer: I used Sublime Text for a year or so and built up muscle memory for the keyboard shortcuts, so these make a lot more intuitive sense to me than the standard VS Code keyboard shortcuts.

Markdown Preview Mermaid Support: I like to document solution architecture using mermaid diagrams, and this is a great extension to preview these in VS code.

Path Intellisense provides autocompletion when typing relative file paths in a project.

EditorConfig for VS Code configures some editor settings for different projects based on the configuration stored in the project.

Prettier – Code formatter is useful for automatically formatting code files.

TODO Highlight v2 provides visual feedback for TODO/FIXME/etc. comments in code.

Encode Decode is extremely useful when dealing with encoded strings. I use it fairly frequently to decode base64-encoded strings.

Remote – SSH / Remote – SSH: Editing Configuration Files / Remote Explorer make it really easy to “cowboy code” on a server 😬 and are useful for occasional debugging in production.

Live Share is amazing for pair-programming: it allows you to open the same codebase your colleague is working on and work with it on your machine just as if it were a local project.

PHP

Composer shows you the actually-installed version of each package in your composer.json file, and gives you a quick link to the packagist.org page for each.

PHP DocBlocker reduces some of the boilerplate necessary when writing docblocks.

PHP Intelephense in my opinion is significantly better than the built-in PHP language support, providing autocompletion for functions, methods, variables, etc., project-wide parameter hints, and even some static analysis features.

PHPUnit Test Explorer is a very useful wrapper for phpunit; you can run a single test, a single file, or the entire test suite, and when combined with Test Explorer UI and Test Adapter Converter, shows a list of passed/failed tests in the sidebar. I use it frequently to run my entire test suite to see a quick list of which job(s) failed.

phpstan runs static analysis on files as I save them, showing my errors as I write code.

PHP Debug might just be the extension I interact with the most; it lets me set breakpoints, step through, and inspect code as it runs. I can’t imagine trying to program without it.

Laravel

DotEnv provides syntax highlighting for .env files used for Laravel configuration.

Laravel Extra Intellisense saves me a lot of time by auto-completing routes names and parameters, configuration keys, views and variables, validation rules, and more.

Laravel Blade Spacer automatically adds spaces when you add a new curly brace pair: just a minor code style convenience.

Livewire Language Support provides autocompletion and other features for Livewire projects.

Laravel goto view provides one-click access to views from controllers.

Laravel Blade Snippets provides Blade snippets and syntax highlighting.

Laravel Pint provides automatic code formatting using Pint.

Laravel Blade formatter provides formatting tools for Blade templates.

Javascript

Alpine.js IntelliSense provides intellisense and snippets for alpine.js.

Inertia.js provides support for linking to vue templates and autocompletes component names.

Other Languages

GraphQL: Syntax Highlighting provides language support for GraphQL files.

SCSS IntelliSense autocompletes mixins, functions, etc. in sass files.

YAML provides YAML language support.

SQL Beautify provides formatting support for SQL files. I don’t always love the output, but it’s better than nothing.

Vue Language Features (Volar) provides language, autocompletion, and other features for vue framework.

Markdown All in One provides keyboard shortcuts, formatting helpers, preview, and more for markdown files.

Tailwind CSS IntelliSense provides suggestions, highlights duplicates, and more for Tailwind class names.

Git

GitLens — Git supercharged provides some great features; my favorite is the code history on the active or hovered line.

GitLab Workflow is a wonderful integration with GitLab; I use the “copy active link to clipboard” feature daily to copy a permalink for specific line(s) when discussing code with my colleagues. It also provides helpful CI features including autocompletion and hints when editing .gitlab-ci.yml files, as well as showing pipeline/job status right in the VS Code status bar.

Migrating sermons from Sermon Manager for WordPress to SermonAudio

Posted on by Andrew Minion

I build a Laravel-based command-line utility to import sermons from the Sermon Manager for WordPress plugin and migrate them into SermonAudio.

If it’s useful to you, see this repository for setup and usage details: https://gitlab.com/andrewminion/sermon-manager-to-sermon-audio

Trello to Excel

Posted on by Andrew Minion

I was trying to export a Trello board to a spreadsheet and include all the cards and checklists but couldn’t find a good way to do that, so I wrote one!

Originally this project was based on Laravel Zero, a command-line Laravel framework. It accepted a JSON file exported from Trello and exports an Excel spreadsheet:

  • A board becomes an Excel file
  • Each list becomes a worksheet
  • Each card becomes a row in the worksheet
  • Checklist items become individual rows with their name, completion status, and due date

It still does that, but it’s also available now as a webapp for anybody to use simply by logging in with Trello!

Try it out here: https://trello-to-excel.andrewrminion.com/

You can find the source code here: https://gitlab.com/andrewminion/trello-to-excel

Example

Using Laravel artisan tinker and psysh with Xdebug

Posted on by Andrew Minion

I often use Xdebug for troubleshooting and interactively debugging local code as I write it.

Laravel’s artisan command is extremely useful for running code interactively during development. (It’s based on another utility named psysh.)

It can be very useful to set some debug breakpoints and then run code interactively using artisan, but occasionally when I run php artisan tinker, the PHP shell just sits there and doesn’t accept any input until I kill my xdebug listener.

Thanks to this issue, I finally have a solution.

Add this to the psysh config file (~/.config/psysh/config.php on macOS):

<?php
return [
  'usePcntl' => false,
];

VS Code and Laravel Tasks

Posted on by Andrew Minion

Several of my recent projects are Laravel apps that use Horizon to manage the queue and run jobs.

However, I frequently forgot to run php artisan horizon when opening the project, and sometimes spent a bit of time trying to figure out why a job hadn’t run before remembering. 🤦

In addition—and this is a relatively minor annoyance—even when I do remember to start Horizon, sometimes I’d like to see the metrics dashboard showing how many jobs have run in the past few minutes.

Edit: I added npm run dev to help with Tailwind JIT mode and Vite asset building.

Workspace Tasks

Enter VS Code’s Tasks feature. This can automatically start running tasks when a workspace is opened.

To get set up:

  1. If you haven’t yet, go to File > Save Workspace As… and save a workspace config file to somewhere on your hard drive
  2. Open the command palette (command-shift-P) and activate “Tasks: Manage Automatic Tasks in Folder”
  3. Activate “Allow Automatic Tasks”
  4. Open the command palette again and activate “Workspaces: Open Workspace Configuration File”
  5. Add the following to the workspace config file:

Now every time I open the workspace, assets are rebuilt as I modify them and Horizon and the scheduler start running automatically.

Visual Studio Code Workspaces and PHP Intelephense

Posted on by Andrew Minion

When developing WordPress plugins for general use, I like to open the plugin directory itself in VS Code.

This allows me to use the git integration and terminal without wading through the wp-content/plugins/{plugin name} directory structure.

However, this results in the WordPress functions appearing as “undefined function” and the inability to jump to their definition or hover to see parameters and other details.

Here’s how I fix that annoyance:

  1. Save the open project as a workspace (File > Save As Workspace…)
  2. Add a fresh WordPress installation to the workspace, making it a multi-root workspace
    • Note: this step is not strictly necessary as noted below.
  3. Go to Settings (Code > Preferences > Settings), click on the “Workspace” tab, and search for intelephense.environment.includePaths
  4. In the “Include Paths” section, add an entry for the fresh WordPress installation so Intelephense will index it

Alfred Workflows

Posted on by Andrew Minion

I’ve been using Alfred on macOS for years now and it’s a wonderful productivity enhancement (on average, I use it more than 100 times a day).

Here are some of my favorite workflows:

Alfred SSH

Alfred SSH by Dean Jackson gives you quick access to SSH connections you have defined in your config, as well as quick one-off connections.

Colors

Colors by Tyler Eich is a quick way to preview color codes and convert between formats.

Datetime Format Converter

Datetime Format Converter by Michael Waterfall is the fastest way I’ve found to convert Unix timestamps to human-readable dates, and vice versa.

Dev Doctor

Dev Doctor by Syd Lawrence provides quick-reference lookups for code documentation.

DevDocs

DevDocs by Yannick Galatol is another workflow that provides quick reference for documentation using devdocs.io.

HTTP Status

HTTP Status by Marc Görtz is my preferred reference for quickly finding an HTTP status code either by number or name.

Laravel Docs

Laravel Docs by Till Krüss is amazing…it seems to have indexed most of Laravel documentation, so searching by any key word tends to bring up the best page of the documentation.

Laravel Livewire Docs

Livewire Docs searches the Laravel Livewire documentation.

Open in VS Code

I use Visual Studio Code as my primary development tool; I created this workflow to quickly and easily open a file or directory in VS Code.

TailwindCSS Docs

TailwindCSS Docs searches the TailwindCSS documentation.

VPN Manager

VPN Manager by Dean Jackson is a great way to enable/disable VPN connections on the fly.

WordPress Developer

WordPress Developer by keesiemeijer is the fastest way to search and find functions, filters, classes, and more in the WordPress documentation.

Infusionsoft to Shopify Customer History Migration

Posted on by Andrew Minion

A helper utility to copy Infusionsoft contacts and their order history to Shopify, ignoring Infusionsoft contacts who do not have orders associated with their contact ID.

It also optionally pulls info from a WooCommerce installation.

Get the code from the GitHub repository. Continue reading “Infusionsoft to Shopify Customer History Migration”

Listing Unique Font Stacks on a Webpage

Posted on by Andrew Minion

I just put together a new tool to list all the unique font stacks on a web page, intended to help with diagnose and remove unnecessary webfonts and save page load time.

Usage

Download this file and include in your page source, or copy-and-paste it into your browser’s JS console, then run the styleInPage() function with the CSS style you want to inspect as the parameter.

Examples

// Show all unique font stacks in use on the current page
console.log(styleInPage('fontFamily'));
// Show a list of all DOM elements with their computed font stack
console.log(styleInPage('fontFamily', true));
// Highlight all DOM elements using font stack 8
var fontStacksInUse = styleInPage('fontFamily');
console.log(fontStacksInUse);
highlightInPage(8);

Unserialize.dev

Posted on by Andrew Minion

php iconA quick-and-dirty PHP script to unserialize a string in PHP.

Clone (or download and expand the zip file) into your documents root and point unserialize.dev to the folder.

Note: as of December 2017, Google Chrome requires a TLS certificate to access .dev domains. You can use the script on any local TLD or PHP-capable server without any changes.

Enter your serialized data into the textarea, hit “submit,” and boom!—your serialized data is expanded to a much more human-readable view! Now includes Kint debugger to make it even easier to explore your data. Continue reading “Unserialize.dev”