A Shared ESLint Configuration

Like our markdown linters, all Mapbox documentation repositories use a shared ESLint configuration. Our configuration covers everything from enforcing React best practices to improving accessibility, including:

• eslint-config-mapbox is a shared ESLint config for Mapbox engineering teams which serves as the base for our configuration.
• eslint-plugin-react includes React specific linting rules.
• eslint-plugin-jsx-a11y checks accessibility rules on JSX elements.
• eslint-plugin-es allows us to disallow unsupported ECMAScript syntax.
• eslint-config-prettier turns off all rules that are unnecessary or might conflict with Prettier.
• eslint-plugin-docs is a private plugin that I’ve been developing to create custom ESLint rules for our documentation sites. So far the plugin makes sure that when you import mapbox-gl that you must include a special component to handle the loading of the map.

ESLint plugins will help keep your code consistent and improve the quality, but they are also excellent teaching tools. When I come across a plugin, I take joy in reading each rule to learn the benefits of enabling or disabling it.