1. Eslint簡介：

ESLint是一種用于識別和報告ECMAScript/JavaScript代碼樣式的工具，其目標是使代碼更加一致并避免錯誤。在許多方面，它類似于JSLint和JSHint，但有幾個例外:

- ESLint使用Espree進行JavaScript解析。

- ESLint使用AST來評估代碼中的模式。

- ESLint是完全可擴展的，每個規則都是一個插件，可以在運行時添加更多。

2. 安裝Eslint

環境要求：Node.js (>=4.x), npm version 2+.

選擇本地安裝或全局安裝

2.1 本地安裝：

Node.js (>=4.x), npm version 2+.

新建配置文件：

$ ./node_modules/.bin/eslint --init

運行eslint：

$ ./node_modules/.bin/eslint --init

2.2 全局安裝：

$ npm install -g eslint

設置配置文件：

$ eslint --init

運行eslint：

$ eslint yourfile.js

PS. 全局安裝的eslint使用的插件也需要全局安裝

3. 配置Eslint

使用?eslint --init 配置文件后，自動生成一個?.eslintrc 文件，在其中以json格式定義代碼樣式

示例：

'rules': { /// // 可能的錯誤 //// 禁止條件表達式中出現賦值操作符 "no-cond-assign": 2, // 禁用 console "no-console": 0, // 禁止在正則表達式中使用控制字符 ：new RegExp("\x1f") "no-control-regex": 2, // 數組和對象鍵值對最后一個逗號， never參數：不能帶末尾的逗號, always參數：必須帶末尾的逗號， // always-multiline：多行模式必須帶逗號，單行模式不能帶逗號 "comma-dangle": [1, "always-multiline"], // 禁用 debugger "no-debugger": 2, // 禁止 function 定義中出現重名參數 "no-dupe-args": 2, // 禁止對象字面量中出現重復的 key "no-dupe-keys": 2, // 禁止重復的 case 標簽 "no-duplicate-case": 2, // 禁止空語句塊 "no-empty": 2, // 禁止在正則表達式中使用空字符集 (/^abc[]/) "no-empty-character-class": 2, // 禁止對 catch 子句的參數重新賦值 "no-ex-assign": 2, // 禁止不必要的布爾轉換 "no-extra-boolean-cast": 2, // 禁止不必要的括號 //(a * b) + c;//報錯 "no-extra-parens": 0, // 禁止不必要的分號 "no-extra-semi": 2, // 禁止對 function 聲明重新賦值 "no-func-assign": 2, // 禁止在嵌套的塊中出現 function 或 var 聲明 "no-inner-declarations": [2, "functions"], // 禁止 RegExp 構造函數中無效的正則表達式字符串 "no-invalid-regexp": 2, // 禁止在字符串和注釋之外不規則的空白 "no-irregular-whitespace": 2, // 禁止在 in 表達式中出現否定的左操作數 "no-negated-in-lhs": 2, // 禁止把全局對象 (Math 和 JSON) 作為函數調用 錯誤：var math = Math(); "no-obj-calls": 2, // 禁止直接使用 Object.prototypes 的內置屬性 "no-prototype-builtins": 0, // 禁止正則表達式字面量中出現多個空格 "no-regex-spaces": 2, // 禁用稀疏數組 "no-sparse-arrays": 2, // 禁止出現令人困惑的多行表達式 "no-unexpected-multiline": 2, // 禁止在return、throw、continue 和 break語句之后出現不可達代碼 /*function foo() {return true;console.log("done");}//錯誤*/ "no-unreachable": 2, // 要求使用 isNaN() 檢查 NaN "use-isnan": 2, // 強制使用有效的 JSDoc 注釋 "valid-jsdoc": 1, // 強制 typeof 表達式與有效的字符串進行比較 // typeof foo === "undefimed" 錯誤 "valid-typeof": 2,// // 變量聲明 // //// 要求或禁止 var 聲明中的初始化(初值) "init-declarations": 0, // 不允許 catch 子句的參數與外層作用域中的變量同名 "no-catch-shadow": 0, // 禁止刪除變量 "no-delete-var": 2, // 不允許標簽與變量同名 "no-label-var": 2, // 禁用特定的全局變量 "no-restricted-globals": 0, // 禁止 var 聲明 與外層作用域的變量同名 "no-shadow": 0, // 禁止覆蓋受限制的標識符 "no-shadow-restricted-names": 2, // 禁用未聲明的變量，除非它們在 /*global */ 注釋中被提到 "no-undef": 2, // 禁止將變量初始化為 undefined "no-undef-init": 2, // 禁止將 undefined 作為標識符 "no-undefined": 0, // 禁止出現未使用過的變量 "no-unused-vars": [2, {"vars": "all", "args": "none"}], // 不允許在變量定義之前使用它們 "no-use-before-define": 0,// // 風格指南 // //// 指定數組的元素之間要以空格隔開(, 后面)， never參數：[ 之前和 ] 之后不能帶空格，always參數：[ 之前和 ] 之后必須帶空格 "array-bracket-spacing": [2, "never"], // 禁止或強制在單行代碼塊中使用空格(禁用) "block-spacing":[1, "never"], //強制使用一致的縮進 第二個參數為 "tab" 時，會使用tab， // if while function 后面的{必須與if在同一行，java風格。 "brace-style": [2, "1tbs", {"allowSingleLine": true}], // 雙峰駝命名格式 "camelcase": 2, // 控制逗號前后的空格 "comma-spacing": [2, {"before": false, "after": true}], // 控制逗號在行尾出現還是在行首出現 (默認行尾) // http://eslint.org/docs/rules/comma-style "comma-style": [2, "last"], //"SwitchCase" (默認：0) 強制 switch 語句中的 case 子句的縮進水平 // 以方括號取對象屬性時，[ 后面和 ] 前面是否需要空格, 可選參數 never, always "computed-property-spacing": [2, "never"], // 用于指統一在回調函數中指向this的變量名，箭頭函數中的this已經可以指向外層調用者，應該沒卵用了 // e.g [0,"that"] 指定只能 var that = this. that不能指向其他任何值，this也不能賦值給that以外的其他值 "consistent-this": [1, "that"], // 強制使用命名的 function 表達式 "func-names": 0, // 文件末尾強制換行 "eol-last": 2, "indent": [2, 4, {"SwitchCase": 1}], // 強制在對象字面量的屬性中鍵和值之間使用一致的間距 "key-spacing": [2, {"beforeColon": false, "afterColon": true}], // 強制使用一致的換行風格 "linebreak-style": [1, "unix"], // 要求在注釋周圍有空行 ( 要求在塊級注釋之前有一空行) "lines-around-comment": [1, {"beforeBlockComment": true}], // 強制一致地使用函數聲明或函數表達式，方法定義風格，參數： // declaration: 強制使用方法聲明的方式，function f(){} e.g [2, "declaration"] // expression：強制使用方法表達式的方式，var f = function() {} e.g [2, "expression"] // allowArrowFunctions: declaration風格中允許箭頭函數。 e.g [2, "declaration", { "allowArrowFunctions": true }] "func-style": 0, // 強制回調函數最大嵌套深度 5層 "max-nested-callbacks": [1, 5], // 禁止使用指定的標識符 "id-blacklist": 0, // 強制標識符的最新和最大長度 "id-length": 0, // 要求標識符匹配一個指定的正則表達式 "id-match": 0, // 強制在 JSX 屬性中一致地使用雙引號或單引號 "jsx-quotes": 0, // 強制在關鍵字前后使用一致的空格 (前后腰需要) "keyword-spacing": 2, // 強制一行的最大長度 "max-len":[1, 200], // 強制最大行數 "max-lines": 0, // 強制 function 定義中最多允許的參數數量 "max-params":[1, 7], // 強制 function 塊最多允許的的語句數量 "max-statements":[1, 200], // 強制每一行中所允許的最大語句數量 "max-statements-per-line": 0, // 要求構造函數首字母大寫 （要求調用 new 操作符時有首字母大小的函數，允許調用首字母大寫的函數時沒有 new 操作符。） "new-cap": [2, {"newIsCap": true, "capIsNew": false}], // 要求調用無參構造函數時有圓括號 "new-parens": 2, // 要求或禁止 var 聲明語句后有一行空行 "newline-after-var": 0, // 禁止使用 Array 構造函數 "no-array-constructor": 2, // 禁用按位運算符 "no-bitwise": 0, // 要求 return 語句之前有一空行 "newline-before-return": 0, // 要求方法鏈中每個調用都有一個換行符 "newline-per-chained-call": 1, // 禁用 continue 語句 "no-continue": 0, // 禁止在代碼行后使用內聯注釋 "no-inline-comments": 0, // 禁止 if 作為唯一的語句出現在 else 語句中 "no-lonely-if": 0, // 禁止混合使用不同的操作符 "no-mixed-operators": 0, // 不允許空格和 tab 混合縮進 "no-mixed-spaces-and-tabs": 2, // 不允許多個空行 "no-multiple-empty-lines": [2, {"max": 2}], // 不允許否定的表達式 "no-negated-condition": 0, // 不允許使用嵌套的三元表達式 "no-nested-ternary": 0, // 禁止使用 Object 的構造函數 "no-new-object": 2, // 禁止使用一元操作符 ++ 和 -- "no-plusplus": 0, // 禁止使用特定的語法 "no-restricted-syntax": 0, // 禁止 function 標識符和括號之間出現空格 "no-spaced-func": 2, // 不允許使用三元操作符 "no-ternary": 0, // 禁用行尾空格 "no-trailing-spaces": 2, // 禁止標識符中有懸空下劃線_bar "no-underscore-dangle": 0, // 禁止可以在有更簡單的可替代的表達式時使用三元操作符 "no-unneeded-ternary": 2, // 禁止屬性前有空白 "no-whitespace-before-property": 0, // 強制花括號內換行符的一致性 "object-curly-newline": 0, // 強制在花括號中使用一致的空格 "object-curly-spacing": 0, // 強制將對象的屬性放在不同的行上 "object-property-newline": 0, // 強制函數中的變量要么一起聲明要么分開聲明 "one-var": [2, {"initialized": "never"}], // 要求或禁止在 var 聲明周圍換行 "one-var-declaration-per-line": 0, // 要求或禁止在可能的情況下要求使用簡化的賦值操作符 "operator-assignment": 0, // 強制操作符使用一致的換行符 "operator-linebreak": [2, "after", {"overrides": {"?":"before", ":": "before"}}], // 要求或禁止塊內填充 "padded-blocks": 0, // 要求對象字面量屬性名稱用引號括起來 "quote-props": 0, // 強制使用一致的反勾號、雙引號或單引號 "quotes": [2, "single", "avoid-escape"], // 要求使用 JSDoc 注釋 "require-jsdoc": 1, // 要求或禁止使用分號而不是 ASI（這個才是控制行尾部分號的，） "semi": [2, "always"], // 強制分號之前和之后使用一致的空格 "semi-spacing": 0, // 要求同一個聲明塊中的變量按順序排列 "sort-vars": 0, // 強制在塊之前使用一致的空格 "space-before-blocks": [2, "always"], // 強制在 function的左括號之前使用一致的空格 "space-before-function-paren": [2, "always"], // 強制在圓括號內使用一致的空格 "space-in-parens": [2, "never"], // 要求操作符周圍有空格 "space-infix-ops": 2, // 強制在一元操作符前后使用一致的空格 "space-unary-ops": [2, {"words": true, "nonwords": false}], // 強制在注釋中 // 或 /* 使用一致的空格 "spaced-comment": [2, "always", {"markers": ["global", "globals", "eslint", "eslint-disable", "*package","!"] }], // 要求或禁止 Unicode BOM "unicode-bom": 0, }

其它配置可在eslint官網查詢到

4. 配置代碼注釋

如果需要在代碼中忽略eslint的某種檢查，或者加入某種特定檢查，可以用如下的方式：

忽略檢查：

/* eslint-disable no-undef */

設置檢查：

/*eslint eqeqeq: off*/

5. 使用eslint

檢查當前文件夾及所有子文件夾中js文件規則：

$ eslint .檢查并修復當前文件夾及所有子文件夾中js文件規則：
$ eslint . --fix

6. travis簡介

Travis CI 提供的是持續集成服務。它綁定 Github 上面的項目，只要有新的代碼，就會自動抓取。然后，提供一個運行環境，執行測試，完成構建，還能部署到服務器。只要代碼有變更，就自動運行構建和測試，反饋運行結果。確保符合預期以后，再將新代碼"集成"到主干。持續集成的好處在于，每次代碼的小幅變更，就能看到運行結果，從而不斷累積小的變更，而不是在開發周期結束時，一下子合并一大塊代碼。

另外，Travis CI 只支持 Github，不支持其他代碼托管服務。

7.使用travis

7.1 訪問travis官網并用github賬號登錄，選擇需要構建travis的倉庫。

7.2 在項目根目錄下創建.travis.yml文件，簡單配置eslint檢查

language: node_js node_js:- "6" before_script:- npm install -g eslint script: - npm run lint

????其中script運行的命令需要在package.json中設置

"scripts": {"lint": "eslint ." }

? ? 更多具體設置參考官方文檔

? ? 如此設置后提交代碼文件時就會自動進行eslint腳本檢查，同時注冊github的郵箱會收到檢查結果

7.3 在.md文件中顯示檢查結果

[](https://travis-ci.org/#項目地址#)

通過檢查檢查的代碼就可以顯示passing啦，未通過的會顯示fail，注意及時修改哦~

總結

以上是生活随笔為你收集整理的【系统分析与设计】前端eslint检查 + travis持续集成的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。