With front-end engineering and automation being the new trend, if we were to start a project over again, how long would you spend setting up the front-end environment? In the accumulation of our front-end, we need to precipitate these technologies so that we can start a new project without having to spend too much experience in the environment setup.

This time I made a front-end code check tool that integrates ESLint, Stylelint, and Git hook. The project is open source on Github and is called Oishi. At first it came up with the name Husky, but later the name was taken.

So what do we need to do with this tool

We need to get him to initialize esLint, the stylelint configuration file to install the dependencies we need to mount git hooks and perform esLint checks when code commits. With that goal in mind we set out to implement a tool like ours:

1. Preparation

  • This time we developed our command line using Commander,
  • Using Chalk to beautify our console output,
  • Use shellJS to execute some scripts in our files in local debugging need to configure the bin option in package.json, and then after the development of NPM link published to the local global, can start to use their own command line

2. Get down to business

  1. For the first point mentioned earlier, we need to have our own configuration and pull it down at initialization. Here we throw our configuration to github repository. Take a look at my project directory configuration file and use Node’s native FS module to read and write the configuration file.

  2. The dependencies we need are also recorded in the configuration file. After reading the file, compare it with package.json in the current directory and install the missing dependencies using shell

  3. There are two ways to mount git hooks. First, you can either write a pre-commit or install a pre-commit NPM package. Here we use the first method because shell scripts are common. We have already developed a command line locally, so remember to add permissions to chmod +x pre-commit when moving our pre-commit to git hooks

The first step is to get the code you want for ESLint,

JS_FILES=$(git diff --cached --name-only --diff-filter=ACM | grep -E "(\.js?) $") CSS_FILES=$(git diff --cached --name-only --diff-filter=ACM | grep -E "(\.p? css)$")Copy the code

Then call your own eslint command, oishi Lintjs –exitcode $JS_FILES to determine the return value. There is a small hole in your entry file, you need to declare your node path #! /usr/bin/env node 3

We register our own account on NPM and switch to the project directory,

npm login
npm publish
Copy the code

For specific technical details, please refer to the source code in my project or leave a comment on my blog