這次帶給大家EsLint新手入門須知，EsLint新手入門須知的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。

介紹

??ESLint 是一個(gè)插件化的javascript 程式碼偵測(cè)工具，它可以用來檢查常見的JavaScript 程式碼錯(cuò)誤，也可以進(jìn)行程式碼風(fēng)格檢查，這樣我們就可以根據(jù)自己的喜好指定一套ESLint 配置，然後應(yīng)用到所編寫的項(xiàng)目上，從而實(shí)現(xiàn)輔助編碼規(guī)範(fàn)的執(zhí)行，有效控制專案代碼的品質(zhì)。

安裝

ESLint的安裝:本機(jī)安裝、全域安裝

1、本機(jī)安裝

$?npm?install?eslint?--save-dev

產(chǎn)生設(shè)定檔

$?./node_modules/.bin/eslint?--init

之後,您可以運(yùn)行ESLint在任何檔案或目錄如下:

$?./node_modules/.bin/eslint?index.js

#index.js是你需要測(cè)試的js檔案。你使用的任何插件或共享配置（必須安裝在本地來與安裝在本地的ESLint一起工作）。

2、全域安裝

如果你想讓ESLint可用到所有的專案,建議全域安裝ESLint。

$?npm?install?-g?eslint

產(chǎn)生設(shè)定檔

$?eslint?--init

之後,您可以在任何檔案或目錄執(zhí)行ESLint

$?eslint?index.js

PS：eslint --init是用於每個(gè)項(xiàng)目設(shè)定和配置eslint,並將執(zhí)行本地安裝的ESLint及其插件的目錄。如果你喜歡使用全域安裝的ESLint，在你設(shè)定中使用的任何插件都必須是全域安裝的。

使用

1、在專案根目錄產(chǎn)生package.json檔案（設(shè)定ESLint的專案中必須有package.json 文件，如果沒有的話可以使用npm init -y來產(chǎn)生）

$?npm?init?-y

2、安裝eslint（安裝方式依個(gè)人專案需要安裝，這裡使用全域安裝）

$?npm?install?-g?eslint

3、建立index .js文件，裡面寫一個(gè)函數(shù)。

function?merge?()?{
????var?ret?=?{};
????for?(var?i?in?arguments)?{
????????var?m?=?arguments[i];
????????for?(var?j?in?m)?ret[j]?=?m[j];
????}
????return?ret;
}

console.log(merge({a:?123},?{b:?456}));

執(zhí)行node index.js，輸出結(jié)果為{ a: 123, b: 456 }

$?node?index.js
{?a:?123,?b:?456?}

使用eslint檢查

$?eslint?index.js

Oops!?Something?went?wrong!?:(

ESLint:?4.19.1.
ESLint?couldn't?find?a?configuration?file.?To?set?up?a?configuration?file?for?this?project,?please?run:

????eslint?--init

ESLint?looked?for?configuration?files?in?E:\website\demo5\js?and?its?ancestors.?If?it?found?none,?it?then?looked?in?your?home?directory.

If?you?think?you?already?have?a?configuration?file?or?if?you?need?more?help,?please?stop?by?the?ESLint?chat?room:?https://gitter.im/eslint/eslint

執(zhí)行結(jié)果是失敗，因?yàn)闆]有找到相應(yīng)的配置文件，個(gè)人認(rèn)為這個(gè)eslint最重要的就是配置問題。

新設(shè)定??檔

??$?eslint?--init

產(chǎn)生的過程中，需要選擇產(chǎn)生規(guī)則、支援環(huán)境等內(nèi)容，以下說明一些本人的生成選項(xiàng)

??How?would?you?like?to?configure?ESLint??Answer?questions?about?your?style
??Are?you?using?ECMAScript?6?features??Yes
??Are?you?using?ES6?modules??Yes
??Where?will?your?code?run??Browser
??Do?you?use?CommonJS??Yes
??Do?you?use?JSX??No
??What?style?of?indentation?do?you?use??Tabs
??What?quotes?do?you?use?for?strings??Single
??What?line?endings?do?you?use??Windows
??Do?you?require?semicolons??No
??What?format?do?you?want?your?config?file?to?be?in??JavaScript

產(chǎn)生的內(nèi)容在. eslintrc.js檔案中，檔案內(nèi)容如下

