Using Zeus with Prettier

Find Tips and tricks on how to better use the Zeus IDE. Feel free to post your own tips but please do not post bug reports, feature requests or questions here.
Post Reply
jussij
Site Admin
Posts: 2496
Joined: Fri Aug 13, 2004 5:10 pm

Using Zeus with Prettier

Post by jussij »

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
prettier-comp.png (34.04 KiB) Viewed 2259 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
prettier-error.png (40.63 KiB) Viewed 2259 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
Post Reply