Introducting eslint-config-edx, our new JavaScript linter config and style guide

[bjac...@edx.org]

Hi All,

The front-end working group at edX has recently launched several initiatives to bring modernity and consistency to how our community builds user interfaces and writes front-end code. Yesterday we released version 1.0 of eslint-config-edx to NPM, which will bring further consistency and quality to edX JavaScript.

The project has two goals:

1) Create a specific, thorough and well-documented style guide for how JavaScript at edX should be written

2) Provide tools to promote that style during development and in continuous integration.

To meet these goals, edX has adopted a style guide for JavaScript based on the Airbnb JavaScript Style Guide for ES5, with several extensions and customizations documented here. These stylistic rules have been packaged up into a configuration for the tool ESLint, which we'll be installing into all edX JavaScript repos over the coming weeks. Contributors can start practicing this style today - smaller JavaScript projects like the Pattern Library and the UI Toolkit will begin enforcing this style next week, and over time it will become the standard for all JavaScript contributions to larger repos like edx-platform.

Please let me know if you have questions or feedback - we expect the style guide to evolve as we undertake more projects to modernize JavaScript at edX and add more contributors to the front-end community.

Thanks,

P.S. If you're interested in the discussions that led to the adoption of this particular style, see this pull request and the #hack-eslint channel in the Open edX Slack team.

[bjac...@edx.org]

Hi all,

JavaScript quality checks against our new JavaScript styleguide are now live in the UI Toolkit, the UX Pattern Library, Insights, and, as of today, the edx-platform codebase*. Pull requests to these repositories that include JavaScript will now fail quality checks unless they conform to the style guide.

Nobody wants a failed build on their pull request, so below are instructions for configuring your editor to use ESLint with eslint-config-edx as you develop so you can catch style issues before you push.

PyCharm:

Use the Pycharm ESLint plugin (installed by default, activated under Settings > Languages and Frameworks > JavaScript > Code Quality Tools > ESLint). The linter should pick up the .eslintconfig.js(on)? in your repository automatically and begin working immediately.

Atom:

Use the Atom linter plugin along with the linter-eslint plugin. After installation and an Atom restart, the plugin should pick up the .eslintconfig.js(on)? in your repository automatically.

SublimeText:

Use the SublimeLinter plugin (for ST2 or ST3) along with the SublimeLinter-eslint plugin. After an installation and a Sublime restart, the plugin should pick up the .eslintconfig.js(on)? in your repository automatically.

Vim/Emacs/Other:

ESLint maintains some documentation about the plugin ecosystem for other editors on their Integrations page. I have not tested any of these. If your editor doesn't have an ESLint integration/plugin or you're unable to configure it, you can always run ESLint from the command line.

The method for doing this will vary on based on the repository:

- In the UITK, UXPL and Insights: gulp lint

- In edx-platform: paver run_quality

- In repos without a build/scripting tool: $(npm bin)/eslint .

If you're using another editor and would like to share how you configured ESLint in it, feel free to chime in.

* Note that for the next little bit, edx-platform will be running both ESLint and JSHint as part of a gradual switchover so our tools and reports stay happy. Our configurations for these two tools should be compatible, but if you encounter issues due to this, let me know.