Vue cli service Lint Found Some Errors Please Fix Them and Try Committing Again

Necessary for front end interview -- eslint and git hook

introduction

At the end of eslint, I gave the lawmaking of configuring eslint and git claw to Vue cli, but I approximate you still take a lot of questions in your heart, such equally why to lucifer, how to customize the configuration, and why the configuration tin't accept event. Don't worry, afterward reading this article, I guess you lot will actually know it.

Brief introduction of GIT hook

1. What is it

Similar other version command systems, GIT can trigger custom scripts when certain important actions occur. There are 2 sets of such hooks: client-side and server-side. The client hook is called past operations such as commit and merge, while the server hook is used for networking operations such as receiving pushed commit.

ii. Why

Using these hooks at will tin increase our control over the plan and realize more functions.

3. Usage

In the electric current project. Git / hooks, there are many claw. Sample files. Here we only talk nigh the pre commit hook

The pre commit hook runs before typing the commit data. It is used to cheque the snapshot to exist submitted, for example,Check for omissions, ensure examination runs, and verify code。 If the hook exits with a non-zero value, GIT discards the commit

The claw will take effect when you remove. Simple and then git commit

four. Write a git claw script

Delete the content of pre commit. Nosotros can write scripts through vanquish programming.

            //Pre commit file Echo "execute script before git commit"

Enter git commit in the panel, and we tin can see that the console prints this sentence
So far, we accept completed the simplest hook script

Eslint and git hook

one. Engineering

In the development squad, in gild to keep the hooks used by the team consistent, maintenance is relatively complex, considering. Git / hooks directory is non copied with your projection, and is not affected by version control.
The elementary solution is to shop the hook files in the bodily directory of the projection (outside. GIT), so that version control tin be carried out just like other files, and and then create a link in. Git / hooks, or merely copy them to the. Git / hooks directory after updating.

The specific method is to create a pre commit executable file in the root directory and configure NPM script
"hooks": "re-create /y .\\.git_hooks\\*.* .\\.git\\hooks\\"
Afterward NPM install week, NPM run hooks can consummate the above performance

2. Write claw script directly

Before we write is the simplest script, understand the principle of writing script
Now permit'south write a pre commit (eslint) script that can use the bodily environment
Color part of you can run into this article, although he wrote the incorrect place, the organisation default color

//pre-commit

            #!/bin/sh  #Variables that ascertain colors RED_ Colour='\x1b[31; 4m '# red  GREEN_ Color='\x1b[32; 4m '# dark-green YELLOW_ COLOR='\x1b[33; 4m 'yellow BLUE_ Color='\x1b[34; 4m '# blueish Pink='\x1b[i; 35; 4m '# Pink LIGHT_ BLUE='\x1b[1; 36; 4m '# sky blueish WHITE='\x1b[1; 37; 4m '# heaven blue RES='\x1b[0m' #I actually can't understand the following line. It must have something to do with git add commit file. If y'all are interested, you lot can study it STAGED_FILES=$(git diff --buried --proper noun-only --diff-filter=ACM | grep ".\(js\|vue\)$" | grep -v "node_modules" | grep -v "static") #No file submitted, exit if [[ "$STAGED_FILES" = "" ]]; then   exit 0 fi  Pass=truthful  echo  "\nValidating Javascript:\due north" #Hither we apply variables instead of special characters, so we don't need echo - E # Check for eslint which eslint &> /dev/cipher if [[ "$?" == 1 ]]; and then   echo  "${RED_COLOR}Please install ESlint${RES}"   get out 1 fi  #Get each file to execute eslint for FILE in $STAGED_FILES    practice   eslint "$FILE"    if [[ "$?" == 0 ]]; then     echo  "\t${GREEN_COLOR}ESLint Passed: $FILE${RES}"   else     echo  "${RED_COLOR}ESLint Failed: $FILE${RES}"     Pass=false   fi done  if ! $PASS; then   echo  "${RED_ Color} commit failed: ${res} eslint cheque failed. Delight fix the eslint mistake and try again"   exit 1 else   echo  "${YELLOW_COLOR}COMMIT SUCCEEDED${RES}" fi # $?  Is the last execution result get out $?

three. Through pre commit

The above one is used in our projection. It'southward real and can run. It's written by our dominate. It's shell programming.
But I don't think the front end finish of the dish chicken is then high-finish. How can I fix information technology
No fear, pre-commit can automatically telephone call our NPM run test earlier git commit (which can be specified).