module.exports?=?{
????"env":?{
????????"browser":?true,
????????"commonjs":?true,
????????"es6":?true
????},
????"extends":?"eslint:recommended",
????"parserOptions":?{
????????"sourceType":?"module"
????},
????"rules":?{
????????"indent":?[
????????????"error",
????????????"tab"
????????],
????????"linebreak-style":?[
????????????"error",
????????????"windows"
????????],
????????"quotes":?[
????????????"error",
????????????"single"
????????],
????????"semi":?[
????????????"error",
????????????"never"
????????]
????}
};

??不過這個(gè)產(chǎn)生的額檔案裡面已經(jīng)有一些設(shè)定了，把裡面的內(nèi)容大部分刪除。留下個(gè)extends，剩下的自己填就可以了

?module.exports?=?{
??????"extends":?"eslint:recommended"
??};

eslint:recommended配置，它包含了一系列核心規(guī)則，能報(bào)告一些常見的問題。

重新執(zhí)行eslint index.js，輸出如下

??10:1??error??Unexpected?console?statement??no-console
??10:1??error??'console'?is?not?defined??????no-undef

??2?problems?(2?errors,?0?warnings)

Unexpected console statement no-console --- 不能使用console
'console' is not defined ? ? no-undef ? --- console變數(shù)未定義，不能使用未定義的變數(shù)
一條一條解決，不能使用console的提示，那我們就禁用no-console就好了，在設(shè)定檔中加入rules

module.exports?=?{
????extends:?'eslint:recommended',
????rules:?{
????????'no-console':?'off',
????},
};

??設(shè)定規(guī)則寫在rules物件裡面，key表示規(guī)則名稱，value表示規(guī)則的配置。
??接著就是解決no-undef:出錯(cuò)的原因是因?yàn)镴avaScript有很多種運(yùn)行環(huán)境，例如常見的有瀏覽器和Node.js，另外還有很多軟體系統(tǒng)使用JavaScript作為其腳本引擎，例如PostgreSQL就支援使用JavaScript來寫儲(chǔ)存引擎，而這些運(yùn)行環(huán)境可能不存在console這個(gè)物件。另外在瀏覽器環(huán)境下會(huì)有window對(duì)象，而Node.js下沒有；在Node.js下會(huì)有process對(duì)象，而瀏覽器環(huán)境下沒有。
所以在設(shè)定檔中我們還需要指定程式的目標(biāo)環(huán)境：

module.exports?=?{
????extends:?'eslint:recommended',
????env:?{
????????node:?true,
????},
????rules:?{
????????'no-console':?'off',
????}
};

再重新執(zhí)行檢查時(shí)，就沒有任何提示輸出了，表示index.js已經(jīng)完全通過了檢查。

配置

配置方式有兩種：檔案配置方式、程式碼註解配置方式（建議使用檔案配置的形式，比較獨(dú)立，方便維護(hù)）。
使用檔案設(shè)定的方式：在專案的根目錄下，新建一個(gè)名為 .eslintrc 的文件，在此文件中新增一些檢查規(guī)則。

檔案設(shè)定方式

env：??你的腳本將要執(zhí)行在什麼環(huán)境中
Environment可以預(yù)設(shè)好的其他環(huán)境的全域變量，如brower、node環(huán)境變數(shù)、es6環(huán)境變數(shù)、mocha環(huán)境變數(shù)等

'env':?{
????'browser':?true,
????'commonjs':?true,
????'es6':?true
},

globals：額外的全域變數(shù)

globals:?{
????vue:?true,
????wx:?true
},

rules：開啟規(guī)則和發(fā)生錯(cuò)誤時(shí)報(bào)告的等級(jí)
規(guī)則的錯(cuò)誤等級(jí)有三種：

0或’off’：關(guān)閉規(guī)則。?
1或’warn’：打開規(guī)則，并且作為一個(gè)警告（并不會(huì)導(dǎo)致檢查不通過）。?
2或’error’：打開規(guī)則，并且作為一個(gè)錯(cuò)誤?(退出碼為1，檢查不通過)。

參數(shù)說明：?
參數(shù)1?：?錯(cuò)誤等級(jí)?
參數(shù)2?：?處理方式

設(shè)定程式碼註解方式

