I am proud, and welcome to my official account, the self-knowledge of front-end engineers, search f2ef2e, update every day.

uniapp is an excellent cross end framework, but the official creation project does not provide eslint, which is not friendly for our multi person collaborative development. Many articles and tutorials on the Internet now install the old version of husky, which is difficult to get through now. This article is installed with the latest version to ensure normal use. If you have any questions, you are welcome to communicate.

Creating a project using the Vue cli command line

To be wordy here, I don't like using HBuilder to create projects and develop, because it can't realize automatic CI/CD and needs to install an additional IDE, so I choose to use vs code to develop.

# Global installation Vue cli
npm install -g @vue/cli

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

The newly created project does not have any Eslint configuration

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

. editorconfig configuration file

Create in the root directory editorconfig file

[*.{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

Editorconfig allows multiple developers to write the same code. Most editors support vs code, webstorm, etc. Vs code requires the editorconfig plug-in to be installed.

husky installation

husky allows us to configure hooks when using GIT. We can check the commit information and eslint when Git is submitted.

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

After the installation is successful, husky gives us an example of creating a pre commit hook. In the root directory Husky folder.

.husky
	pre-commit

Let's put this here first. We'll use it later.

commitlint installation

commitlint helps us check whether the information of git commit meets the specifications of the team. This is very necessary for multi person cooperation.

Install npm dependencies

npm install @commitlint/cli @commitlint/config-conventional -D

Create a commitlint. In the root directory config. JS configuration file

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

Add commitlint to husky's hook

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

Next, we can try to submit

git add .
git commit -m "test"

An error message will be thrown

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

✖   found 2 problems, 0 warnings

Then we enter the correct submission format

git add .
git commit -m "chore: add commitlint"

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.js

eslint installation

Finally, let's install eslint. I chose the airbnb rule recommended by vue

Install dependency first

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

In package The JSON file is modified as follows

1. Add the lint command and lint staged configuration in scripts

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

2. In/ Husky / pre commit changes npm test to NPX lint staged

3. Create 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',
  },
};

It's done here. Let's test it

git add .
git commit -m "chore: add eslint"

You can see that there are many eslint errors

✔ Preparing...
⚠ Running tasks...
  ❯ Running tasks for *.{js,vue}
    ✖ npm run lint [FAILED]
    ◼ git add
↓ Skipped because of errors from tasks. [SKIPPED]
✔ 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)

Let's 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

After modification, submit normally.

Welcome to communicate at any time.

Project source code: https://github.com/cmdfas/uniapp-eslint

Welcome to my official account, the self training of front-end engineers, search f2ef2e, update every day.

reference resources:

https://typicode.github.io/husky/#/

https://commitlint.js.org/#/

https://github.com/okonet/lint-staged