Uniapp is an excellent cross-end framework, but the official build project didn’t provide ESLint, which wasn’t friendly for us to collaborate on multiple projects. There are a lot of articles on the web that install older versions of Husky and so on, and it’s hard to get through. This article uses the latest version to install, to ensure that it can be used normally. If you have any questions, please feel free to exchange them.

Create a project using vue-CLI command line

I don’t like to use HBuilder for projects and development because it doesn’t automate CI/CD and requires an additional IDE installation, so I chose vs Code for development.

#Global installation vUE - CLI
npm install -g @vue/cli

#Create the Uni-app project and select the default template
vue create -p dcloudio/uni-preset-vue my-uniapp
Copy the code

The newly created project does not have any Eslint configuration

Next, let’s start installing the configuration step by step

Editorconfig configuration file

Create the. Editorconfig file in the root directory

[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
max_line_length = 100
Copy the code

Editorconfig allows multiple developers to write code that is consistent, most editors support it, VS Code, WebStorm, etc. Vs Code requires the EditorConfig plug-in.

Husky installation

Husky allows us to configure hooks when using Git, we can do commit checks, ESLint checks, etc.

npx husky-init && npm install       # npm
npx husky-init && yarn              # Yarn 1
yarn dlx husky-init --yarn2 && yarn # Yarn 2
Copy the code

After the installation, Husky gave us an example of creating a pre-commit hook. In the.husky folder in the root directory.

.husky
	pre-commit
Copy the code

We’re going to put that in there, and we’re going to need it later.

Commitlint installation

Commitlint helps us check that the git commit information meets the team’s specifications. This is essential when many people are working together.

Install NPM dependencies

npm install @commitlint/cli @commitlint/config-conventional -D
Copy the code

Create the commitlint.config.js configuration file in the root directory

module.exports = {
  extends: ['@commitlint/config-conventional'],
};
Copy the code

Add commitlint to the Husky hook

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
Copy the code

Next we can try to commit

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

An error message is thrown

⧗   input: test
✖   subject may not be empty [subject-empty]
✖   type may not be empty [type-empty]

✖   found 2 problems, 0 warnings
Copy the code

Then we enter the correct submission format

git add .
git commit -m "chore: add commitlint"
Copy the code

Submitted successfully

[master bf3104c] chore: add commitlint 6 files changed, 1099 insertions(+), 1 deletion(-) create mode 100644 .editorconfig create mode 100755 .husky/commit-msg create mode 100755 .husky/pre-commit  create mode 100644 commitlint.config.jsCopy the code

Eslint installation

Finally, to install ESLint, I used the VUE official recommended Airbnb rule

Install dependencies first

npm i lint-staged eslint-plugin-vue eslint-plugin-import eslint babel-eslint @vue/eslint-config-airbnb -D
Copy the code

Make the following changes in package.json

1. Add the Lint command to scripts and add lint-staged configurations

{
  "scripts": {
  	...
    "lint": "eslint --fix --ext .js,.vue ./src"
  },
  ...
  "lint-staged": {
    "*.{js,vue}": [
      "npm run lint",
      "git add"
    ]
  }
}

Copy the code

/husky/pre-commit Change NPM test to NPX lint-staged./husky/pre-commit

3. Create the.eslintrc.js file

module.exports = {
  root: true.env: {
    node: true,},extends: [
    'plugin:vue/essential'.'@vue/airbnb',].parserOptions: {
    parser: 'babel-eslint',},rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off'.'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',}};Copy the code

We’re done here. So let’s test that out

git add .
git commit -m "chore: add eslint"
Copy the code

You can see a lot of ESLint errors

✔ Preparing... ⚠ Running tasks... ❯ Running tasks for *.{js,vue} * NPM run lint [FAILED] ◼ git add ↓ to deflate because of errors from tasks Reverting to original state because of errors... ✔ Cleaning up... . 46:1 error Unexpected tab character no-tabs 47:1 error Unexpected tab character no-tabs 48:1 error Unexpected tab Character no-tabs * 38 problems (38 errors, 0 warnings)Copy the code

Let’s go fix all the ESLint errors

✔ Preparing...
✔ Running tasks...
✔ Applying modifications...
✔ Cleaning up...
[master 2ef3b5a] chore: add eslint
 4 files changed, 4627 insertions(+), 2863 deletions(-)
 create mode 100644 .eslintrc.js
Copy the code

After modification, submit normally.

Welcome to communicate at any time.

Project source: github.com/cmdfas/unia…

Reference:

typicode.github.io/husky/#/

commitlint.js.org/#/

Github.com/okonet/lint…