三分鐘從零單排js靜態檢查

時間 2019-11-25

原文原文鏈接

什麼是靜態檢查

距離上次寫三分鐘從零單排（三分鐘從零單排gulp-less配置）的文章過去很久了，此次來聊一聊靜態檢查。node

由於如今正在帶學生的js基礎課，開始寫一些總體項目了。平常遇到不少關於缺乏括號，多寫了一個點，變量沒有聲明諸如此類的錯誤。react

並且在編程界一直有一個神祕的現象，就是越簡單的bug就越難找到。那種死都改很差的bug基本都是一眼就看的出來，一個小時都找不到的錯誤，八成是一會兒就改好的。從上學的時候就發現了這個規律，因此一旦找了很長時間都找不到bug在哪，趕忙把本身切換到白癡模式，很快就能找到錯誤。git

可是對於新人來講，天天都會犯不少語法細節的錯誤，而且在其中浪費大量的時間。有不少時候，明明只是一個括號匹配的小問題，結果爲了找出來問題就反覆修改調試了好幾處代碼，最後反而把好用的代碼改壞了，人也很煩躁，以爲頗有挫敗感。es6

固然，靜態檢查不只僅是幫助初學者進行學習，對於咱們平常工做來講，避免一些小錯誤也是頗有效的。另外一個重要的用途是，保持團隊的代碼風格一致，使得提交git的時候能夠避免不少沒必要要的修改行出現。web

因此不管是從學習的角度，仍是從團隊開發的角度來講，靜態代碼檢查均可以有效的提升開發效率。express

Sublime插件

由於個人平常使用Sublime做爲開發工具，因此用Sublime的使用舉例說明。npm

首先要安裝兩個插件：編程

SublimeLinter 和 SublimeLinter-contrib-eslint
SublimeLinter 是一個能夠支持sublime使用各類靜態檢查工具的工具，能夠配置觸發條件，顯示樣式，以及使用什麼工具作靜態檢查。json

什麼，你問我怎麼安裝插件？gulp

一、經過快捷鍵 ctrl+` 或者 View > Show Console 菜單打開控制檯

二、粘貼對應版本的代碼後回車安裝

適用於 Sublime Text 3：

import urllib.request,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();urllib.request.install_opener(urllib.request.build_opener(urllib.request.ProxyHandler()));open(os.path.join(ipp,pf),'wb').write(urllib.request.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())複製代碼

適用於 Sublime Text 2：

import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp)ifnotos.path.exists(ipp)elseNone;urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler()));open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read());print('Please restart Sublime Text to finish installation')複製代碼

當安裝好SublimeLinter以後，就能夠在Tools > SublimeLinter看到插件的配置項了。

包括檢測模式，報錯信息樣式，切換檢測器等各類配置。全部的配置經過打開Open User Settings均可以看到。

由於如今尚未任何的檢測器，因此還沒法工做。

可選用的靜態檢測的工具備eslint jshint jslint JSCS等。

JSLint

JSLint是其中最老的工具。在2002年 Douglas Crockford開發了該工具，根據其經驗，強制使用js語言中精粹的部分。若是你贊成這些精粹，JSLint能成爲一個好的工具。

JSLint的缺點是不能配置和拓展。你根本不能禁掉須要特性，而且不少缺乏文檔。官方文檔很是不友好，例如缺乏如何將其集成到編輯的信息。

JSHint

做爲一個可配置的JSLint版本，JSHint被開發出來。你能夠配置每一個規則，將其放到一個配置文件中，這樣在大項目中能夠容易使用。JSHint對每一個規則有好的文檔，因此能夠準確知道每一個規則的做用。將其集成到編輯器也是簡單的。

ESLint

ESLint是最新出來的工具。它被設計的容易拓展、擁有大量的自定義規則、容易的經過插件來安裝。它給出準確的輸出，並且包括規則名，這樣能夠知道哪一個規則形成了錯誤。

橫向對比以後，咱們選擇用ESLint做爲靜態檢測的工具，因而咱們還須要插件：Sublime-contrib-eslint 。

這時候打開 Tools > SublimeLinter > Open User Settings 能夠看到，linters配置項已經有了eslint

因此看起來好像已經能夠了呢，趕忙火燒眉毛的打開一個js文件，結果卻什麼都沒有顯示，咱們用ctrl+`打開控制檯看一下，發現有報錯

