eslint總結(jié)

keke 發(fā)布于2019-08-23 13:59 / 648人閱讀

摘要：初始命令初始命令如下生成文件自動(dòng)修復(fù)錯(cuò)誤。第一個(gè)是錯(cuò)誤級(jí)別關(guān)閉規(guī)則將規(guī)則視為一個(gè)警告不會(huì)影響退出碼將規(guī)則視為一個(gè)錯(cuò)誤退出碼為可以從基礎(chǔ)配置中繼承已啟用的規(guī)則。一旦發(fā)現(xiàn)配置文件中有，它就會(huì)停止在父級(jí)目錄中尋找。

1、初始命令

eslint初始命令如下:

(1) eslint --init：生成.eslintrc.js文件
(2) eslint src --fix: 自動(dòng)修復(fù)錯(cuò)誤。但是只能修復(fù)基礎(chǔ)的不影響代碼邏輯的錯(cuò)誤。其他像no-unused-vars這種錯(cuò)誤只能手動(dòng)修改

2、常用屬性

eslint的常用屬性： env、extends、parserOptions、plugins、rules等。

parserOptions
EsLint通過(guò)parserOptions，允許指定校驗(yàn)的ecma的版本，及ecma的一些特性

"parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },

parser
指定解析器
EsLint默認(rèn)使用esprima做腳本解析，在使用es6代碼中，需要改成babel-eslint。
babel-eslint 解析器是一種使用頻率很高的解析器，因?yàn)楝F(xiàn)在很多公司的很多項(xiàng)目目前都使用了es6，為了兼容性考慮基本都使用babel插件對(duì)代碼進(jìn)行編譯。而用babel編譯后的代碼使用 babel-eslint 這款解析器可以避免不必要的麻煩。
babel-eslint 安裝命令：

npm install --save-dev babel-eslint

在 .eslintrc.js 配置文件中添加如下配置項(xiàng)代碼：

parser: "babel-eslint",

env
Environment可以預(yù)設(shè)好的其他環(huán)境的全局變量，如brower、node環(huán)境變量、es6環(huán)境變量、mocha環(huán)境變量等

"env": {
        "browser": true,
        "node": true
    }

如果想使用插件中的環(huán)境變量，你可以使用plugins指定：

{
      "plugins": ["example"],
      "env": {
          "example/custom": true
      }
  }

plugins
用來(lái)引用第三方插件

"plugins": [
        "plugin1",
        "eslint-plugin-plugin2"
    ]

rules:
設(shè)置具體的配置。第一個(gè)是錯(cuò)誤級(jí)別：
"off" or 0 - 關(guān)閉規(guī)則
"warn" or 1 - 將規(guī)則視為一個(gè)警告（不會(huì)影響退出碼）
"error" or 2 - 將規(guī)則視為一個(gè)錯(cuò)誤 (退出碼為1)

{
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
}

extends
可以從基礎(chǔ)配置中繼承已啟用的規(guī)則。eslint官方提供了3種預(yù)安裝包：
（1）eslint-config-google

npm install eslint eslint-config-google

(2)eslint-config-airbnb
Airbnb標(biāo)準(zhǔn),它依賴eslint, eslint-plugin-import, eslint-plugin-react, and eslint-plugin-jsx-a11y等插件。
執(zhí)行以下命令查看所依賴的各個(gè)版本：

npm info "eslint-config-airbnb@latest" peerDependencies

知道依賴后，安裝依賴包。
eslint-config-airbnb-base 包含了針對(duì) ES6+ 代碼的檢查
eslint-config-airbnb 在 eslint-config-airbnb-base 的基礎(chǔ)上增加了對(duì) react 和 jsx 語(yǔ)法的檢查。

（3）eslint-config-standard

"extends": "standard",

global
指定全局變量。true代表允許重寫(xiě)、false代表不允許重寫(xiě)

"globals": {
  "var1": true,
  "var2": false
}

3、代碼間的使用

eslint的注釋
可以在代碼間加注釋，設(shè)置是否啟用eslint

var a = 1; //eslint-disable-line 設(shè)置該行不啟用

//eslint-disable-next-line 設(shè)置下行不啟用
var a = 1

/* eslint-disable */
...
/* eslint-enable */
設(shè)置代碼段不啟用

4、發(fā)布自己的配置

eslint允許發(fā)布自己設(shè)定的配置。被引用進(jìn)來(lái)即可使用。
（1）my-config.js

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

(2) package.json

{
    "name": "eslint-config-my",
    "version": "0.0.1",
    "main":"my-config.js"
}

為了能讓 eslint 正確載入這個(gè)模塊，我們需要執(zhí)行 npm link 將這個(gè)模塊鏈接到本地全局位置：

npm link eslint-config-my

然后將文件 .eslintrc.js 改成：

module.exports = {
    extends: "my", //在 extends 中， eslint-config-my 可簡(jiǎn)寫(xiě)為 my
};

代碼說(shuō)明

