generator-react-zeal
generator-react-zeal copied to clipboard
Improve lint configuration strategy
Our current strategy for dealing with lint configuration is not ideal and needs to be improved.
Background
There are (at least) three places we need to be able to run eslint:
- From the command-line via
yarn lint - Within a text editor such as Atom
- Via the eslint webpack loader (shows up when running
yarn startand in the browser console)
The original react-scripts only supports the last mechanism (running via eslint-loader); we've added the first two with customizations in our @zeal/react-scripts fork.
Current Strategy
@zeal/react-scriptscontains all of the lint-related dependencies@zeal/react-scriptsprovides alintscript to run the linter using its own dependencies@zeal/react-scriptscontains no lint configuration of its own; it relies on eslint's ability to search up a file tree to find a configuration file. The host project generally defines this configuration.
Requirements
- We want to be able to resolve imports relative to our app's
clientdirectory. - Client applications should be able to define local rule configuration overrides.
- Client applications should be able to install more eslint plugins and use them in their configurations.
- The client application and
@zeal/react-scriptsshould not have to duplicate installed packages or configuration files.
Issues
- (Fixed in #61) ~~In Atom, the resolution of imports relative to the
clientdirectory is not working correctly (#59).~~ - Client applications cannot currently add new eslint plugins; eslint is not able to find the rule definitions in the plugins.
- It is somewhat confusing to define an eslint configuration in a project that references rules, plugins, and shared configurations that are not direct dependencies of the project.
Ideas
-
Consider switching to babel-plugin-module-resolver and its associated eslint resolver to resolve imports relative to
clientinstead of using webpack to do this. -
Consider moving all of the lint dependencies to the client project, removing them from
@zeal/react-scripts. This may not work with the eslint-loader.