build: ensure that imports sort automatically

[FredericEspiau]

Now imports are sorted automatically so you don't have to care about it

Example

import React from "react";
import Button from "../Button";

import styles from "./styles.css";
import type { User } from "../../types";
import { getUser } from "../../api";

import PropTypes from "prop-types";
import classnames from "classnames";
import { truncate, formatNumber } from "../../utils";

⬇️

import classnames from "classnames";
import PropTypes from "prop-types";
import React from "react";

import { getUser } from "../../api";
import type { User } from "../../types";
import { formatNumber, truncate } from "../../utils";
import Button from "../Button";
import styles from "./styles.css";

Before testing

Please yarn clean && yarn install because it might fail because of a bug in babel-eslint

Sources:

• Template string failing with Cannot read property 'range' of null babel/babel-eslint#799
• TypeError: Cannot read property 'range' of null from template-curly-spacing babel/babel-eslint#530

Performances

Before eslint-plugin-simple-import-sort

✨ Done in 236.82s.

After eslint-plugin-simple-import-sort

• First time ✨ Done in 281.92s.
• The times after, in average, ✨ Done in 240.57s.

[marie-j]

@FredericEspiau suggestion for your commit message build: add plugin to sort imports

[antleblanc]

Thanks @FredericEspiau for submitting this new ESLint plugin.

I'm currently having trouble to run ESLint against all *.js files from your branch.
Cannot reproduce it on develop.

Did you test it via a yarn run lint:js from the root of this project?

$ yarn run lint:js
yarn run v1.22.0
$ eslint --fix --quiet --format=pretty "packages" "scripts"
TypeError: Cannot read property 'range' of null
Occurred while linting /home/foo/ovh/manager/packages/components/ng-ovh-contracts/src/full/directive.js:30
    at SourceCode.getTokenBefore (/home/foo/ovh/manager/node_modules/eslint/lib/source-code/token-store/index.js:298:18)
    at checkSpacingBefore (/home/foo/ovh/manager/node_modules/eslint/lib/rules/template-curly-spacing.js:60:42)
    at TemplateElement (/home/foo/ovh/manager/node_modules/eslint/lib/rules/template-curly-spacing.js:119:17)
    at /home/foo/ovh/manager/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (/home/foo/ovh/manager/node_modules/eslint/lib/linter/safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (/home/foo/ovh/manager/node_modules/eslint/lib/linter/node-event-generator.js:254:26)
    at NodeEventGenerator.applySelectors (/home/foo/ovh/manager/node_modules/eslint/lib/linter/node-event-generator.js:283:22)
    at NodeEventGenerator.enterNode (/home/foo/ovh/manager/node_modules/eslint/lib/linter/node-event-generator.js:297:14)
    at CodePathAnalyzer.enterNode (/home/foo/ovh/manager/node_modules/eslint/lib/linter/code-path-analysis/code-path-analyzer.js:634:23)
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command

Thanks

[FredericEspiau]

@antleblanc I ran ESlint manually, no with yarn, I wonder what's happening 🤔

[FredericEspiau]

@antleblanc okay I've found the issue, it's a known problem between eslint and babel, bumping the dependencies fixes the issue, I'll make a commit for this

sources:

• Template string failing with Cannot read property 'range' of null babel/babel-eslint#799
• TypeError: Cannot read property 'range' of null from template-curly-spacing babel/babel-eslint#530

[JeremyDec]

Hello @FredericEspiau, what will be the result of the sorting ? Alphabetical, vendor before app files ?

[FredericEspiau]

@JeremyDec automatic, that's all I care about 😄

There is an example in the documentation: https://github.com/lydell/eslint-plugin-simple-import-sort#example

[ovh-cds]

CDS Report build-monorepository#9883.0 ✘
*

• Build ✘

[antleblanc]

build-monorepository pipeline fails.

Could you please take a look and make sure that we are still able to build the project?

Thanks!

[FredericEspiau]

@antleblanc I've rebased on develop and now it works, 🤷‍♂
@marie-j I've written in proper English

[ovh-cds]

CDS Report installation#9916.0 ■

• Stage 1
  • Install ■

[antleblanc]

@FredericEspiau There is a conflict.

An interesting thing regarding this plugin is probably to measure the impact regarding the following script: $ yarn run lint:js.

To make sure that it doesn't have any impacts regarding the performance.

We also need to make sure that standalone applications still works.

[cbourgois]

What's happen with unamed import like import '@ovh-ux/codename-generator';?

[cbourgois]

Thanks for the rebase, it works now (on local).

I see some trouble with AngularJS & the state of our codebase :

Example: https://github.com/ovh/manager/blob/master/packages/manager/apps/dedicated/client/app/app.module.js#L68 : this line is moved at the end of the file as follow:

import moduleName from './app';

export default moduleName;

But as we are using AngularJS, imports https://github.com/ovh/manager/blob/master/packages/manager/apps/dedicated/client/app/app.module.js#L71-L159 could use the AngularJS module defined in import moduleName from './app'; and if we move the line at the end it fails.

Maybe a comment could be used to ignore automatic sorting for this case, but how to be sure that running a yarn lint:js won't break everything ?

[FredericEspiau]

@cbourgois we can't unfortunately, we have to proceed one by one, but most dependencies should be validated automatically

[FredericEspiau]

I'm closing this as I won't be able to handle it before my leave