stack-pack-standard

Provides tooling to support linting and formatting of GP Stack code.

Currently linting is done using the standard package and formatting uses prettier but this should not be relied on.

stack-pack-standard should be added as a dev dependency in all Stack packages and applications. The following should be added to the application's package.json:

"scripts": {
  "lint": "sp-lint",
  "precommit": "sp-lint-staged"
}

The functionality within stack-pack-standard will then be accessible from the command line via:

yarn lint

Or to invoke autofix on the linting errors use:

yarn lint --fix

Used in this way all errors that can be fixed by the tooling are fixed and the changed files are staged.

If you only want to lint certain parts of a package you can specify files or directories on the command line. Initial versions of stack-pack-standard just passed the arguments through but standard-engine expects globs which meant that using something like: yarn lint foo/bar/ resulted in nothing happening because the directory expanded to itself (not any files within the directory). This makes sense glob-wise but isn't what you might expect when you issued the command. To make things less unexpected directories passed in on the command line are now converted into globs like: foo/bar/**/*.{js,jsx}. This should result in all JavaScript files in and under the specified directory being linted which seems more useful behaviour.

The precommit script means that every file involved in a git commit will be run through the same linting and formatting (if its file type matches). Errors will abort the commit leaving the files staged.

One point to watch out for when committing is that commits made on partial files (staging chunks using git add -p) will result in the whole file being formatted. This is a known limitation of lint-staged (the package that stack-pack-standard uses to implement the precommit hook).

As well as being invoked from the command line and via precommit hooks the Atom editor (and probably others but I've only looked at Atom) can be configured to use stack-pack-standard's linting and formatting. Assuming that you already have linting enabled (via the linter package) you then need to install the linter-js-standard-engine package (https://atom.io/packages/linter-js-standard-engine) and configure it via package.json within your application as:

"standard-engine": "@gp-technical/stack-pack-standard"

You don't need to use Atom's prettier package to format Javascript files when using stack-pack-standard in this way. However you might want to use prettier to format other file types. To do this you need to override prettier's keybinding (the default one is shown below) only for Javascript files (but for both standard Javascript and JSX files):

'atom-text-editor[data-grammar="source js jsx"]:not([mini])':
  'ctrl-alt-f': 'Standard Engine:Fix File'

In-Atom auto-fixing can now be configured to happen on file save. To do this you need to install the Atom save-commands package (https://atom.io/packages/save-commands) plus stack-pack-standard >= 3.2.5. Save-commands uses a config file (save-commands.json) to determine the commands to be run on file save. Stack-pack-standard will (should!) install a sym link to this file when installed. It's probably wise to set save-commands to only show its console output if something goes wrong. To do this use the settings within save-commands.

Once the config file is present at the package root and save-commands is installed auto-fixing of JavaScript files should happen automatically on file save. In addition other files types will be automatically prettified on save (so if you have the prettier package installed you should probably not have it self to format on save to avoid potential conflicts).