Improving JavaScript code using ESLint, Prettier, and standardJS

Scriptable
1

Recently I have been trying to improve my JavaScript code by using these tools:

I currently do this using Sublime Text and its Sublime Linter package on my Mac (via iCloud Drive).

It would be so great if @simonbs could support this natively in Scriptable…

However, for now this kind of works, as long as I add Scriptable keywords as globals to the .eslintrc.json configuration file:

{
  "env": {
    "es6": true,
    "node": true
  },
  "extends": "standard",
  "globals": {
    "QuickLook": "readonly",
    "UITable": "readonly",
    ...
  },
  "parserOptions": {
    "ecmaVersion": 2018
  },
  "rules": {
    "space-before-function-paren": "off"
  }
}

How can I “automatically” add all Scriptable keywords to this JSON file?

2

It’s on my todo list to integrate with more tools that can improve the quality of the JavaScript written in Scriptable. It’s not on the top of my list right now but it’s certainly not at the bottom either :blush:

If you want to automatically add all keywords, you can take a look at https://docs.scriptable.app/scriptable.json which contains a Tern language definition for Scriptable’s APIs. You can probably fairy easily map it to whatever format you need.

1 Like
3

Well as it seems I got there just before you :sweat_smile:

If you are patient enough to wait one day, I can add that to my

I’ve already programmed it, I only need to commit it. Then there will be a JSON file which you can copy and paste the contents into your .eslintrc

1 Like
4

This command does part of the job:

cat Scriptable.json | jq 'keys[1:]' | sed -e 's/,//g' | sed -e 's/"$/": "readonly",/g'

as it results in:

[
  "Alert": "readonly",
  "Calendar": "readonly",
  ...
  "logWarning": "readonly",
  "module": "readonly",
]

Then I only need to change [ into { and ] into } (manually, or use sed commands for that as well).

However, I think the entire command should be possible with jq using Object Construction (so without sed).

I just can’t get it right… If anyone does, please share? Would like to learn!

5

I’ve now committed and pushed the changes to my Git repo. I’ve also included await because ESLint doesn’t accept it in the top level scope. You can find the file here:

2 Likes
6

@schl3ck Can you please explain what this repository is about?

I’m afraid the README.md does not help me and now I have FOMO…

7

This repository is the result of this discussion: Typescript type definition file for desktop IDEs?

It generates from the Tern definition file, which @simonbs referenced here, a TypeScript type definition file. This file is used by various desktop IDEs like VS Code to provide code completion and documentation help when hovering with the mouse over the keywords.

1 Like
8

I tried to use Simon’s Tern file in Sublime Text using Tern for Sublime Text.

Unfortunately I get this error:

Error: Invalid !type spec: string
    at passOne

When I remove the entire !define section from the Tern file, completion works without errors (as well as navigation), but I don’t have any documentation (only links to the website).

I don’t understand enough of Tern, but might it be related to this issue?

The answer there is You can’t have non-object types in !define., but I don’t understand that…

Anybody who can help fix this?