Using Zeus with Prettier

[jussij]

What is Prettier?
Prettier is an opinionated code formatter with support for several programming languages including:

• JavaScript
• JSX
• Angular
• Vue
• Flow
• TypeScript
• CSS, Less, and SCSS
• HTML
• Ember/Handlebars
• JSON
• GraphQL
• Markdown, including GFM and MDX v1
• YAML

There are also plug-ins for many other languages including:

• go
• java
• kotlin
• php
• ruby
• rust
• sql
• and a host of other languages

Installing Prettier
To install Prettier run the following command from the command prompt:

Code: Select all

npm install --save-dev --save-exact prettier

Verify the install by running the following command:

Code: Select all

npx prettier --help

That command should produce the following output:

Code: Select all

Usage: prettier [options] [file/dir/glob ...]

By default, output is written to stdout.
Stdin is read if it is piped to Prettier and no files are given.

Output options:

  -c, --check              Check if the given files are formatted, print a human-friendly summary
                           message and paths to unformatted files (see also --list-different).
  -l, --list-different     Print the names of files that are different from Prettier's formatting (see also --check).
  -w, --write              Edit files in-place. (Beware!)

Format options:
...

Initializing Eslint
For Prettier to work it needs a project folder containing a package.json file.

The simplest way to do create this project structure is to npm using the following command:

Code: Select all

npm init

Using Prettier on File Save
Zeus can be configured to automatically run prettier each time the file is saved. To achieve this follow the
instructions found here: http://www.zeusedit.com/phpBB3/viewtopi ... =10&t=8145

Using Prettier inside Zeus
Start Zeus and use the Options, Document Types menu to edit the JScript Document Type.

In the Compiler panel enter the following details:

Code: Select all

   Command Line: npx prettier --check "$fn"
  Errors Regex: \[error\]
Warnings Regex: \[warn\]

(o) Display on errors and warnings

Those settings should look like the screen shown below:

prettier-comp.png (34.04 KiB) Viewed 28795 times

NOTE: To use Prettier for TypeScript files just repeat the steps for the TypeScript Document Type.

In the project folder initialized earlier, create a test.js file shown below:
foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());[/code]

Now with test.js as the active file use the Compiler, Compile menu to run the linter.

That should result in the output shown below:

prettier-error.png (40.63 KiB) Viewed 28795 times

Using Prettier with the Write Option
If you change the command line described earlier to be the following:

Code: Select all

npx prettier --write "$fn"

Now when the Compiler, Compile menu is use the broken code will be automatically fixed and reloaded into the editor, replaced with the code shown below:

Code: Select all

foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne()
);

More command line options can be found here: https://prettier.io/docs/en/cli.html

Cheers Jussi