eslint總結

keke 發布于2019-08-23 13:59 / 650人閱讀

摘要：初始命令初始命令如下生成文件自動修復錯誤。第一個是錯誤級別關閉規則將規則視為一個警告不會影響退出碼將規則視為一個錯誤退出碼為可以從基礎配置中繼承已啟用的規則。一旦發現配置文件中有，它就會停止在父級目錄中尋找。

1、初始命令

eslint初始命令如下:

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

2、常用屬性

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

parserOptions
EsLint通過parserOptions，允許指定校驗的ecma的版本，及ecma的一些特性

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

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

npm install --save-dev babel-eslint

在 .eslintrc.js 配置文件中添加如下配置項代碼：

parser: "babel-eslint",

env
Environment可以預設好的其他環境的全局變量，如brower、node環境變量、es6環境變量、mocha環境變量等

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

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

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

plugins
用來引用第三方插件

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

rules:
設置具體的配置。第一個是錯誤級別：
"off" or 0 - 關閉規則
"warn" or 1 - 將規則視為一個警告（不會影響退出碼）
"error" or 2 - 將規則視為一個錯誤 (退出碼為1)

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

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

npm install eslint eslint-config-google

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

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

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

（3）eslint-config-standard

"extends": "standard",

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

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

3、代碼間的使用

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

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

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

/* eslint-disable */
...
/* eslint-enable */
設置代碼段不啟用

4、發布自己的配置

eslint允許發布自己設定的配置。被引用進來即可使用。
（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 正確載入這個模塊，我們需要執行 npm link 將這個模塊鏈接到本地全局位置：

npm link eslint-config-my

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

module.exports = {
    extends: "my", //在 extends 中， eslint-config-my 可簡寫為 my
};

代碼說明

module.exports = {
// 默認情況下，ESLint會在所有父級組件中尋找配置文件，一直到根目錄。ESLint一旦發現配置文件中有 "root": true，它就會停止在父級目錄中尋找。
  root: true,
// 對Babel解析器的包裝使其與 ESLint 兼容。
  parser: "babel-eslint",
  parserOptions: {
    // 代碼是 ECMAScript 模塊
    sourceType: "module"
  },
  env: {
    // 預定義的全局變量，這里是瀏覽器環境
    browser: true,
  },
// 擴展一個流行的風格指南，即 eslint-config-standard 
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  extends: "standard",
// required to lint *.vue files
  plugins: [
    // 此插件用來識別.html 和 .vue文件中的js代碼
    "html",
    // standard風格的依賴包
    "standard",
    // standard風格的依賴包
    "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的錯誤信息出現在終端上
通過webpack配置使用如下：

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

2、eslint-plugin-html
這個插件將會提醒模塊腳本之間模擬瀏覽器共享全局變量的行為，因為這不適用于模塊腳本。

這個插件也可以擴展文件，如：.vue，.jsx

.eslintrc.js中，添加如下配置項：

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

而對于這種用 eslint-pulgin-html 擴展的的文件我們可以使用 eslint --ext .html,.vue src 進行檢測，如果想要在開發中邊寫邊檢測，我們可以使用相應文件的loader進行處理。然后執行 npm run dev 就可以實現的功能。邊寫邊檢測的功能。

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

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

基于vue項目的知識總結

摘要：前言用有一段時間了，從用搭建項目一步步配置，到之后的研究動效這些，一直想寫些東西記錄一下做個總結，剛好趁著有空就整理一下。結語有新的知識點會更新到知識體系中，總結和心得體會會單獨寫文章詳述，努力填坑前言用vue有一段時間了，從用vue-cli搭建項目、一步步配置axios、vuex、vue-router，到之后的研究canvas、動效這些，一直想寫些東西記錄一下、做個總結，剛好趁著...

tianlai 2019-08-29 14:07 評論0 收藏0
ESLint 工作原理探討

摘要：徹底理解ESLint。原文：ESLint 工作原理探討作者：zhangwang Fundebug經授權轉載，版權歸原作者所有。 ESLint 可謂是現代前端開發過程中必備的工具了。其用法簡單，作用卻很大，使用過程中不知曾幫我減少過多少次可能的 bug。其實仔細想想前端開發過程中的必備工具似乎也沒有那么多，ESLint 做為必備之一，值得深挖，理解其工作原理。在正式討論原理...

wuyangchun 2019-05-23 14:33 評論0 收藏0
Sublime Text 中配置 Eslint 代碼檢查和自動修復

摘要：它的目標是提供一個插件化的代碼檢測工具。，有了全局的和當前項目根目錄下的規則配置文件，我們開始裝插件并測試功能吧代碼檢查這個功能需要的插件為和。但是它本身并沒有代碼檢查的功能，需要借助這樣的特定語言檢查支持。前言第一次運行 Vue 項目時被瀏覽器中滿屏的 ESLint 報錯給嚇到了，果斷禁用了該功能！再之后找了個時間認真的了解了一下 ESLint，終于有了一些概念。簡單來說，ES...

yunhao 2019-08-21 16:57 評論0 收藏0
從零開始做Vue前端架構（2）

摘要：前言這一篇，我們將接著上篇來完成配置。開發一配置我們采用的方式來創建。對了，前提我們需要全局安裝。三配置創建文件，上配置配置總結這篇不多，就做了三件事，。下一篇我們將創建項目文件目錄架構從零開始做前端架構項目完整代碼前端架構子咻前言這一篇，我們將接著上篇來完成配置eslint、babel、postcss。開發一、配置eslint 我們采用eslint --init的方式來創建e...

Brenner 2019-08-26 11:34 評論0 收藏0
從零開始做Vue前端架構（2）

摘要：前言這一篇，我們將接著上篇來完成配置。開發一配置我們采用的方式來創建。對了，前提我們需要全局安裝。三配置創建文件，上配置配置總結這篇不多，就做了三件事，。下一篇我們將創建項目文件目錄架構從零開始做前端架構項目完整代碼前端架構子咻前言這一篇，我們將接著上篇來完成配置eslint、babel、postcss。開發一、配置eslint 我們采用eslint --init的方式來創建e...

YanceyOfficial 2019-06-24 17:56 評論0 收藏0