2. 程式人生 > >ESLint（JavaScript程式碼校驗）

ESLint（JavaScript程式碼校驗）

阿新 • • 發佈：2018-11-07

概要

關於JavaScript的程式碼校驗，2016年5月以來大家一直使用jswatchdog，

2018年4月以後，從運維的角度上來說，我們更推薦使用ESLint。

關於ESLint的設定，我們更推薦有利於kintone自定義開發的eslint-config-kintone。

這篇文章，我們將面向初學者來講解如何安裝ESLint的操作方法。

ESLint是什麼

ESLint是2013年由Nicholas C. Zakas釋出的一個開源JavaScript語法校驗工具。

和其他工具不同的是，他的特性在於可以創作單獨規則來補充追加。

ESLint可以靈活設定規則，也釋出了很多公開的規則集。

作為著名的規則集，Google公司釋出了面向JavaScript開發的eslint-config-google，並得到普及。

eslint-config-kintone是什麼

eslint-config-kintone是kintone的開發人員，針對kintone開發的ESLint規則集。

eslint-config-kintone具有一下這些特徵：

  • kintone開發的時候，可以保證程式碼的品質。（jswatchdog也是一樣的。）

  • ESLint 雖然原來是命令列工具，但是也可以作為編輯器的擴充套件來安裝使用。

  • 此時，它可以在程式設計的同時實時檢查程式碼。

  • 在命令列上使用時，也有自動修正功能。

程式碼的話在GitHub上有公開。

對應編輯器

適用於主流編輯器Sublime Text、Atom等。這次以Visual Studio Code為例來說明。 對應的編輯器可以在ESLint官網裡確認。

ESLint的安裝（Windows）

預先準備

執行ESLint 的話，需要裝有Node.js 和 npm 的環境。

  1. 從官網上下載 Node.js。這個是官網。

  2. 點選 “DOWNLOADS” ，選擇適合自己電腦的安裝包下載。

    0015b89021b912aa3d8458f41e8176a

  3. 點選安裝。

    點選 “Next” 。

0015b89022b2b6bc9d9646c6f8039ac

閱讀 License 規約，“I accept the terms in ihe Licence Agreement” 的單選框打勾後，點選 “Next”。

0015b8902409eef2ad0a5a8cbcdf5dd

選擇 Node.js 的安裝目錄，點選 “Next” 。（預設也OK的）

0015b890257c147f26a380692a2cbbb

 選擇需要安裝的元件，點選 “Next”。（預設也是OK的）

0015b890273599b0fb04eab8890932d

點選 “Install” 後，就開始安裝了。

0015b89029521bf4fea066ae626fbd9

0015b8902b8835450df17ec10a4e119

安裝結束後，點選 “Finish”。

0015b8902db55332e87e42edbf6d4cc

以上Node.js和npm就安裝成功了。

安裝

接下去安裝ESLint和eslint-config-kintone。

※這裡介紹的是全域性安裝的操作方法。

  1. 在命令提示符下輸入 “node -v” 後確認Node.js的版本。如果版本是4.0.0以下的話，需要更新。

    2018-02-13_15h24_17.png

  2. 輸入 “npm install -g eslint” 安裝 ESLint。輸入命令後就開始安裝。

    2018-02-13_15h25_49.png

    安裝結束後會出現下面的的訊息。

    2018-02-13_15h26_03.png

  3. 輸入 “npm install -g eslint-config-kintone” 安裝 eslint-config-kintone。

    2018-02-13_15h27_51.png

  4. 輸入 “npm ls -g --depth=0” ，確認ESLint和eslint-config-kintone 是否以父子的關係被安裝。 

    2018-03-19_15h27_34.png

  5. 新建立 “.eslintrc.js” 檔案，寫入以下3行。※檔名請以 “.” 為開頭。

    module.exports = {
    "extends": "eslint-config-kintone"
};

  6.  “.eslintrc.js” 放在和想要校驗的專案資料夾同級的資料夾裡。

  7. 0015b8de2c29290ba9f2b24b530ea11

    ※加入任何一個專案資料夾都是執行同樣的設定的話，放在 “C:\Users\使用者名稱” 下會更方便。

執行命令列

執行ESLint，後面可以是 “eslint 檔名” 或者 “eslint 資料夾”。

例：執行 “test.js” 檔案的時候
2018-02-13_16h35_05.png

▼「test.js」的範例程式碼

1

2

3

4

5

6

7

(function() {

    'use strict'

    var func1 = function(a, b) {

        return a+ b;

    };

    var result = func1(1, 3);

})();

