前端構建工具（1）-- 代碼檢查 --ESlint

wendux 發布于2019-08-22 16:30 / 3487人閱讀

摘要：簡介檢查我們寫的代碼是否滿足指定規則的靜態代碼檢查工具。作用作為代碼檢查工具，其作用主要有以下幾點統一代碼風格規則，如縮進用幾個空格是否用駝峰命名法來命名變量和函數名等。

1、簡介：

eslint檢查我們寫的 JavaScript 代碼是否滿足指定規則的靜態代碼檢查工具。

ESHint 和 JSLint 也是靜態代碼檢查工具，但伴隨著發展，他們已經無法滿足需求，于是ESlint 誕生了，因次ESlint比它們功能更強大也更靈活。

ESLint 是用 Node.js 寫的，可以通過 npm 來安裝。ESLint 也可以在 webpack(eslint-loader) 和 Gulp.js(gulp-eslint) 中使用。

2、作用

ESlint作為代碼檢查工具，其作用主要有以下幾點：

統一代碼風格規則，如：縮進用幾個空格；是否用駝峰命名法來命名變量和函數名等。

減少錯誤，如：相等比較必須用 ===，變量在使用前必須被聲明，在條件語句中不能使用賦值語句等。

提高代碼質量，如：函數最多有多少條件分支；最多有幾個參數，代碼塊最多能嵌套多少層等。

其他。如：禁用alert。這可以提高用戶體驗，因為 alert 框的外觀不是那么好看，而且往往與網站的風格不搭，一般都會自定義 alert 框。

3、安裝&配置

eslint可以用npm 安裝依賴,用-g是全局安裝

npm install -g eslint

初始化eslint配置，在用戶文件中會生成一個eslint配置文件，即.eslintrc.js

eslint --init

然后可以在.eslintrc的文件進行配置:

env: 指定代碼的運行環境,設置了代碼的運行環境可以是代碼檢測時，不會將運行環境預定義的全局變量視為沒有定義

"env": {
       "browser": true,
       "commonjs": true,
       "es6": true
    },

parserOptions: 設置js版本的支持情況和jxs的支持情況。ecmaVersion 指定用哪個ECMAScript 的版本，默認是 3 和 5。

"parserOptions": {
       "ecmaVersion": 6
   }

globals：額外的全局變量，將需要使用的全局變量設置為ture,在代碼檢測時該全局變量則不會報未定義的錯誤

"globals": {
   "sap": true,
   "jQuery": true,
   "_": true,
   "$": true,
   "Promise": true,
   "QUnit": true,
   "sinon": true
},

rules: 具體檢查的規則，可以使用extends: eslint recommoned采用推薦的檢查規則，也可以自己對一些規則進行自定義，第一個參數是表示該規則檢查出來的是 off / 0 :不檢查，warn / 1 :錯誤，error /2 警告

{
  "extends": "eslint:recommended",
  "rules": {
    "indent": ["error", 2],
    "no-mixed-spaces-and-tabs": "error"
    "camelcase": "error",
    "eqeqeq": "warn",
    "curly": "error",
    "no-undef": "error",
    "no-unused-vars": "warn",
    "max-params": "warn"
  }
}

4、錯誤修改

具體的報錯信息可以參考https://eslint.org/docs/3.0.0...

GPU云服務器云服務器前端構建構建工具 android構建工具檢查工具

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/94416.html

從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目

摘要：從到再到搭建編寫構建一個前端項目選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現成的項目模板自己搭建項目骨架。使用版本控制系統管理源代碼項目搭建好后，需要一個版本控制系統來管理源代碼。從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目 1. 選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種：選擇現成的項目模板、自己搭建項目骨架。 ...

call_me_R 2019-08-23 13:43 評論0 收藏0
從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目

摘要：從到再到搭建編寫構建一個前端項目選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現成的項目模板自己搭建項目骨架。使用版本控制系統管理源代碼項目搭建好后，需要一個版本控制系統來管理源代碼。從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目 1. 選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種：選擇現成的項目模板、自己搭建項目骨架。 ...

wzyplus 2019-08-02 12:08 評論0 收藏0
從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目

摘要：從到再到搭建編寫構建一個前端項目選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現成的項目模板自己搭建項目骨架。使用版本控制系統管理源代碼項目搭建好后，需要一個版本控制系統來管理源代碼。從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目 1. 選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種：選擇現成的項目模板、自己搭建項目骨架。 ...

aristark 2019-08-29 17:24 評論0 收藏0
前端進階（13） - 搭建自己的前端腳手架

摘要：搭建自己的前端腳手架一般新開發一個項目時，我們會首先搭建好一個腳手架，然后才會開始寫代碼。搭建腳手架可以用等命令行工具，也可以直接用等模板，如果這些都不能滿足你的個性化需求，可以嘗試搭建自己的前端腳手架。搭建自己的前端腳手架一般新開發一個項目時，我們會首先搭建好一個腳手架，然后才會開始寫代碼。搭建腳手架可以用 create-react-app、vue-cli、yeoman 等命令行...

lykops 2019-08-26 12:20 評論0 收藏0
前端進階（8） - 前端開發需要了解的工具集合：webpack, eslint, prettier,

摘要：前端開發需要了解的工具集合前端開發需要了解的一些工具，這些工具能夠幫助你在項目開發中事半功倍。總之，是前端打包的不二選擇。所以，很多情況下都是與配合使用。它的一個理念就是提供一套完整集成的零配置測試體驗。前端開發需要了解的工具集合：webpack, eslint, prettier, ... 前端開發需要了解的一些工具，這些工具能夠幫助你在項目開發中事半功倍。 1. nrm: npm...

SillyMonkey 2019-08-29 16:44 評論0 收藏0