husky+lint-staged+eslint+vue 代码规范

一般我们会在package.json里看到如下的配置

   "husky": {
      "hooks": {
      "pre-commit": "lint-staged"
       }
   },
       "lint-staged": {
        "src/**/*.{js,vue}": [
             "eslint --fix",
             "git add"
            ]
           }

看了以后可能很晕，干什么用的。

• husky是一个npm包，起到git 提交前钩子的作用，就是在我们执行git commit后 开始执行这个钩子.在真正的提交代码之前，让我们有机会检查代码格式规范等。
  有一个pre-commit npm包和它类似。

• lint-staged 也是一个npm 包，他的作用是让检查的代码只是本次修改更新的代码，而不是全部的代码。

• eslint --fix就是真正进行检查的命令，git add 就是把eslint 修改后的代码添加起来，方便提交。

• 特别注意
  "src/*/.{js, 这里不能有空格 vue}" ，有空格的话，会检查不到vue文件的改动

下面是配置原生小程序支持代码规范检查

.eslintrc.js 配置

          module.exports = {
          root: true,
       env: {
       browser: true,
         es6: true,
           commonjs: true,
         node: true,
             jquery: true,
                   },
              parser: 'babel-eslint',
              parserOptions: {
            parser: 'babel-eslint',
            ecmaVersion: 6,
              sourceType: 'module',
            },
      //全局变量
        globals: {
             App: true,
           Page: true,
           Component: true,
           Behavior: true,
          wx: true,
               getApp: true,
             getCurrentPages: true,
           },
            extends: ['eslint:recommended'], //'plugin:prettier/recommended' eslint standard标准规范 和prettier规范混合写法
             plugins: ['prettier'],
     rules: {
       'linebreak-style': [0, 'error', 'unix', 'windows'],
            'no-debugger': 2, //禁止使用debugger
           'prettier/prettier': [
              'error',//显示prettier格式错误
            {
              endOfLine: 'auto', //解决windows endOfLine can be "crlf" eslint报错问题
  },
],
'dot-notation': 1, // 尽可能的使用点符号
'no-empty': 1, // 空的代码块
'no-multi-spaces': 1, // 不允许多个空格
'no-self-compare': 1, // 禁止自身比较
'no-undef': 1, // 不允许使用未申明变量
// 不允许在变量定义之前使用它们
'no-use-before-define': 2,
quotes: [1, 'single', 'avoid-escape'], // 使用单引号，除非为了避免转义
'no-new': 0, // 禁止在使用new构造一个实例后不赋值
semi: [2, 'always'], // 语句强制分号结尾, 注释掉避免和prettier冲突
'space-before-function-paren': 0,
     },
  };

.prettierrc 配置

              {
               "arrowParens": "avoid",
    "bracketSpacing": true,
      "singleQuote": true,
     "semi": true,
      "printWidth": 120
          }

package.json里配置

采用npm init产生这个配置文件,然后如下配置

                  "dependencies": {
               "babel-eslint": "^10.1.0",
                     "eslint": "^7.4.0",
                  "husky": "^4.2.5",
         "lint-staged": "^10.2.11"
                     },
               "husky": {
               "hooks": {
                     "pre-commit": "lint-staged"
                 }
            },
                "lint-staged": {
                    "src/**/*.{js,wxs}": [
                 "eslint --fix",
                 "git add"
         ]
          },
              "devDependencies": {
                   "eslint-plugin-prettier": "^3.1.4",
                "prettier": "^2.0.5"
                      }

代码格式化 要做的事情

• 1.先 npm i
• 2.安装 eslint prettier 插件
• 3.在 vscode settings.json 配置文件里配置
  "eslint.autoFixOnSave": true,
  "editor.formatOnSave": true,
  "[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
  }