亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

wendux / 3556人閱讀

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

1、簡介：

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

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

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

2、作用

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

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

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

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

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

3、安裝&配置

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

npm install -g eslint

初始化eslint配置，在用戶文件中會(huì)生成一個(gè)eslint配置文件，即.eslintrc.js

eslint --init

然后可以在.eslintrc的文件進(jìn)行配置:

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

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

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

"parserOptions": {
       "ecmaVersion": 6
   }

globals：額外的全局變量，將需要使用的全局變量設(shè)置為ture,在代碼檢測時(shí)該全局變量則不會(huì)報(bào)未定義的錯(cuò)誤

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

rules: 具體檢查的規(guī)則，可以使用extends: eslint recommoned采用推薦的檢查規(guī)則，也可以自己對一些規(guī)則進(jìn)行自定義，第一個(gè)參數(shù)是表示該規(guī)則檢查出來的是 off / 0 :不檢查，warn / 1 :錯(cuò)誤 ，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、錯(cuò)誤修改

具體的報(bào)錯(cuò)信息可以參考https://eslint.org/docs/3.0.0...

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

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

相關(guān)文章

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

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

    call_me_R 評論0 收藏0

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

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

    wzyplus 評論0 收藏0

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

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

    aristark 評論0 收藏0

  • 前端進(jìn)階（13） - 搭建自己的前端腳手架

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

    lykops 評論0 收藏0

  • 前端進(jìn)階（8） - 前端開發(fā)需要了解的工具集合：webpack, eslint, prettier,

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

    SillyMonkey 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<