View on GitHub

mo360-ftk

MO360 Frontend Toolkit: A toolkit for single page applications (SPA) based on React and Typescript that allows to extract single features into microfrontends.

How to fix linting errors and warnings

The boilerplate comes with a preconfigured set of linters.

npm run lint:fix

The above command is a chained command of ESLint and Stylelint.
Refer to the corresponding section:


ESLint

Website: https://eslint.org/
Documentation: ESLint configuration user-guide
Configuration file: .eslintrc.js

Fix ESLint error or warning

There are a couple of resources for the different linting rules that the boilerplate has integrated:

If you don’t find a solution to your error/warning in one of the above resources, Google and StackOverflow are your friends.

Ignore ESLint error or warning

You can add a comment in your sourcecode to indicate that you want the linter to ignore linting errors or warnings in the following line of code.

Lets say you have an error message like this:

120:5   error    'countItems' is never reassigned. Use 'const' instead       prefer-const

By changing the code to the following, the error will be ignored:

120:     // eslint-disable-next-line
121:     let countItems: number = 7;

Change ESLint rule severity

You can reduce the severity of a particular linting rule from error to warning or even turn off the rule.

Lets say you find plenty of the following error messages:

549:67  error    'value' is missing in props validation                     react/prop-types
549:74  error    'onChange' is missing in props validation                  react/prop-types
568:9   error    'key' is missing in props validation                       react/prop-types

Notice that the last text chunk on each line of the linter output identifies the name of the corresponding linting rule. In this case react/prop-types.
To reduce the severity of this particular rule open the ESLint configuration file .eslintrc.js and within the rules section add the following:

'react/prop-types': 'warn',

Running the npm run lint:fix command again will give you

549:67  warning  'value' is missing in props validation                     react/prop-types
549:74  warning  'onChange' is missing in props validation                  react/prop-types
568:9   warning  'key' is missing in props validation                       react/prop-types

You can also disable a linting rule completely by setting it to 'off'.


Stylelint

Website: https://stylelint.io/
Documentation: Stylelint configuration user-guide
Configuration file: .stylelintrc

Fix Stylelint error or warning

Please refer to the stylelint rules to see how to fix them:

If you don’t find a solution to your error/warning in one of the above resources, Google and StackOverflow are your friends.

Ignore Stylelint error or warning

You can wrap your sourcecode with comments to indicate you want the linter to ignore linting errors or warnings within the wraps lines of code.

Lets say you have an error message like this:

 20:1  ✖  Expected selector ".item" to come before selector ".item:first-of-type"       no-descending-specificity

By changing the code to the following, the error will be ignored:

20:     /* stylelint-disable */
21:     .item:first-of-type { ... }
22:     .item { ... }
23:     /* stylelint-enable */

Change Stylelint rule severity

You can reduce the severity of a particular linting rule from error to warning or even turn off the rule.

Do so by modifying the corresponding rule inside .stylelintrc.

Please refer to the rules severity section on the official stylelint docs on how change it according to your desire.