husky+lint-staged+eslint+vue 代碼規範 .eslintrc.js 配置 .prettierrc 配置 package.json裏配置 代碼格式化 要做的事情

一般我們會在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"
  }