※為了確認ESLint是否被正確執行了，我們故意輸出一個錯誤資訊。

実行結果

執行以後，出現如圖所示的錯誤資訊。

0015b8dea44c347e8c57f801c2e29d2

在範例程式碼裡：

  • 漏了一個分號。

  • 運算子前後需要加空格。

  • 'result' 這個變數沒有被使用。

出現了以上這些資訊。

※如果執行的是無錯誤的檔案的話，就不會出現任何資訊。

關於錯誤資訊詳細，可以參考ESLint官網的Rules。

運用到編輯器裡

這裡介紹的是如何運用到編輯器裡的方法。

Sublime Text(Windows)

Sublime Text 安裝eslint，只需要通過他自帶的packageControl安裝相應的SublimeLinter和SublimeLinter-eslint兩個包。

安裝方法: 

1 下載sublime-package:  https://sublime.wbond.net/Package%20Control.sublime-package

2 下載好以後，把它放到“Installed Packages”這個目錄，然後重啟Sublime Text。

（ps : "Installed Packages" 的預設路徑是:"C:\Users\xxx\AppData\Roaming\Sublime Text 3\Installed Packages"）

3 如果在Sublime Text的Preferences選單最下邊有Package Settings 和Package Control兩個選項則代表安裝成功了。

此時使用快捷鍵Ctrl+Shift+P開啟Package Control選單，輸入install package，然後通過輸入外掛名來依次安裝 SublimeLinter和SublimeLinter-eslint。

0015b9f680366c1d77b2910d8b6a983

如何檢查結果

開啟剛才的test.js 檔案，點選左下角的圖示開啟除錯結果畫面

0015b9f680365cfd8cf77df6d348700

0015b9f68037096398c51004532bead

0015b9f680373fd2e81b154df0f5bf7

同時滑鼠懸停在錯誤程式碼的行前面的小圓點上，也會顯示具體的錯誤資訊。

0015b9f61c0dfb1c727fc2fe29ce952

ESLint的安裝（Mac）

事先準備

執行ESLint 的話，需要裝有Node.js 和 npm 的環境。

從官網上下載 Node.js。這個 是官網。

點選 “DOWNLOADS” ，選擇適合自己電腦的安裝包下載。
__________2018-03-05_10.58.20.png

點選安裝。

點選 “繼續”。

0015b8905553d7b26600b6731e31cdd

閱讀 License 規約。

0015b8905d1d712da05dabb32dabaf9

如果統一規約的話，就點選 “同意”。

0015b8905f01d52fbe56cc41f062ff9

選擇安裝目錄後，點選 “繼續” 。

0015b89060926a85af6a13fe5f2b911

在安裝種類這一頁，點選 “安裝”。

0015b890655cf2509f6ce45365a6aa2

安裝解釋後，點選 “關閉” 。

0015b8906740b35a2241f0eeab8b270

以上Node.js和npm就安裝成功了。

安裝

接下去安裝ESLint和eslint-config-kintone。

※這裡介紹的是全域性安裝的操作方法。

  1. 在終端輸入 “node -v” 後確認Node.js的版本。如果版本是4.0.0以下的話，需要更新。

    $ node -v
v8.9.4

  2. Mac裡全域性安裝的時候，容易出現許可權錯誤。為了規避這個問題，
    我們可以通過以下的操作方法，做成新的目錄，然後設定在那裡進行安裝。

    2-1.用 “mkdir” 生成一個 “.npm-global” 的目錄。

    $ mkdir ~/.npm-global

    2-2.執行 “npm config set prefix”， 將此目錄設定成安裝目錄。

    $ npm config set prefix

    2-3.執行 “vi ~/.profile” 建立或者開啟 “~/.profile”。※以 “.” 作為檔案的開頭。

    $ vi ~/.profile

    2-4.在 “~/.profile” 檔案裡寫入下面這行程式碼。※執行 “export PATH” 將會更新系統環境變數。

    export PATH=~/.npm-global/bin:$PATH

    （參考）以終端的vi編輯器操作作為範例。
      2-4-1. 輸入 “a” 更改 vi 的輸入模式
      2-4-2. 輸入上面的1行命令
      2-4-3. 按esc鍵更改 vi 的命令模式
      2-4-4. 輸入 “:wq” 後，儲存完了

    2-5. 輸入 “source ~/.profile”， 執行這個檔案。

    $ source ~/.profile

  3. 輸入 “npm install -g eslint” 安裝ESLint。輸入命令回車後，安裝就開始了。

    $ npm install -g eslint

    安裝結束後會出現下面的資訊。

  4. 0015b8deb96726c34095bf97a802c15

    輸入 “npm install -g eslint-config-kintone” 安裝 eslint-config-kintone。

  5. $ npm install -g eslint-config-kintone

  6. 輸入 “npm ls -g --depth=0”，で、確認ESLint和eslint-config-kintone 是否以父子的關係被安裝。

    $ npm ls -g --depth=0
