The @umijs/ Fabric component library is used to configure ESLint. The @umijs/ Fabric component library is used to configure ESLint. After consulting the relevant information and analysis of the source code, the pit will be recorded as follows:

PS: The process of creating a project using UmiJS is no longer cumbersome here. If you are interested, refer to UmiJS and Ant Design Pro.

The.eslintrc.js file in the IDE(which I use for Webstorm) indicates that ESLint is configured incorrectly:

At first, I had no idea what was wrong with the extends configuration file (@umijs/ Fabric /dist/ esLint). I went to the extends configuration file to find the source code, but I found a solution online:

Add an “include” configuration item to your project’s tsconfig.json file. (You can adjust the actual configuration based on your project directory structure.) OK, problem solved.

2. The prettier project does not work

The.prettierrc.js configuration file generated by the new project

Just a few lines of simple code, look at my face meng… I then went to node_modules to find out what fabric.prettier was, and found something like this:

"use strict";
/ * *@format * /
module.exports = {
    singleQuote: true.trailingComma: 'all'.printWidth: 100.proseWrap: 'never'.endOfLine: 'lf'.overrides: [{files: '.prettierrc'.options: {
                parser: 'json',}}, {files: 'document.ejs'.options: {
                parser: 'html',},},],};Copy the code

Prettier :true “singleQuote:true” when I used “singleQuote” in my project, I didn’t get an error from “singleQuote” when I used “singleQuote” when I used “singleQuote” when I used “singleQuote” in my project Then I remembered the project where Prettier works with ESLint, where Prettier gets an error from ESLint, but where the plugin eslint-plugin-Prettier is needed. Then I went back to the.eslintrc.js configuration file and found that the plugin was not used, and I looked in the package.json file and found that there was no dependency on the library either. @umijs/ Fabric is automatically inherited. Then I went back and looked at the source code for the ESLint configuration and still couldn’t find the eslint-plugin-prettier plug-in!

Why doesn’t @umijs/ Fabric, which is a collection of configuration files that include prettier, esLint, stylelint, already have one?

Since you don’t have one, I’ll add it manually, in case it works. So:

· Add dependency for eslint-plugin-prettier:

    yarn add eslint-plugin-prettier --dev
Copy the code

Then modify the.eslintrc.js file as follows:

Sure enough, the IDE has an error after this configuration, ha ha.

All that is left is to configure rules based on how you and your team use them.

Git hooks don’t work.

In the project’s package.json I see the following code:

Git hooks are set to check if there is any code that does not comply with the ESLint specification before committing. Git hooks are used to check if there is any code that does not comply with the ESLint specification before committing.

git add . 
git commit -m "..."
Copy the code

Amazing scene happened, actually can submit normally!!

From configuration we found that **/*.{js, JSX, TS, TSX} performed NPM Run Lint-staged :js

Lint-passage :js Definitions First, let’s look at the definition of Lint-passage :js:

Then I run the command on the console and find nothing output! After some hesitation, I realized that the following lint:js command contains much like lint-staged:js, with a configuration for formatted output and file paths added, so I tried running it:

    npm run lint:js
Copy the code

Don’t say, this command is very good, the console successfully typed the error:

So I changed the configuration from package.json to lint-staged as follows:

Then resubmit the code, and the console output looks like this:

As you can see, the submission of the code was successfully blocked!!

Let’s stop here and fill in the details of this article next time.