項目中實際問題：自動保存格式化程度不夠，以及git提交時未進行eslint代碼檢測

解決方案：prettier + eslint fix + git hook precommit

step1：利用prettier(facebook)自動保存優(yōu)雅格式化代碼

npm install prettier --D
在 package.json 中添加如下配置，文件路徑可自定義修改：

{
  "scripts": {
    "format": "prettier --single-quote --trailing-comma es5 --write  \'public/recode/**/*.js\'"
      }
}

*：npm run format 可利用prettier自定義格式化指定文件,也可忽略該工具

注：eslint集成,針對atom 可裝 prettier-atom，該插件可以省略step2在.eslintrc.*中的優(yōu)化配置( linter-eslint 插件只做檢測,不勾選保存)

勾選插件配置.png

cli解釋：

1. --write:表示格式化后直接修改文件
2. --trailing-comma es5: 行尾逗號規(guī)則, es5表示當對象,數(shù)組的最后一項在換行的時候加逗號,類似 eslint 的 comma-dangle 規(guī)則.
3. --single-quote:強制使用單引號表示字符串. (2,3都可寫在配置文件中)

更多內(nèi)容官網(wǎng):(https://prettier.io/docs/en/install.html)

step2：prettier 結(jié)合.eslintrc.*優(yōu)化配置

eslint重要配置參數(shù)介紹：

1. env：{ node: true, es6 : true} //啟用環(huán)境配置
2. parser: bable-eslint //解析器
3. parserOptions// 解析器詳細配置
4. extends:["airbnb-base", "react", "plugin:prettier/recommended"]
   // 配置文件繼承它前面的配置
5. plugins：["import", "react", "prettier"] // 插件
6. rules // 自定義配置規(guī)則 off 或 0 ：關(guān)閉規(guī)則 ; warn或1 ：警告; erro或2 ：錯誤;更多react的eslint規(guī)則配置

prettier組合eslint配置：

npm install eslint-plugin-prettier eslint-config-prettier --save-dev
rules添加的配置：(comma-dangle: 末尾是否追加 ','的具體配置)

rules: {    
"prettier/prettier": [
     "error",
     {
       //  singleQuote: true, 
       jsxBracketSameLine: true,
       trailingComma: "es5"
     }
   ],
 "comma-dangle": [
     "error",
     {
       arrays: "ignore",
       objects: "always-multiline",
       imports: "ignore",
       exports: "ignore",
       functions: "ignore"
     }
   ],
}

eslint --fix 命令自動修復部分格式（pretter 可理解為其加強版）

step3：設置腳本命令啟動 git 鉤子（Pre-commit Hook）

Git 鉤子(hooks)是在Git 倉庫中特定事件(certain points)觸發(fā)后被調(diào)用的腳本。 詳情可瀏覽 https://git-scm.com/book/zh/v2/自定義-Git-Git-鉤子
每次提交代碼，執(zhí)行 git commit之后進行自動格式化，免去每次人為手動格式化，使遠程倉庫代碼保持風格統(tǒng)一。

使用 husky 結(jié)合 lint-staged 保證代碼提交質(zhì)量

husky:把 git 鉤子的功能加到了 package的 script 里面了.使我們有能力直接調(diào)用其他命令而不用把鉤子腳本寫在項目的 .git/hook 里面, 方便團隊間 git 鉤子命令的共享.
lint-staged:這個庫檢查所有被 git add 加入的文件,對這些文件執(zhí)行你需要的某些命令,在這里,我們可以執(zhí)行 eslint 和格式化相關(guān)的操作.(類似一個待提交區(qū))
npm install lint-staged husky --save-dev
在package.json添加如下：

{
  "scripts": {
    "precommit": "lint-staged"
  },
  "lint-staged": {
   "public/recode/**/*.{js,less}": [
      "npm run format",
      "eslint --fix",
      "git add"
    ]
  }
}

//lint-staged可配置更多

{
  "*.scss": [
    "postcss --config path/to/your/config --replace",
    "stylelint",
    "git add"
  ]
}, 
{"image",......}

查看具體配置

代碼質(zhì)量常見錯誤(部分需手動修改)

1. no-undef:不能使用未定義的變量
2. radix:使用 parseInt 強制指定進制
3. no-unused-vars: 去掉定義/或者 import 了但是未使用的變量
4. no-use-before-define: 定義之前使用(請先定義后使用)
5. eqeqeq：強制 === , !==
6. react/sort-comp： jsx 編寫順序問題 （順序為：proptype , constructor， 生命周期，自定義方法）
7. max-depth: 執(zhí)行一個塊可以嵌套的最大深度, 默認為4層
8. no-param-reassign： 不允許再賦值函數(shù)的參數(shù)；
9. no-mixed-operators：邏輯運算符用（）確定優(yōu)先順序 // bad: a && b || c || d; good: (a && b) || c || d;(a*b)+c
10. no-await-in-loop: 不允許 await 的內(nèi)部循環(huán);
    // bad: for(...){await .....}; good: const results = []; for(....){ results.push(things)} await Promise.all(results)

代碼格式常見錯誤(自動保存修改)：

1. comma-dangle: ['error', 'always-multiline’] // 尾部加逗號規(guī)則
2. consistent-this: 0 // this不期望的別名為 vm
3. prefer-reflect: 0 // apply call delete …等方法的使用
4. no-var: 0 //允許多個變量連續(xù)聲明
5. import/no-dynamic-require: 0 // require()期望字符串
6. import/prefer-default-export: 0 // export期望有 default
7. indent: 空格問題
8. prefer-template: es6模板字符串語法
9. arrow-body-style：[2, 'as-need'] 箭頭函數(shù)（）=> 0; () => ({ foo: 0}); (a,b) => {a.push(b);return a}
10. no-unneeded-ternary: 不要出現(xiàn)三元表達式返回 true|| false // bad: isYes === 1 ? true : false; good: isYes === 1 ; bad: isYes ? true : false; good: !!isYes
11. import/no-unresolved:0 // Unable to resolve path to module; eg: emailService = require('../services/email-service'); college引用admin下的services的郵件服務
12. space-before-function-paren: Missing space before function parentheses
13. array-callback-return:0
14. no-trailing-spaces: 不允許空白行

15. no-unexpected-multiline: 不允許混亂多行表達式

    
    
    檢測結(jié)果.png

遇到的問題：

1. eslint-plugin-import版本依賴問題(升級）
2. no-undef
   原因:類里面寫屬性箭頭方法為更高版本es寫法 stackoverflow解答
   解決：升級eslint 以及babel-eslint最新，并配置對應解析器
3. prettier格式配置與eslint默認有小部分沖突（重新配置沖突部分）
4. Facebook使用的代碼轉(zhuǎn)換工具：js-codemode

css3小記：太陽系運轉(zhuǎn)

css3作品集
Math.random().toString(36).substring(7)；// 隨機字符