Running Prettier on your scriptable files

Running Prettier on your scriptable files

Hey all, long time reader, first time poster.

So as a JS dev the one thing I miss from my normal “dev environment” is running prettier.

What is prettier?

Prettier is a file code formatter that means you never have to worry about how you lay out your code. See the website here: https://prettier.io

It’s particular useful when editing code on an iPad/iPhone where it’s tougher to use tabs and harder to change the layout. (Especially when tinkering on your iPhone).

For example it’ll turn:

const myVar='test'

const myFunc = ()=>{
console.log('this is a test')}

const itemFiltered = ['r', 'sss', 'rrrrrr'].sort().filter(item => item !=== 'r').map(item => console.log(item));

into this:

const myVar = 'test';

const myFunc = () => {
  console.log('this is a test');
};

const itemFiltered = ['r', 'sss', 'rrrrrr']
  .sort()
  .filter(item => item !== 'r')
  .map(item => console.log(item));

How to run it inside Scriptable

First you need to download the library that you can find here this is a special “compiled” version of prettier I created that works with scriptable.

Then you can download the script that runs prettier on you scriptable js files here.

Running this shows a dialog that will allow you to pick a file to run this against. (or click “all” to run prettier on all files).

You can dive into the second script to edit the config (there’s not many options) to change the defaults to whatever your heart desires.

You can also set this up to run from a siri shortcut but sometimes it can fail which I’m putting down to using too much memory :woman_shrugging:.

Let me know if this helps anyone, this has made programming with scriptable a lot less of a chore, my next thing will be trying to get eslint running inside scriptable!

2 Likes

Cool. Support for eslint would be awesome!

Typo: askForSctriptName -> askForScriptName

Finally had time to try this out, but unfortunately got this error:

2019-09-04 11:51:54: Error on line 30775:28180 in prettier-scriptable module: SyntaxError: Invalid regular expression: range out of order in character class

How to solve this?