（根目錄）/.npm-global/lib
├── [email protected]
└── [email protected]

  7. 輸入 “vi .eslintrc.js” 新建立 “.eslintrc.js” 檔案。※檔名請以 “.” 為開頭。

    $ vi .eslintrc.js

  8. “~/.eslintrc.js” 檔案，寫入以下3行。

    module.exports = {
    "extends": "eslint-config-kintone"
};

    （參考）以終端的vi編輯器操作作為範例。
      7-1. 輸入 “a” 更改 vi 的輸入模式
      7-2. 輸入上面的3行命令
      7-3. 按esc鍵更改 vi 的命令模式
      7-4. 輸入 “:wq” 後，儲存完了

執行命令列

和 Windows 命令列的操作方法一樣一樣。

運用到編輯器裡

和運用到 Windows 的編輯器裡的操作方法 一樣。

ESLint更多的技巧

為了更習慣使用 ESLint ，給大家介紹一些技巧。

使用自動修正功能

在命令列里加上 “--fix” 選項的話，可以自動修正程式碼更新檔案。
※根據錯誤的種類，也有無法自動修正的情況。

規則設定的變更

特殊的規則例外等，需要更改設定的規則時，可以編輯 .eslintrc 檔案。

  • 例1: Garoon 自定義開發使用的時候，需要將garoon物件的錯誤例外的時候
    　　新增 “globals” 引數，將 “garoon” 設定成 “true”。

  • 例2: 將特殊的規則例外的時候
    　　新增 “rules” 引數，將需要例外的選項設定成 “off”。

以下是反應了例1和例2 內容的 .eslintrc 檔案範例。

1

2

3

4

5

6

7

8

9

10

module.exports = {

    "extends": "eslint-config-kintone",

    "globals":{

        "garoon": true

    },

    "rules":{

        "no-underscore-dangle": "off",

        "no-console": "off"

    }

};

原文連結：https://cybozudev.kf5.com/hc/kb/article/1176602/

更多文章：請檢視開發者社群

相關推薦

ESLint（JavaScript程式碼校驗）

概要 關於JavaScript的程式碼校驗，2016年5月以來大家一直使用jswatchdog， 2018年4月以後，從運維的角度上來說，我們更推薦使用ESLint。 關於ESLint的設定，我們更推薦有利於kintone自定義開發的eslint-config-kintone。 這篇

javascript封裝（表單校驗）

先上圖： 產品的需求是點選框內輸入時不提示錯誤，等滑鼠離開時校驗錯誤，那我就這樣寫 //增加提示程式碼 $.prototype.accounterror=function(info){ $(this).next("span").remove(); $(this).aft

SpringBoot通過WorkBook快速實現對Excel的匯入和匯出（包括資料校驗）

之前轉載過一篇對Excel基本操作相關的文章，這篇文章的瀏覽量迅速飆升，以至於在我部落格的熱門文章中排到了第三的位置，不過那篇轉載的文章實用性差並且講解不是很清晰，所以打算趁著今天休息，寫一篇關於SpringBoot通過WorkBook快速實現對Excel的匯入、匯出、資料校驗的文章，也是便於日後查

Linux BCC（異或校驗）計算命令列工具

BCC(Block Check Character/資訊組校驗碼)，因校驗碼是將所有資料異或得出，故俗稱異或校驗。具體演算法是：將每一個位元組的資料（一般是兩個16進位制的字元）進行異或後即得到校驗碼。  例如16進位制資料：01 A0 7C FF 02  用計算器計算：01 x

Golang 客戶端對伺服器端的證書進行校驗（單向證書校驗）

[[email protected] ~]# echo "192.168.10.100   zigoo.com" >> /etc/hosts [[email protected] ~]# more /etc/hosts 127.0.0.1  

JavaScript的案例（數據校驗，js輪播圖，頁面定時彈窗）

頁面 span one align 數據校驗 lse 格式 用戶輸入 ade 1.數據校驗 步驟 1.確定事件（onsubmit）並綁定一個函數 2.書寫這個函數，獲取數據，並綁定id

常用校驗碼（奇偶校驗，海明校驗，CRC）學習總結

