uni-app configure eslint code detection

Posted May 25, 20208 min read

0x1 issues

Updated:2020-05-25 23:09:58

The company needs to use uni-app to develop new projects. The introduction of uni-app can be moved to the official website.

The core is to write multi-end applications with Vue, but the official editor builderX of uni-app is basically blank for code verification. My own configuration of Hbuilderx is also a bit vague.

Projects created with Vue-cli are enabled to save code checking by default, but the uni-app development method is a bit different. Compilation and packaging are integrated into the tool. So we can only do code verification before submitting the code.

About why you want to do code verification, one person is okay. If there is teamwork, there are no uniform rules. You are a Tianjin dog, and I am Changsha stinky tofu. The project was written, and there was basically no maintenance at all. It is an attitude to maintain the code written by others yourself. The code he writes is like ?, which can't be understood and can only be refactored. Most people are like this, without exception. As a programmer, I want to think about why the code of those big brothers can be understood at a glance. Writing code is like writing poetry. After looking at what I wrote, I have a problem in a few days. I will look at it after greeting the whole family. I wrote it myself. . . ?

This shows that the specification is very important.

Since 0202, ECMAScript is already in 2020 version, do n t use var to define variables, use==doif Judged.

0x2 specification submission code

You can refer to Conventional Submission

A specification used to add human-readable meaning to submitted information.

Simply put, it is the specification of submitting code.

It has been recorded in detail in the personal document website, and will not be described in detail here Address

0x3 installation required dependencies

yarn add eslint babel-eslint eslint-plugin-vue husky lint-staged -D
  • eslint-the core of the verification code
  • babel-eslint-babel plugin to parse js files with babel
  • eslint-plugin-vue-vue official eslint plugin
  • husky-can make the use of git hooks easier and more convenient
  • lint-staged-You can execute linters on the git staged stage files. Simply put, when we run the eslint or stylelint command, we will only check what we added to the staging area through git add Files, which can prevent us from checking the entire project code every time we check

0x4 configuration

eslint

The configuration of eslint is copied from the project of PanJiaChen, vue-admin-template , which closes some warnings that are too abnormal. . .(Most are format issues)

${app} /. eslintrc.js

