關於前端項目代碼檢測～

時間 2019-11-07

標籤關於前端項目代碼檢測简体版

原文原文鏈接

代碼檢查是一種靜態的分析，經常使用於尋找有問題的模式或者代碼，而且不依賴於具體的編碼風格。對大多數編程語言來講都會有代碼檢查，通常來講編譯程序會內置檢查工具。html

開發中，代碼的靜態質量檢查在項目質量保障方面很重要，因此愈來愈多的開發者在項目構建流程或者源碼控制系統中添加靜態檢查的 hook，今天介紹的是如何在項目中配置一套代碼檢測規範。前端

eslint

ESLint 是一個開源的 JavaScript 代碼檢查工具。vue

ESLint 的初衷是爲了讓程序員能夠建立本身的檢測規則。全部的規則都是自由配置，各自獨立且可插拔的（便可開啓可關閉），可將結果設置成警告或錯誤。node

安裝

npm install --save-dev eslint  babel-eslint#或yarn add eslint babel-eslint --dev #添加到devDependencies依賴項類別中複製代碼

官網：

eslint.orggit

cn.eslint.org程序員

配置方式

1.使用 JavaScript 註釋把配置信息直接嵌入到一個代碼源文件中es6
2.配置一個獨立的 .eslintrc.* 文件，或者直接在 package.json 文件裏的 eslintConfig 字段指定配置，ESLint 會查找和自動讀取它們，再者，你能夠在命令行運行時指定一個任意的配置文件。github

eslint --init 命令能夠建立一個配置，這樣就能夠繼承推薦的規則。vue-cli

若是同一目錄下.eslintrc 和package.json 同時存在，.eslintrc 優先級高會被使用，package.json 文件將不會被使用。複製代碼

配置規則

off 或 0 關閉規則npm
warn 或 1 開啓規則，使用警告級別的錯誤
error 或 2 開啓規則，使用錯誤級別的錯誤

配置項

parserOptions：解析器選項
env：使用 env 關鍵字指定你想啓用的環境，並設置它們爲 true。以下示例啓用了 browser 和 Node.js 的環境：

{    "env": {        "browser": true,        "node": true    }}複製代碼

globals：使用 globals 指出你要使用的全局變量。將變量設置爲 true 將容許變量被重寫，或 false 將不容許被重寫。

{    "globals": {        "var1": true,        "var2": false    }}複製代碼

root：爲了將 ESLint 限制到一個特定的項目，在你項目根目錄下的 package.json 文件或者 .eslintrc.* 文件裏的 eslintConfig字段下設置 "root": true。ESLint 一旦發現配置文件中有 "root": true，它就會中止在父級目錄中尋找。
extends：extends 屬性值能夠由如下組成：
- plugin:
- 包名 (省略了前綴，好比，vue)
- /
- 配置名稱 (好比 recommended)

extends: ['plugin:vue/recommended', 'eslint:recommended'],//表示採用vue和eslint推薦的核心規則複製代碼

rules：啓用的規則及其各自的錯誤級別.

全部的規則默認都是禁用的。在配置文件中，使用"extends": "eslint:recommended" 來啓用推薦的規則，報告一些常見的問題。

推薦規則以下：

no-console 禁用 console

no-debugger 禁用 debugger

curly 強制全部控制語句使用一致的括號風格

eqeqeq 要求使用 === 和 !==

max-params 強制函數定義中最多容許的參數數量

block-scoped-var 強制把變量的使用限制在其定義的做用域範圍內

camelcase 強制使用駱駝拼寫法命名約定

eol-last 要求或禁止文件末尾存在空行

no-undef 禁用未聲明的變量，除非它們在 /*global */ 註釋中被提到

no-var 要求使用 let 或 const 而不是 var

max-depth 強制可嵌套的塊的最大深度

max-len 強制一行的最大長度

max-nested-callbacks 強制回調函數最大嵌套深度

comma-spacing 強制在逗號先後使用一致的空格

space-before-function-paren 強制在 function的左括號以前使用一致的空格

space-in-parens 強制在圓括號內使用一致的空格

和es6有關的規則：

arrow-spacing 強制箭頭函數的箭頭先後使用一致的空格

space-before-blocks 強制在塊以前使用一致的空格

semi 要求或禁止使用分號代替 ASI

complexity 指定程序中容許的最大環路複雜度

no-unneeded-ternary 禁止能夠在有更簡單的可替代的表達式時使用三元操做符

quotes 強制使用一致的反勾號、雙引號或單引號

no-unused-vars 禁止出現未使用過的變量

one-var 強制函數中的變量要麼一塊兒聲明要麼分開聲明

no-const-assign 禁止修改const聲明的變量

...

配置原則

可以幫之發現代碼錯誤的規則，都需開啓
配置不依賴於某個具體項目，應儘量合理
幫助保持團隊的代碼風格統一，不限制開發體驗

.eslintignore

三方庫忽略檢測可在.eslintignore 中配置