結果 post 1的個數 增加 src 所在 如果 ble 繼續 常用校驗碼（奇偶校驗，海明校驗，CRC）學習總結 一.為什麽要有校驗碼？ 因為在數據存取和傳送的過程中，由於元器件或者噪音的幹擾等原因會出現錯誤，這個時候我們就需要采取相應的措施，發現並糾正錯誤，對於錯誤的

vue + vee-validate 校驗範圍（部分校驗，全部校驗）

搜尋很久，沒有發現有關於vue + vee-validate 部分校驗的。自己寫一個。 主要是兩個場景： 1. 校驗範圍內，所有的欄位。 2. 校驗全域性所有欄位。主要方法： 1.validate(fields, scope)      2. validateAll(

CRC（迴圈冗餘校驗）演算法入門

寫給嵌入式程式設計師的迴圈冗餘校驗（CRC）演算法入門引導前言CRC校驗（迴圈冗餘校驗）是資料通訊中最常採用的校驗方式。在嵌入式軟體開發中，經常要用到CRC 演算法對各種資料進行校驗。因此，掌握基本的CRC演算法應是嵌入式程式設計師的基本技能。可是，我認識的嵌入式程式設計師中

js正則表示式校驗值是否為一個數字（正負整數，正負小數均可校驗）

百度了很多給出的正則清一色都是 /^[0-9]+.?[0-9]*$/ 但是經過實測此正則表示式是不完全正確的 所以自己測試並寫了新的校驗是否為數字的正則表示式，經自己測試，正負正數，正負小數均能正確判斷 /(^[\-0-9][0-9]*(.[0-9]+)?

Selenium+Python 自動化操控登入介面（有簡單驗證碼圖片校驗）

從最簡單的Web瀏覽器的登入介面開始，登入介面如下： 進行Web頁面自動化測試，對頁面上的元素進行定位和操作是核心。而操作又是以定位為前提的，因此，對頁面元素的定位是進行自動化測試的基礎。 頁面上的元素就像人一樣，有各種屬性，比如元素名字，元素i

實驗五 使用執行緒（系統時間校驗版）

實驗五 使用執行緒 實驗目的 實驗要求 工程程式碼 實驗目的 熟悉和掌握Android執行緒的使用 實驗要求 完成一個秒錶，具備啟停功能，正確使用工作執行緒完成介面重新整理 分析秒錶的計時是否

Struts2 輸入校驗（Action中使用國際化資原始檔、校驗器校驗）

Action類獲得國際化資原始檔中的資訊，主要使用ActionSupport類的getText方法進行。 ActionSupport類過載了很多getText方法，常用的有如下幾個： 1、getText(String aTextName)：引數aTextName是資原始檔中

Luhn algorithm（附信用卡校驗演算法C語言實現）

From Wikipedia, the free encyclopedia The Luhn algorithm or Luhn formula, also known as the "modulus 10" or "mod 10" algorithm, is a simple checksum formu

使用者註冊的form表單（加校驗）

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Trans

資料鏈路層（CRC校驗）

資料鏈路層的作用是是網路層接受的資料包可以可靠的在物理層的位元通道上傳輸，主要校驗處理傳輸錯誤。 資料鏈路層資料鏈路除了物理鏈路以外還包括實現資料傳輸的協議，這些協議由硬體和軟體來完成。介面卡（網絡卡） 就可以實現協議的硬體和軟體。 資料鏈路中傳輸的單位是幀，幀有首部(SOH)

介面自動化落地（二：HttpClient+testNG實現對介面的測試及校驗）

這是之前login介面的程式碼 @Test(groups = "loginTrue",description = "使用者登入介面測試") public void loginTrue() throws IOException { S

Glide圖片載入神器----官方庫wiki說明文件的翻譯（快取與快取校驗）

快取校驗是一個相對複雜的話題和概念，應該儘量少去考慮。本篇幅將給出一個在Glide中如何生成cache key大致的方案，並且如何讓快取更好的為你工作給一些建議提醒。 Cache Keys： 在Glide中Cache Keys用於DiskCacheS

angular1.0 表單校驗的一個坑（巢狀表單校驗）

 今天看阿里雲分享的一個表單校驗的視訊，本來想著做了很多校驗了，也沒有遇到什麼坑，看來還是自己做的太少~ 這樣的,我手敲記錄下吧： <form name="userForm" novalidate> 一定要有name novalidate是用來禁止瀏覽器的校驗

Android中驗證姓名、身份證、銀行卡、手機號（正則表示式校驗）

最近專案中遇到驗證銀行卡號的問題，就查了一下，也總結總結，後期如果發現其他資訊驗證的會補上的。  1.驗證輸入的身份證號是否正確 public static boolean isLegalId(String id) { if (id.toUpperCase