使用JavaScript 註解把設(shè)定資訊直接嵌入到一個(gè)檔案
範(fàn)例：

忽略?no-undef?檢查?
/*?eslint-disable?no-undef?*/

忽略?no-new?檢查?
/*?eslint-disable?no-new?*/

設(shè)置檢查?
/*eslint?eqeqeq:?off*/?
/*eslint?eqeqeq:?0*/

設(shè)定和規(guī)則的內(nèi)容有不少，有興趣的同學(xué)可以參考這裡：rules

使用共享的配置文件

??我們使用配置js文件是以extends: 'eslint:recommended'為基礎(chǔ)配置，但是大多數(shù)時(shí)候我們需要制定很多規(guī)則，在一個(gè)文件中寫入會(huì)變得很臃腫，管理起來會(huì)很麻煩。

??新建一個(gè)文件比如eslint-config-public.js，在文件內(nèi)容添加一兩個(gè)規(guī)則。

module.exports?=?{
????extends:?'eslint:recommended',
????env:?{
????????node:?true,
????},
????rules:?{
????????'no-console':?'off',
????????'indent':?[?'error',?4?],
????????'quotes':?[?'error',?'single'?],
????},
};

然后原來的.eslintrc.js文件內(nèi)容稍微變化下，刪掉所有的配置，留下一個(gè)extends。

module.exports?=?{
????extends:?'./eslint-config-public.js',
};

??這個(gè)要測(cè)試的是啥呢，就是看看限定縮進(jìn)是4個(gè)空格和使用單引號(hào)的字符串等，然后測(cè)試下，運(yùn)行eslint index.js，得到的結(jié)果是沒有問題的，但是如果在index.js中的var ret = {};前面加個(gè)空格啥的，結(jié)果就立馬不一樣了。

2:1??error??Expected?indentation?of?4?spaces?but?found?5??indent

??1?problem?(1?error,?0?warnings)
??1?error,?0?warnings?potentially?fixable?with?the?`--fix`?option.

??這時(shí)候提示第2行的是縮進(jìn)應(yīng)該是4個(gè)空格，而文件的第2行卻發(fā)現(xiàn)了5個(gè)空格，說明公共配置文件eslint-config-public.js已經(jīng)生效了。

??除了這些基本的配置以外，在npm上有很多已經(jīng)發(fā)布的ESLint配置，也可以通過安裝使用。配置名字一般都是eslint-config-為前綴，一般我們用的eslint是全局安裝的，那用的eslint-config-模塊也必須是全局安裝，不然沒法載入。

在執(zhí)行eslint檢查的時(shí)候，我們會(huì)經(jīng)常看到提示“--flx”選項(xiàng)，在執(zhí)行eslint檢查的時(shí)候添加該選項(xiàng)會(huì)自動(dòng)修復(fù)部分報(bào)錯(cuò)部分（注意這里只是部分，并不是全部）

比如我們?cè)谝?guī)則中添加一條no-extra-semi: 禁止不必要的分號(hào)。

'no-extra-semi':'error'

然后，我們?cè)趇ndex.js最后多添加一個(gè)分號(hào)

function?merge?()?{
????var?ret?=?{};
????for?(var?i?in?arguments)?{
????????var?m?=?arguments[i];
????????for?(var?j?in?m)?ret[j]?=?m[j];
????}
????return?ret;;
}

console.log(merge({a:?123},?{b:?456}));

執(zhí)行eslint index.js，得到結(jié)果如下：

??7:16??error??Unnecessary?semicolon??no-extra-semi
??7:16??error??Unreachable?code???????no-unreachable

??2?problems?(2?errors,?0?warnings)
??1?error,?0?warnings?potentially?fixable?with?the?`--fix`?option.

然后我們?cè)趫?zhí)行eslint index.js --fix就會(huì)自動(dòng)修復(fù)，index.js那個(gè)多余的分號(hào)也就被修復(fù)消失不見了。

總結(jié)

以上是我在學(xué)習(xí)eslint整理的一些資料，不算太全面，對(duì)于像我這樣的新手入門足夠了

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

推薦閱讀：

前端中排序算法實(shí)例詳解

PromiseA+的實(shí)現(xiàn)步驟詳解

以上是EsLint新手入門須知的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！