third-party複製代碼

關於git鉤子

Git 能在特定的重要動做發生時觸發自定義腳本。

鉤子都被存儲在 Git 目錄下的 hooks 子目錄中。也即絕大部分項目中的 .git/hooks 。當你用 git init 初始化一個新版本庫時，Git 默認會在這個目錄中放置一些示例腳本。這些示例的名字都是以 .sample 結尾，若是你想啓用它們，得先移除這個後綴。把一個正確命名且可執行的文件放入 Git 目錄下的 hooks 子目錄中，便可激活該鉤子腳本。

提交工做流鉤子pre-commit 鉤子在鍵入提交信息前運行。它用於檢查即將提交的快照，例如，檢查是否有所遺漏，確保測試運行，以及覈查代碼。若是該鉤子以非零值退出，Git 將放棄這次提交，不過你能夠用 git commit --no-verify 來繞過這個環節。你能夠利用該鉤子，來檢查代碼風格是否一致（運行相似 lint 的程序）、尾隨空白字符是否存在（自帶的鉤子就是這麼作的），或新方法的文檔是否適當。

若是把 Lint 挪到本地，而且每次提交只檢查本次提交所修改的文件，上面的痛點就都解決了。Feedly 的工程師 Andrey Okonetchnikov 開發的 lint-staged 就是基於這個想法，其中 staged 是 Git 裏面的概念，指待提交區，使用 git commit -a，或者先 git add 而後 git commit 的時候，你的修改代碼都會通過待提交區。

git鉤子建立

若是項目使用@vue/cli 腳手架生成的，官方文檔提到，cli服務下有個Git Hook。

在安裝以後，@vue/cli-service 也會安裝 yorkie，它會讓你在 package.json 的 gitHooks 字段中方便地指定 Git hook。
{"gitHooks": { "pre-commit": "lint-staged"}}複製代碼

yorkie fork 自 husky 且並不和以後的版本兼容。

vue creat hello-world複製代碼

以後查看hooks目錄,已經有git鉤子了。

在Package.json中添加以下

"gitHooks": {
        "pre-commit": "lint-staged"
    },
    "lint-staged": {
        "*.{js,vue}": [
            "vue-cli-service lint",
            "git add"
        ]
    }
複製代碼

若是你的項目不是用腳手架生成的，那就須要安裝husky。

未安裝husky前

執行npm install husky --save-dev
複製代碼

相應package.json配置以下

"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,vue}": [
      "eslint",
      "git add"
    ],
  },
複製代碼

你也能夠經過使用.huskyrc, .huskyrc.json or .huskyrc.js 這樣的文件來配置hooks

補充說明

husky相似的工具在安裝的時候會建立相關鉤子
npm在install和uninstall的時候能夠執行腳本
刪除依賴不要在package.json中直接刪除，而是用npm uninstall來刪除
複製代碼

lint-staged : 前端文件過濾工具

Run linters on git staged files

如上package.json中提到lint-staged，對本次被commited中的全部.js和 .vue 文件，執行eslint命令和git add命令

npm install -D lint-staged
yarn add --dev lint-staged
複製代碼

以後在項目中寫了一個錯誤語法，驗證 pre-commit，

接下來commit時能夠看到控制檯語法報錯，lint生效了

這樣咱們就能夠在提交代碼以前及時修正代碼規範和錯誤。

附vue中的.eslintrc.js文件，僅供參考～

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  extends: ['plugin:vue/recommended', 'eslint:recommended'],

  // add your custom rules here
  //it is base on https://github.com/vuejs/eslint-config-vue
  rules: {
        'no-console': 1,
    	'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
        'no-var': 2,
        'no-undef': 1,
        'camelcase': 0,
        'eol-last': 0,
        'block-scoped-var': 0,
        'eqeqeq': 2,
        'max-params': [1, 6],
        'max-depth': [1, 6],
        'max-nested-callbacks': [1, 3],
        'comma-spacing': [2, { before: false, after: true }],
        'arrow-spacing': 2,
        'max-len': [2, 120, 4, { ignoreUrls: true, ignoreComments: true }],
        'key-spacing': [2, { beforeColon: false, afterColon: true }],
        'space-before-function-paren': [2, { anonymous: 'always', named: 'never' }],
        'space-in-parens': [2, 'never'],
        'space-before-blocks': 2,
        'keyword-spacing': 2,
        'semi': [2, 'always'],
        'complexity': [2, 20],
        'curly': [2, 'all'],
        'no-unneeded-ternary': 2,
        'quotes': [2, 'single'],
        'no-unused-vars': [2, { 'vars': 'all', 'args': 'after-used', 'ignoreRestSiblings': false }],
        'object-curly-spacing': [2, 'always', { objectsInObjects: false }],
        'vue/attribute-hyphenation': [2, 'always'],
        'vue/html-indent': [1, 4],
        'vue/html-quotes': [2, 'double'],
        'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }],
        'vue/order-in-components': 2
  }
}

複製代碼