Tag: VSCode

PHPTaqwim: Lint and format PHP using Typescript!

It is true. I created a VSCode plugin using Typescript to lint and format PHP files.

Current status of PHP Linter tools

While PHP has been around for a long time, linting and formatting PHP files are not as supported or maitained as other languages (say Javascript or python).

PHP has built in linting switch php -l, but its only for syntax errors. It does not check for code style or formatting. This functionality can be easily added using many of the VSCode extensions.

In addition to that, there two popular libraries to lint/format PHP files:

1- PHP Code Sniffer

  • Has the most installs on packagist.
  • Not regularly maintained. Commits are few and far between.
  • Has an outdated documentation (last updated in 2016).
  • Uses xml for configuration which is an outdated format for configuration.

2- PHP CS Fixer

  • Highly maintined and regularly updated.
  • It has fewer installs than PHP Code Sniffer, but the margin is not that big.
  • Has a detailed documentation but it is still hard to navigate.
  • Uses PHP for configuration which is a better format than xml but still not ideal.

Unfortunately, both libraries are not easy to configure and setup. Also, both libraries have a number of VSCode extensions, but they require the path to PHP executable to be set in the configuration, which is not as easy as it sounds, at least in my experience.

This extension

PHPTaqwim (Arabic for correction) aims to be a simple and easy to use extension to lint and format PHP files. It requires no configuration and it works out of the box. It is also configurable if you want to customize it.

PHPTaqwim warnings

Interestingly, it is written in Typescript, not PHP. This is the reason that it does not require PHP runtime to be installed on your machine. It uses PHP Parser under the hood to get PHP AST and apply the rules.

It also comes as a NPM CLI package, so you can use it in your CI/CD pipeline.

4 VSCode extensions I use when developing with Tailwind

TL;DR

All these extensions are available in this VSCode extension pack TailwindCSS Kit

1. Tailwind CSS IntelliSense

tailwind css intellisnse image

Tailwind CSS IntelliSense is a powerful tool that can help developers to write code faster and more efficiently. The tool provides real-time suggestions for Tailwind CSS classes, reducing errors and improving code quality. By using IntelliSense, developers can increase productivity, reduce the learning curve, and improve the accessibility of their applications. If you are a developer working with Tailwind CSS, be sure to take advantage of this powerful feature.

2. Tailwind Fold

tailwind fold extension image

This extension is extremely helpful when working with Tailwind. Long list of classes can clutter the html part and this extension provide a great way of hiding them away and show them only when needed. In addition to the default functionality, the options are well-thought and fit almost any preference. For example, I like the classes to be unfolded when I click on the line not the class itself, and there is an option for that.

I gave the extension 5 stars rating but there is one issue I would like to see improved. I use eslint with eslint tailwind plugin which breaks long classes into multiple lines. The extension does not seem to fold classes that spans over multiple lines.

3. Tailwind Documentation

Tailwind Documentation image

The Tailwind Documentation extension provides quick access to the official Tailwind CSS documentation. This extension enables developers to access the Tailwind CSS documentation directly from within the VSCode editor, without having to open a browser or leave the editor.

4. Tailwind Config Viewer

Tailwind Config Viewer image

Tailwind config can be confusing. They might expand exponentially and make it harder for users to know the resolved config. This is why I created this extension. It enables users to view the resolved Tailwind config and it will also show the color for any color-related classes (text-*, bg-*, accent-* … etc)

In future, I am planning to make the classes clickable so when a user clicks on a class it will be inserted in html section.