npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@lform/pretty-code

v1.1.7

Published

Lform code style & lint configurations

Downloads

28

Readme

Pretty Code

Pretty Code is a githook-driven collection of linter & formatter configurations for PHP, CSS, HTML, and JavaScript. It is also designed for per-project customization, which is useful when dealing with older, unconventional, or problematic code bases.

When this package is updated, running composer update or npm update will pull in the latest configuration changes, minus anything you've overridden in your project. This allows for easy updates to the configuration without having to manually update files.

Table of Contents

  1. Requirements
  2. Installation
  3. Initialization
  4. Commands
  5. Customization per Project

Requirements

  • Environments: OSX, Linux, WSL
  • PHP 7.4+
  • Node 20+

Installation

IMPORTANT: The NPM part of the package must be installed to use the githook-driven linters and formatters. That is the case for PHP as well, regardless of whether you are using the Composer package.

This package is designed to work in Linux and OSX environments. Windows is not supported at this time.

NPM Installation

This installs the frontend part of the package as well as the githook-driven automations.

npm install --save-dev @lform/pretty-code

Composer Installation

This installs the PHP part of the package.

composer require --dev lform/pretty-code

Laravel & PHPStan

For Laravel based projects, install Larastan, which will configure PHPStan for use in Laravel projects.

Installing Larastan

  1. Install Larastan (refer to documentation) via Composer

  2. Create a phpstan.neon file in the project root or copy the one from pretty-code

  3. Edit the .lintstagedrc.json file and remove the preset configuration path from phpstan, so it uses the project root configuration by default.

  4. Add the larastan extension to the phpstan.neon file in the project root:

    includes: - vendor/larastan/larastan/extension.neon

Initialization

Once the packages are installed, the package has to be initialized via npm to do a few things:

  1. Copy a .lintstagedrc.json config to the project root, if it does not already exist
  2. Copy a preconfigured .githooks directory to the project root to trigger the git automations. If the directory already exists, the initialization script will not overwrite it.
  3. Copy a .editorconfig config to the project root, if it does not already exist
  4. Configure the project git repo core.hooksPath to use the new .githooks directory.
  5. Add new scripts in package.json to run the linters and formatters manually.

For Composer, initialization will just add the new scripts to composer.json to run the linters and formatters manually.

Afterward, these new files & changes should be committed to git once everything is confirmed working. Read below for how to initialize the package.

NPM Initialization

npx pretty-code init

Composer Initialization

vendor/bin/pretty-code init

Troubleshooting

PHPStan Pains

PHPStan is very helpful but can be a source of aggravation on projects that have an older code-base or used unconventional approaches. There are a few things that can be done to address these issues:

  1. If it's a Laravel project, install Larastan (instructions are above)
  2. Exclude files from reporting in the configuration or with inline comments. For errors that should be ignored, add them to the configuration.
  3. Lower the reporting level in the configuration
  4. Generate a baseline report, so you can focus on new code instead of trying to fix old code. Commit the baseline report to the project repo.

If all else fails, PHPStan can be disabled but this should be avoided except when necessary.

Disconnecting & Reconnecting the Automations

If you're having problems with the automated git hooks and need to disable or re-enable them:

# Disable automations, set the git hooks to the default:
git config core.hooksPath ".git/hooks"

# Re-enable automations, set the git hooks to our custom hooks directory:
git config core.hooksPath ".githooks"

OS Issues

NOTE: On OSX, you may also need to install coreutils since the initialization scripts use the realpath command. If you see errors related to this, run the following:

brew install coreutils

Uninstalling

To remove the package:

  1. Delete any custom linter or formatter configs from the project root
  2. Delete the .githooks directory
  3. Run git config core.hooksPath .git/hooks
  4. Run npm remove @lform/pretty-code
  5. Run composer remove lform/pretty-code
  6. Remove the pretty scripts from composer.json and package.json

Linters & Formatters

Linters

Formatters

  • PHP CS Fixer
    • Configured for PHP 8.3, for 7.4 support, copy the configuration into your project and customize it.
  • Prettier

Supported File Types

L = Linted, F = Formatted

  • antlers.html (F)
  • antlers.php (F)
  • blade.php (F)
  • css (LF)-
  • html, htm (LF)
  • js (LF)
  • jsx (LF)
  • json (F)
  • pcss (LF)
  • php (LF)
  • scss (LF)
  • ts (LF)
  • tsx (LF)
  • twig (F)
  • yaml, yml (LF)

Commands

Formatters

# Runs Prettier (css, scss, pcss, js, jsx, ts, tsx, json, html, htm, twig, blade.php, yml, yaml)
npm run pretty:format <path>

# Runs PHP-CS-Fixer (php)
composer pretty:format <path>

Linters

# Runs StyleLint (css, scss, pcss)
npm run pretty:lint:css <path>

# Runs ESLint (js, jsx, ts, tsx, json)
npm run pretty:lint:js <path>

# Runs linthtml (html, htm)
npm run pretty:lint:html <path>

# Runs PHPStan (php)
composer pretty:lint <path>

Customization Per Project

To customize the linters and formatters per project:

  1. Copy the specific configuration files that need to be modified from the Pretty Code package root to the project root. Only copy the configurations that you need, these custom configs will no longer get updated via the package management system.
  2. Modify the copied configuration files as needed.
  3. Open the .lintstagedrc.json file and remove the explicit config-file paths or ignore-file paths from the respective linters or formatters being adjusted.
  4. Do the same thing for the package.json and composer.json scripts as applicable.
  5. The linters and formatters with project-based configs will automatically use the configuration files from the project root directory.

To undo these changes, just delete the configurations and restore the original scripts by referencing the package's package.json and composer.json files.

Configuration Files

  • .eslintrc.json
  • .eslintignore (if applicable)
  • .linthtmlrc.json
  • .prettierrc.json
  • .prettierignore
  • .stylelint.json
  • .stylelintignore
  • phpstan.neon

Todos

  1. Add github workflows
  2. Add tailwind linter
  3. Add antlers formatter + linter
  4. Add windows support (convert bin scripts to node.js)