/**
* @name:.eslintrc.js
* @author:SunSeekerX
* @Date:2020-04-18 11:43:35
* @LastEditors:SunSeekerX
* @LastEditTime:2020-05-25 22:01:11
* /

module.exports = {
  root:true,
  env:{
    browser:true,
    es6:true,
    node:true,
  },
  //Configure js global variables, because it is uni-app, global uni does not need to be introduced, and there are 5+ plus objects
  globals:{
    uni:'readonly',
    plus:'readonly',
  },
  extends:['plugin:vue/essential', 'eslint:recommended'],
  parserOptions:{
    parser:'babel-eslint',
  },
  rules:{
    'no-console':[
      'warn',
      {
        allow:['warn', 'error'],
      },
   ],
    'no-eval':'error',
    'no-alert':'error',
    'vue/max-attributes-per-line':[
      0,
      {
        singleline:10,
        multiline:{
          max:1,
          allowFirstLine:false,
        },
      },
   ],
    'vue/singleline-html-element-content-newline':'off',
    'vue/multiline-html-element-content-newline':'off',
    'vue/name-property-casing':['error', 'PascalCase'],
    'vue/no-v-html':'off',
    'accessor-pairs':2,
    'arrow-spacing':[
      2,
      {
        before:true,
        after:true,
      },
   ],
    'block-spacing':[2, 'always'],
    'brace-style':[
      2,
      '1tbs',
      {
        allowSingleLine:true,
      },
   ],
    camelcase:[
      0,
      {
        properties:'always',
      },
   ],
    'comma-dangle':[2, 'only-multiline'],
    'comma-style':[2, 'last'],
    'constructor-super':2,
    curly:[2, 'multi-line'],
    'dot-location':[2, 'property'],
    'eol-last':2,
    eqeqeq:['error', 'always', {null:'ignore'}],
    'generator-star-spacing':[
      2,
      {
        before:true,
        after:true,
      },
   ],
    'handle-callback-err':[2, '^(err | error) $'],
    'jsx-quotes':[2, 'prefer-single'],
    'new-cap':[
      2,
      {
        newIsCap:true,
        capIsNew:false,
      },
   ],
    'new-parens':2,
    'no-array-constructor':2,
    'no-caller':2,
    'no-class-assign':2,
    'no-cond-assign':2,
    'no-const-assign':2,
    'no-control-regex':0,
    'no-delete-var':2,
    'no-dupe-args':2,
    'no-dupe-class-members':2,
    'no-dupe-keys':2,
    'no-duplicate-case':2,
    'no-empty-character-class':2,
    'no-empty-pattern':2,
    'no-ex-assign':2,
    'no-extend-native':2,
    'no-extra-bind':2,
    'no-extra-boolean-cast':2,
    'no-extra-parens':[2, 'functions'],
    'no-fallthrough':2,
    'no-floating-decimal':2,
    'no-func-assign':2,
    'no-implied-eval':2,
    'no-inner-declarations':[2, 'functions'],
    'no-invalid-regexp':2,
    'no-irregular-whitespace':2,
    'no-iterator':2,
    'no-label-var':2,
    'no-labels':[
      2,
      {
        allowLoop:false,
        allowSwitch:false,
      },
   ],
    'no-lone-blocks':2,
    'no-mixed-spaces-and-tabs':1,
    'no-multi-spaces':2,
    'no-multi-str':2,

    'no-native-reassign':2,
    'no-negated-in-lhs':2,
    'no-new-object':2,
    'no-new-require':2,
    'no-new-symbol':2,
    'no-new-wrappers':2,
    'no-obj-calls':2,
    'no-octal':2,
    'no-octal-escape':2,
    'no-path-concat':2,
    'no-proto':2,
    'no-redeclare':2,
    'no-regex-spaces':2,
    'no-return-assign':[2, 'except-parens'],
    'no-self-assign':2,
    'no-self-compare':2,
    'no-sequences':2,
    'no-shadow-restricted-names':2,
    'no-spaced-func':2,
    'no-sparse-arrays':2,
    'no-this-before-super':2,
    'no-throw-literal':2,
    'no-trailing-spaces':0,
    'no-undef':2,
    'no-undef-init':2,
    'no-unexpected-multiline':2,
    'no-unmodified-loop-condition':2,
    'no-unneeded-ternary':[
      2,
      {
        defaultAssignment:false,
      },
   ],
    'no-unreachable':2,
    'no-unsafe-finally':2,
    'no-unused-vars':[
      2,
      {
        vars:'all',
        args:'none',
      },
   ],
    'no-useless-call':2,
    'no-useless-computed-key':2,
    'no-useless-constructor':2,
    'no-useless-escape':0,
    'no-whitespace-before-property':2,
    'no-with':2,
    'one-var':[
      2,
      {
        initialized:'never',
      },
   ],
    'operator-linebreak':[
      2,
      'after',
      {
        overrides:{
          '?':'before',
          ':':'before',
        },
      },
   ],
    'padded-blocks':[2, 'never'],
    quotes:[
      2,
      'single',
      {
        avoidEscape:true,
        allowTemplateLiterals:true,
      },
   ],
    'semi-spacing':[
      2,
      {
        before:false,
        after:true,
      },
   ],
    'space-before-function-paren':[2, 'never'],
    'space-in-parens':[2, 'never'],
    'space-infix-ops':1,
    'space-unary-ops':[
      2,
      {
        words:true,
        nonwords:false,
      },
   ],
    'spaced-comment':[
      2,
      'always',
      {
        markers:[
          'global',
          'globals',
          'eslint',
          'eslint-disable',
          '* package',
          '!',
          ',',
       ],
      },
   ],
    'template-curly-spacing':[2, 'never'],
    'use-isnan':2,
    'valid-typeof':2,
    'wrap-iife':[2, 'any'],
    'yield-star-spacing':[2, 'both'],
    yoda:[2, 'never'],
    'prefer-const':2,
    'no-debugger':process.env.NODE_ENV === 'production'? 2:0,
    'object-curly-spacing':[
      2,
      'always',
      {
        objectsInObjects:false,
      },
   ],
    'array-bracket-spacing':[2, 'never'],
    'no-prototype-builtins':0,
    //Custom start
    'vue/html-indent':0,
    'vue/html-closing-bracket-newline':0,
    'vue/html-self-closing':0,
    indent:0,
    semi:0,
    'comma-spacing':0,
    'space-before-blocks':0,
    'keyword-spacing':0,
    'key-spacing':0,
    'no-multiple-empty-lines':0,
  },
}

package.json

Deleted unnecessary information

${app}/package.json

{
  "name":"ybt-mp",
  "version":"1.0.0",
  "scripts":{
    "gc":"git add -A && git cz && git pull && git push",
    "lint":"eslint --ext .js, .vue ./"
  },
  "license":"MIT",
  "devDependencies":{
    "@ commitlint/cli":"^ 8.3.5",
    "@ commitlint/config-conventional":"^ 8.3.4",
    "babel-eslint":"^ 10.1.0",
    "cz-conventional-changelog":"3.2.0",
    "eslint":"^ 7.1.0",
    "eslint-plugin-vue":"^ 6.2.2",
    "husky":"^ 4.2.5",
    "lint-staged":"^ 10.2.6"
  },
  "config":{
    "commitizen":{
      "path":"./node_modules/cz-conventional-changelog"
    }
  },
  "dependencies":{
    "uview-ui":"^ 1.2.8"
  },
  "commitlint":{
    "extends":[
      "@ commitlint/config-conventional"
   ]
  },
  "husky":{
    "hooks":{
      "pre-commit":"lint-staged",
      "commit-msg":"commitlint -e $GIT_PARAMS"
    }
  },
  "lint-staged":{
    "*. {js, vue}":[
      "yarn lint",
      "git add"
   ]
  }
}

0x5 use

Submit code

Local execution

yarn gc
# Actual execution, this is a command defined by the individual, because it is often necessary to push and pull the code, the core is git cz instead of git commit -m '' You can choose the type of this commit, which is very convenient
git add -A && git cz && git pull && git push

Examples

SunSeekerX @ SunSeekerX-NoteBook MINGW64/w/Coding/uni-app/ybt-mp(master)
$yarn gc
yarn run v1.22.4
$git add -A && git cz && git pull && git push
cz-cli@4.1.2, cz-conventional-changelog@3.2.0

? Select the type of change that you're committing:feat:A new feature
? What is the scope of this change(e.g. component or file name):(press enter to skip)
? Write a short, imperative tense description of the change(max 66 chars):
(16) Add code to submit eslint verification configuration
? Provide a longer description of the change:(press enter to skip)

? Are there any breaking changes? No
? Does this change affect any open issues? No
husky> pre-commit(node   v12.16.3)
  Some of your tasks use `git add` command. Please remove it from the config since all modifications made by tasks will be automatically added to the git commit index.

[STARTED]Preparing ...
[SUCCESS]Preparing ...
[STARTED]Running tasks ...
[STARTED]Running tasks for *. {Js, vue}
[STARTED]yarn lint
[SUCCESS]yarn lint
[STARTED]git add
[SUCCESS]git add
[SUCCESS]Running tasks for *. {Js, vue}
[SUCCESS]Running tasks ...
[STARTED]Applying modifications ...
[SUCCESS]Applying modifications ...
[STARTED]Cleaning up ...
[SUCCESS]Cleaning up ...
husky> commit-msg(node   v12.16.3)
[master c050a53]feat:add code to submit eslint verification configuration
 11 files changed, 1851 insertions(+), 1076 deletions(-)
 create mode 100644 .eslintignore
 rewrite components/ybt-patient-card/ybt-patient-card.vue(97%)
 rewrite pages/home/home.vue(84%)
 rewrite pages/patrol/patrol.vue(97%)
Already up to date.
Enumerating objects:44, done.
Counting objects:100%(44/44), done.
Delta compression using up to 4 threads
Compressing objects:100%(19/19), done.
Writing objects:100%(23/23), 16.87 KiB | 2.11 MiB/s, done.
Total 23(delta 11), reused 0(delta 0)
To http://gitlab.lvyii.com/yibiaotong/ybt-mp.git
   be3ffc1..c050a53 master-> master
Done in 19.97s.

A command to complete the code submission, verification, pull, push. Of course, if you encounter a conflict, you still need to manually resolve it.

Code verification

yarn lint
# Actual execution, call eslint to check files with suffixes of js and vue, no css is added for the time being, and scss check
eslint --ext .js, .vue ./

Examples

SunSeekerX @ SunSeekerX-NoteBook MINGW64/w/Coding/uni-app/ybt-mp(master)
$yarn lint
yarn run v1.22.4
$eslint --ext .js, .vue ./

W:\ Coding \ uni-app \ ybt-mp \ main.js
  31:7 error 's' is assigned a value but never used no-unused-vars

W:\ Coding \ uni-app \ ybt-mp \ pages \ home \ home.vue
    6:2 warning Mixed spaces and tabs no-mixed-spaces-and-tabs
  201:7 warning Unexpected console statement no-console

W:\ Coding \ uni-app \ ybt-mp \ pages \ patrol \ patrol-detail \ patrol-detail.vue
  124:4 warning Unexpected console statement no-console

W:\ Coding \ uni-app \ ybt-mp \ pages \ patrol \ patrol-list \ patrol-list.vue
  38:4 warning Unexpected console statement no-console

W:\ Coding \ uni-app \ ybt-mp \ utils \ app-update.js
  40:7 warning Unexpected console statement no-console
  45:9 warning Unexpected console statement no-console
  48:9 warning Unexpected console statement no-console
  60:3 warning Unexpected console statement no-console

W:\ Coding \ uni-app \ ybt-mp \ utils \ index.js
  29:4 warning Unexpected console statement no-console
  42:4 warning Unexpected console statement no-console
  56:4 warning Unexpected console statement no-console

  12 problems(1 error, 11 warnings)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

0x6 Summary

After such configuration, the quality and specifications of the code are greatly improved compared to the maintenance before the configuration, and at the same time, some errors can be avoided. But tools are tools after all, and people are the ones who write code. It is the most important thing to develop good coding habits and optimization awareness while writing code.

In my eyes, programmers can not wear fashionable clothes, but they must be clean. More or less cleanliness, a little obsessive-compulsive disorder, ?

0x7 other

Reference article:[lint-staged and husky do code inspection at pre-commit stage]( https://dsb123dsb.github.io/2018/05/26/lint-staged%E5%92%8Chusky%E5%9C%A8pre -commit%E9%98%B6%E6%AE%B5%E5%81%9A%E4%BB%A3%E7%A0%81%E6%A3%80%E6%9F%A5 /)

about me

SunSeekerX, front-end development, Nodejs development, applets, uni-app development, etc.

Like to discuss technical implementation schemes and details, perfectionists, see no bugs.

Github: https://github.com/SunSeekerX

Personal blog: https://yoouu.cn/

Personal online notes: https://sunseekerx.yoouu.cn/