generator-react-zeal icon indicating copy to clipboard operation
generator-react-zeal copied to clipboard

Improve lint configuration strategy

Open randycoulman opened this issue 8 years ago • 0 comments

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 start and 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-scripts contains all of the lint-related dependencies
  • @zeal/react-scripts provides a lint script to run the linter using its own dependencies
  • @zeal/react-scripts contains 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 client directory.
  • 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-scripts should not have to duplicate installed packages or configuration files.

Issues

  • (Fixed in #61) ~~In Atom, the resolution of imports relative to the client directory 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 client instead 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.

randycoulman avatar May 15 '17 22:05 randycoulman