search

artembatura / zero-scriptsjs

A modular approach to develop modern JavaScript projects with minimal configuration.
MIT License
6 stars 1 forks source link

Move all ESLint packages back to Zero Scripts plugins and import in a correct way #661

Closed artembatura closed 3 years ago

artembatura commented 3 years ago

Writing all required for @zero-scripts/plugin-webpack-eslint ESLint dependencies in package.json is too uncomfortable and non-intuitive. Solution can be: on first start offer to developer to install all missing packages. But for currently I accepted decision to place this dependencies in plugins itself (@zero-scripts/plugin-webpack-eslint and @zero-scripts/plugin-webpack-react). It will make package.json much cleaner without a lot of default ESLint dependencies.

Current situation

package.json

{
    "@zero-scripts/core": "*",
    "@zero-scripts/plugin-webpack-eslint": "*",
    "@zero-scripts/plugin-webpack-react": "*",
    "@zero-scripts/plugin-webpack-spa": "*",
    "eslint": "*",
    "eslint-config-react-app": "*",
    "eslint-plugin-flowtype": "*",
    "eslint-plugin-import": "*",
    "eslint-plugin-jsx-a11y": "*",
    "eslint-plugin-react": "*",
    "eslint-plugin-react-hooks": "*"
}

Planned to be

package.json

{
    "@zero-scripts/core": "workspace:*",
    "@zero-scripts/plugin-webpack-eslint": "workspace:*",
    "@zero-scripts/plugin-webpack-react": "workspace:*",
    "@zero-scripts/plugin-webpack-spa": "workspace:*",
    "eslint": "*"
}

First problem that we meet with adopting packages which placed in plugins itself is that we can't just access them from ESLint config.

So generated .eslintrc.json will look like that?

{
  "extends": [
    "@zero-scripts/plugin-webpack-react/node_modules/eslint-config-react-app"
  ],
  "plugins": [
    "@zero-scripts/plugin-webpack-react/node_modules/eslint-plugin-import",
    "@zero-scripts/plugin-webpack-react/node_modules/eslint-plugin-flowtype"
  ],
}

In our case this is not working because Yarn 2 at default uses virtual filesystem and doesn't have node_modules.

Other problem that we meet - with Yarn 2. Yarn 2 strictness working very well to help developer to find potential problems in dependency tree. Except helpful warnings Yarn 2 doesn't allow to access to package which is not defined in dependencies (which is good and helps to avoid unexpected behaviour and improve resolving performance)

In our case even if our node_modules/eslint will try to access transitive dependency node_modules/@zero-scripts/plugin-webpack-react/node_modules/eslint-config-react-app and Yarn's package resolving algorithm will emit error which breaks build.

As a solution we need to use eslintrc.js file (instead of json format) which allow to us write the resolving algorithm which will import all ESLint packages directly from project (not from ESLint).

The same we're implemented in https://github.com/artemirq/zero-scriptsjs/pull/660

artembatura commented 3 years ago

Closed in #669