pre-commit is a pre-commit hook installer for git. It will ensure that your npm examination (or other specified scripts) passes before you tin can commit your changes. This all conveniently configured in your parcel.json.

            "scripts": {     "test": "echo \"Error: I SHOULD Neglect LOLOLOLOLOL \" && exit ane",     "foo": "echo \"fooo\" && get out 0",     "bar": "repeat \"bar\" && exit i"   },   "pre-commit": [     "foo",     "Bar", // stop when 1 is encountered     "exam"   ]

After installation, you tin can configure it according to the to a higher place. Information technology should unremarkably execute foo – > and then return one when executing bar, study an error and finish
In fact, with this tool, nosotros no longer accept to write irksome trounce scripts
Smart you lot probably have come up with it. Yous tin can directly execute the configured lint script as described in the previous commodity

            "scripts": {     "lint": "eslint --ext .js .jsx .vue src"   },   "pre-commit": [     "Lint" // Mark i     "foo"   ]

If the eslint check does not pass and returns i, the program will stop at Marking i and foo will not be executed

4. Optimize with lint stage

In fact, the above configuration can come across the absolute requirements, but smart yous find that every fourth dimension you lint, it is the SRC folder of lint, but we simply desire the problem of lint submission. At this time, we need to ask another library, lint stage, which only helps us to process the files in Git stage (that is, the files in Git add together each time)

Linting makes more sense when run earlier committing your code. By doing so you tin can ensure no errors go into the repository and enforce code way. But running a lint procedure on a whole project is dull and linting results tin exist irrelevant. Ultimately you only want to lint files that will be committed.

This paper summarizes the standard writing methods in the document, including the following business writing methods
Notation that I have not verified whether adding Husky is useful, considering my projection is in Vue cli, so Husky is not needed

            {   "scripts": {     "lint": "eslint --fix --ext .js .jsx .vue src"     "lint-staged": "lint-staged"   },   "husky": {     "hooks": {       "pre-commit": "lint-staged"     }   },   "lint-staged": {     "*. {JS, JSX, Vue}": ["NPM run lint", "git add together"] // tag 2   } }

Let's talk about why git add together is added to mark 2. This is considering we add a parameter afterward selint -- fix will automatically repair the file. The repaired file belongs to the newly generated file. We automatically add git add together to staged

five. Configuration under Vue cli

The official certificate of Vue cli is

            {   "gitHooks": {     "pre-commit": "lint-staged"   } }

But I found that this writing method is wrong. If there is a githooks attribute, Vue will always execute the examination script and report an error.

The following writing method is being used in my project. It must be no problem. Please feel free to copy it

                          "scripts": {     "dev": "vue-cli-service serve",     "build": "vue-cli-service build ",     "test": "vue-cli-service build --mode productionTest",     "lint": "vue-cli-service lint --set up --repose",     "lint-staged": "lint-staged"   },   "pre-commit": "lint-staged",   "lint-staged": {     "*.{js,jsx,vue}": ["npm run lint","git add"]   },

I don't know why in another multi page project, all JS, Vue and JSX files in SRC are detected every time. And — fix doesn't piece of work,It can also be repaired automaticallyI don't know why, only I made a mistake? Damn, it'south hard to understand
For the time being, the following configuration will be used for multiple pages, and the file range will exist added manually later on lint
`
"scripts": {

            "dev": "vue-cli-service serve --inline --progress ", "build": "vue-cli-service build && node src/utils/copy.js", "buildTest": "vue-cli-service build --mode productionTest && node src/utils/copy.js", "buildLocalTest": "vue-cli-service build --mode productionLocalTest && node src/utils/re-create.js", "lint": "vue-cli-service lint --fix --quiet src/module/toutiaoSearch/", "lint-staged": "lint-staged"

},
"pre-commit": "lint-staged",
"lint-staged": {

            "*.{js,jsx,vue}": [   "npm run lint",   "git add" ]

},
`

summary

This newspaper introduces the relationship betwixt eslint and git hook in detail, hoping to bring help to your project.
I haven't written an article for a long time. Today, I wrote two manufactures in one breath. I hope I can sweep away the decadence of the past and cheer upwardly again. Come on!

seidmandishents74.blogspot.com

Source: https://developpaper.com/necessary-for-front-end-interview-eslint-and-git-hook/