Skip to content

Migrating to ESLint

Ron B. Yeh edited this page Aug 23, 2021 · 23 revisions

Archived

This page is an archive of the work completed in July 2016 to use eslint to enforce code quality / style. As of 2021, VexFlow still uses eslint. See: .eslintrc


Currently VexFlow is in the process of migrating to eslint. Using a much stricter config than the previous jshint config provided.

Using eslint

You have two options:

Running grunt eslint will run eslint on all the ESLINT_SOURCES expected to pass in the Gruntfile. You could just add a failing file to that array.

Or you can run eslint independently of grunt:

cd <vexflow root>
npm install
eslint <path>

Basic Steps

UPDATE: On master, the first two steps have been run on each file. Only manual edits remain

  1. Run code through Lebab with lebab <filepath> -o <filepath>
  • Lebab is an ES5 to ES6 converter.
  • You can install it with npm.
  • It seems to work quite well, but be sure to review the result because some transforms are unsafe.
  1. Run eslint --fix
  • This will fix some pretty trivial things, but definitely saves time.
  1. Manual edits
  • Despite the automated bits, many errors will remain.
  • Sometimes minor refactoring will be required
  1. When finished add the file name to the ESLINT_SOURCES array in the Gruntfile

Config

Config located here: https://github.com/0xfe/vexflow/blob/master/.eslintrc.json

Acquaint yourself with the eslint rules and feel free to make suggestions. Note that we're extending the eslint-config-airbnb-base

Complete

  • accidental.js
  • annotation.js
  • articulation.js
  • barnote.js
  • beam.js
  • bend.js
  • boundingbox.js
  • boundingboxcomputation.js
  • canvascontext.js
  • clef.js
  • clefnote.js
  • crescendo.js
  • curve.js
  • dot.js
  • formatter.js
  • fraction.js
  • frethandfinger.js
  • ghostnote.js
  • glyph.js
  • gracenote.js
  • gracenotegroup.js
  • index.js
  • keymanager.js
  • keysignature.js
  • modifier.js
  • modifiercontext.js
  • music.js
  • note.js
  • notehead.js
  • ornament.js
  • pedalmarking.js
  • raphaelcontext.js
  • renderer.js
  • stave.js
  • stavebarline.js
  • staveconnector.js
  • stavehairpin.js
  • staveline.js
  • stavemodifier.js
  • stavenote.js
  • staverepetition.js
  • stavesection.js
  • stavetempo.js
  • stavetext.js
  • stavetie.js
  • stavevolta.js
  • stem.js
  • stemmablenote.js
  • stringnumber.js
  • strokes.js
  • svgcontext.js
  • tables.js
  • tabnote.js
  • tabslide.js
  • tabstave.js
  • tabtie.js
  • textbracket.js
  • textdynamics.js
  • textnote.js
  • tickable.js
  • tickcontext.js
  • timesignature.js
  • timesignote.js
  • tremolo.js
  • tuning.js
  • tuplet.js
  • vex.js
  • vibrato.js
  • voice.js
  • voicegroup.js