原來是eslint沒有安裝，須要手動安裝eslint包，打開cmd，輸入：

npm i eslint -g

全局安裝eslint以後重啓一下SublimeLinter，結果發現，媽的仍是很差使……

再次使用ctrl+`打開控制檯，此次說明錯誤的緣由是沒有eslint的配置文件。

ESlint 被設計爲是徹底可配置的，這意味着你能夠關閉每個規則，只運行基本語法驗證，或混合和匹配綁定的規則和自定義規則，以讓 ESLint 更適合於你的項目。有兩種主要的方式來配置 ESLint：

Configuration Comments - 使用 JavaScript 註釋把配置信息直接嵌入到一個文件

Configuration Files - 使用 JavaScript、JSON 或者 YAML 文件爲整個目錄和它的子目錄指定配置信息。能夠用 .eslintrc.* 文件或者在 package.json文件裏的 eslintConfig 字段這兩種方式進行配置，ESLint 會查找和自動讀取它們，再者，你能夠在命令行指定一個配置文件。
其實對於SublimeLinter來講，還有一種一勞永逸的方法，就是把配置文件寫在插件設置中

"linters": {
            "eslint": {
                "@disable": false,
                "args": [
                    "--config",
                    "${sublime}/user/eslint.conf"
                ],
                "excludes": []
            }
        }複製代碼

其中${sublime}/user/eslint.conf是配置文件的路徑，${sublime}在個人電腦上路徑是C:\Users\USERNAME\AppData\Roaming\Sublime Text 3\Packages

如下是我在使用的配置文件：

{
    "env": {
        "browser": true,
        "node": true,
        "es6": true
    },
    "globals": {
        "jest": true,
        "describe": true,
        "it": true,
        "expect": true,
        "$": true,
        "require": true,
        "define": true,
        "module": true,
        "MZ": true,
        "console": true,
        "window": true,
    },
    "rules": { //0 關閉，1 警告，2 錯誤
        "block-scoped-var": 0,                      //把 var 語句看做是在塊級做用域範圍以內
        "curly": 1,                                 //爲全部控制語句指定花括號約定，警告
        "eol-last": 0,                              //強制文件最後一行爲空行，關閉
        "eqeqeq": 1,                                //- 要求使用 === 和 !==
        "dot-notation": 2,                          //儘量的使用點符號
        "no-console": 0,                            //不容許存在 console。關閉
        "no-empty": 1,                              //空的代碼塊
        "no-self-compare": 1,                       //禁止自身比較
        "no-shadow": 2,                             //定義的變量不容許已在外層做用域定義
        "no-undef": 2,                              //變量未定義
        "no-underscore-dangle": 0,                  //禁止標識符中有懸空下劃線。關閉
        "no-unused-expressions": 1,                 //禁止在語句的位置使用表達式
        "no-unused-vars": [1, {"vars":"local"}],    //變量定義後未使用
        "space-infix-ops":2,                        //要求操做符周圍有空格
        "no-use-before-define": 1,                  //不容許在變量定義以前使用它們
        "key-spacing":[1, {
            "singleLine": {
                "beforeColon": false,
                "afterColon": true
            },
            "multiLine": {
                "beforeColon": true,
                "afterColon": true,
                "align": "colon"
            }
        }],
        "no-multi-spaces": [1, {"exceptions": {
            "ImportDeclaration": true, 
            "AssignmentPattern": true, 
            "VariableDeclarator": true, 
            "Property": true} 
        }],
        "quotes": [1, "single", "avoid-escape"] //使用單引號
    },
    "extends": "eslint:recommended",
    "ecmaFeatures": {
        "jsx": true,
        "experimentalObjectRestSpread": true
    },
    "plugins": [
        "react"
    ]
}複製代碼

更多規則能夠在List of available rules查找配置

全部的規則默認都是禁用的。在配置文件中，使用 "extends": "eslint:recommended" 來啓用推薦的規則，報告一些常見的問題，在下文中這些推薦的規則都帶有一個綠色對勾標記。
命令行的 --fix 選項用來自動修復規則所報告的問題（目前，大部分是對空白的修復），在下文中會有一個黃色扳手的圖標。