6.eslint和editorconfig配置

本章節內容主要時要時參照官方文檔配置便可。

eslint配置

在根項目目錄項新建.eslintrc文件

// 這裏要安裝 eslint-config-standard包，安裝完後按照提示，安裝相關的依賴。
// 這裏主要時對項目中全部內容生效，要求比較低
{
  "extends": "standard"
}

而後在client目錄下新建一樣的文件，來規範client端的代碼

// babel-eslint ，  eslint-config-airbnb及其相關依賴包
{
  "parser": "babel-eslint",
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module"
  },
  "extends": "airbnb",
  "rules": {
    "semi": [0]
  }
}

在webpack客戶端和服務端的配置文件中，在rules下新增一個rule。

{
        enforce: 'pre',  // 在babel編譯以前進行檢查
        test: /.(js|jsx)$/,
        loader: 'eslint-loader', // 使用eslint-loader，需安裝
        exclude: [
          resolvePath('../node_modules')
        ]
      },

配置完這些後，咱們啓動咱們的服務。會發現出現不少錯誤，window環境下能夠會見到不少"LF"的錯誤，這是由於不一樣的操做系統，行末的符號時不一致的。因此咱們須要配置editorconfig文件。如今主流的ide,如webstorm,vs code都帶有edit的插件，在項目根目錄下新建.editorconfig文件，按照以下配置便可。

root = true  // 是否爲根節點，說明在子目錄下也可配置該文件

[*] // 用於全部文件
charset = utf-8  //編碼格式
indent_style = space  //縮進樣式
indent_size = 2  // 縮進大小
end_of_line = lf  // 以lf結尾
insert_final_newline = true  // 自動在文件末尾插入新行
trim_trailing_whitespace = true  // 去除行末的空格

git hook

在提交代碼以前進行lint檢查，若是不合格，不能提交代碼。之前一直用的是husky -哈士奇，後來在vue-cli中看到了yorkie,看說明應該是husky的改進版本。下面來講說二者的配置方式。

// package.json的scripts增長lint命令，檢查client目錄下的代碼
    "lint": "eslint --ext .js --ext .jsx client/"
    
    // husky:在scripts下配置
    "precommit": "npm run lint"
    
    // yorkie, 與scripts平級
      "gitHooks": {
        "pre-commit": "npm run lint"
      }

這樣，在你commit代碼前就會進行檢查，不符合要求的代碼不能提交。

本節的配置位於倉庫的2-9分支