前端構(gòu)建工具（1）-- 代碼檢查 --ESlint

wendux 發(fā)布于2019-08-22 16:30 / 3488人閱讀

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

1、簡介：

eslint檢查我們寫的 JavaScript 代碼是否滿足指定規(guī)則的靜態(tài)代碼檢查工具。

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

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

2、作用

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

統(tǒng)一代碼風格規(guī)則，如：縮進用幾個空格；是否用駝峰命名法來命名變量和函數(shù)名等。

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

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

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

3、安裝&配置

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

npm install -g eslint

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

eslint --init

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

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

"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: 具體檢查的規(guī)則，可以使用extends: eslint recommoned采用推薦的檢查規(guī)則，也可以自己對一些規(guī)則進行自定義，第一個參數(shù)是表示該規(guī)則檢查出來的是 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云服務器前端構(gòu)建構(gòu)建工具 android構(gòu)建工具檢查工具

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94416.html

從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個前端項目

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

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

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

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

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

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

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

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

摘要：前端開發(fā)需要了解的工具集合前端開發(fā)需要了解的一些工具，這些工具能夠幫助你在項目開發(fā)中事半功倍?？傊乔岸舜虬牟欢x擇。所以，很多情況下都是與配合使用。它的一個理念就是提供一套完整集成的零配置測試體驗。前端開發(fā)需要了解的工具集合：webpack, eslint, prettier, ... 前端開發(fā)需要了解的一些工具，這些工具能夠幫助你在項目開發(fā)中事半功倍。 1. nrm: npm...

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