module.exports = {
// 默認(rèn)情況下，ESLint會(huì)在所有父級(jí)組件中尋找配置文件，一直到根目錄。ESLint一旦發(fā)現(xiàn)配置文件中有 "root": true，它就會(huì)停止在父級(jí)目錄中尋找。
  root: true,
// 對(duì)Babel解析器的包裝使其與 ESLint 兼容。
  parser: "babel-eslint",
  parserOptions: {
    // 代碼是 ECMAScript 模塊
    sourceType: "module"
  },
  env: {
    // 預(yù)定義的全局變量，這里是瀏覽器環(huán)境
    browser: true,
  },
// 擴(kuò)展一個(gè)流行的風(fēng)格指南，即 eslint-config-standard 
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  extends: "standard",
// required to lint *.vue files
  plugins: [
    // 此插件用來(lái)識(shí)別.html 和 .vue文件中的js代碼
    "html",
    // standard風(fēng)格的依賴包
    "standard",
    // standard風(fēng)格的依賴包
    "promise"
  ],
// add your custom rules here
  "rules": {
    // allow paren-less arrow functions
    "arrow-parens": 0,
    // allow async-await
    "generator-star-spacing": 0,
    // allow debugger during development
    "no-debugger": process.env.NODE_ENV === "production" ? 2 : 0
  }
}

常用插件

1、eslint-friendly-formatter 可以讓eslint的錯(cuò)誤信息出現(xiàn)在終端上
通過(guò)webpack配置使用如下：

{
  test: /.(js|vue)$/,
  loader: "eslint-loader",
  enforce: "pre",
  include: [resolve("src"), resolve("test")],
  options: {
    formatter: require("eslint-friendly-formatter")
  }
},

2、eslint-plugin-html
這個(gè)插件將會(huì)提醒模塊腳本之間模擬瀏覽器共享全局變量的行為，因?yàn)檫@不適用于模塊腳本。

這個(gè)插件也可以擴(kuò)展文件，如：.vue，.jsx

.eslintrc.js中，添加如下配置項(xiàng)：

settings: {
  "html/html-extensions": [".html", ".vue"],
  "html/indent": "+2",
},

而對(duì)于這種用 eslint-pulgin-html 擴(kuò)展的的文件我們可以使用 eslint --ext .html,.vue src 進(jìn)行檢測(cè)，如果想要在開(kāi)發(fā)中邊寫(xiě)邊檢測(cè)，我們可以使用相應(yīng)文件的loader進(jìn)行處理。然后執(zhí)行 npm run dev 就可以實(shí)現(xiàn)的功能。邊寫(xiě)邊檢測(cè)的功能。

云服務(wù)器 GPU云服務(wù)器 ESLint 年終總結(jié) 網(wǎng)絡(luò)總結(jié) 方法總結(jié)

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/99901.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

keke

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

用Python爬取了幾千條相親文案，終于發(fā)現(xiàn)了告別單身的秘密

閱讀 3228·2021-11-11 16:55
Burp+夜神模擬器app抓包(一次成功)

閱讀 2477·2021-10-13 09:39
工信部召開(kāi)行政指導(dǎo)會(huì)，要求阿里、騰訊等企業(yè)限期解除對(duì)鏈接的屏蔽

閱讀 2408·2021-09-13 10:27
Angular2 控制視圖的封裝模式

閱讀 2162·2019-08-30 15:55
HTML CSS + DIV實(shí)現(xiàn)排版布局

閱讀 3086·2019-08-30 15:54
前端每日實(shí)戰(zhàn)：121# 視頻演示如何用 CSS 和 D3 創(chuàng)作一個(gè)小魚(yú)游動(dòng)的交互動(dòng)畫(huà)

閱讀 3132·2019-08-29 16:34
a標(biāo)簽樣式繼承的問(wèn)題

閱讀 1826·2019-08-29 12:41
14天入門(mén)JavaScript-day three

閱讀 1071·2019-08-29 11:33

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

eslint總結(jié)

相關(guān)文章

基于vue項(xiàng)目的知識(shí)總結(jié)

ESLint 工作原理探討

**Sublime Text 中配置 Eslint 代碼檢查和自動(dòng)修復(fù)**

從零開(kāi)始做Vue前端架構(gòu)（2）

從零開(kāi)始做Vue前端架構(gòu)（2）

發(fā)表評(píng)論

0條評(píng)論

keke

男|高級(jí)講師

TA的文章

用Python爬取了幾千條相親文案，終于發(fā)現(xiàn)了告別單身的秘密

Burp+夜神模擬器app抓包(一次成功)

工信部召開(kāi)行政指導(dǎo)會(huì)，要求阿里、騰訊等企業(yè)限期解除對(duì)鏈接的屏蔽

Angular2 控制視圖的封裝模式

HTML CSS + DIV實(shí)現(xiàn)排版布局

前端每日實(shí)戰(zhàn)：121# 視頻演示如何用 CSS 和 D3 創(chuàng)作一個(gè)小魚(yú)游動(dòng)的交互動(dòng)畫(huà)

a標(biāo)簽樣式繼承的問(wèn)題

14天入門(mén)JavaScript-day three

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

eslint總結(jié)

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！