詳解Eslint使用教程及注意事項（一）

目錄

一、簡介

二、安裝

1. 單獨使用

2. vue-cli使用

三.配置ESLint

1. 配置文件

2. 指定解析器選項

3. 指定環境

一、簡介

Eslint是一個 ECMAScript/JavaScript 語法規則和代碼風格的檢查工具，可以用來保證寫出語法正確、風格統一的代碼。

• 規範相關代碼，保證團隊開發過程中代碼格式統一
• 語法正確，避免沒必要的低級bug
• 提示刪除多餘的代碼，包括已聲明變量未使用，已聲明方法未調用過，包括沒必要的return ,或者說return 後邊有代碼這些等。
• 另外一個好處是培養自己養成良好代碼書寫
• 方便代碼閱讀

二、安裝

先決條件：Node.js (>=6.14), npm version 3+。

1. 單獨使用

你可以使用 npm 安裝 ESLint：

$ npm install eslint --save-dev

緊接着你應該設置一個配置文件eslintrc.js：

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

之後，你可以在任何文件或目錄上運行ESLint如下：

$ ./node_modules/.bin/eslint yourfile.js

2. vue-cli使用

在創建項目階段使用eslint 它會幫你全部配置好 ，如果不懂vue-cli 可以查看文檔。非常簡單。

三.配置ESLint

1. 配置文件

有兩種主要的方法來配置ESLint：

1. 配置註釋 - 使用JavaScript註釋將配置信息直接嵌入到文件中。
2. 配置文件 - 使用JavaScript，JSON或YAML文件指定整個目錄（不是主目錄）及其所有子目錄的配置信息。這可以採用.eslintrc。*文件或文件中的eslintConfig字段的形式package.json，ESLint將自動查找和讀取，也可以在命令行上指定配置文件。如果您的主目錄中（通常~/）有配置文件，則ESLint 僅在ESLint找不到任何其他配置文件時才使用它。

我們肯定是選擇配置文件方式了。

配置文件寫很多個。會按照從內層向外找知道頂層，除非遇到 root : true 停止向上查找，一層層覆蓋。出現衝突，以最外層位置優先級最高。

所以在你需要的目錄下，不希望它向上繼續查找。

本文都是配置寫在  .eslintrc.js裏（與package.json有一點點小區別，區別不大。需要時查文檔即可）

module.exports = {
  root: true
}

2. 指定解析器選項

ESLint允許你指定你想要支持的JavaScript語言選項，默認情況下，ESLint需要ECMAScript 5語法。您可以覆蓋該設置，以使用解析器選項啓用對其他ECMAScript版本以及JSX的支持。

通過使用parserOptions屬性在您的文件中設置

選項：

• ecmaVersion - 設置爲3,5（默認），6,7或8以指定要使用的ECMAScript語法的版本。您也可以設置爲2015年（與6）相同，2016年（與7相同）或2017（與8相同）使用年份命名。
• sourceType- 設置爲"script"（默認）或者"module"您的代碼位於ECMAScript模塊中。

ecmaFeatures - 一個對象，指示您想要使用哪些其他語言功能：

• globalReturn- 允許return在全球範圍內發表聲明(沒用過，不明所以)
• impliedStrict- 啓用全局嚴格模式（如果ecmaVersion是5或更高）
• jsx- 啓用JSX

指定解析器

默認情況下，ESLint使用Espree作爲其解析器，流行方案使用Babel-Eslint

module.exports = {
  root: true，
  parserOptions: {
    parser: 'babel-eslint',
    ecmaVersion: 11,
    sourceType: 'module',
    ecmaFeatures: {
      "jsx": true
    }
  }
}

3. 指定環境

環境定義了預定義的全局變量。可用的環境是：

• browser - 瀏覽器全局變量。
• node - Node.js全局變量和Node.js範圍。
• commonjs - CommonJS全局變量和CommonJS範圍（使用Browserify / WebPack的瀏覽器代碼）。
• shared-node-browser - Node.js和Browser的通用全局。
• es6- 啓用除模塊外的所有ECMAScript 6功能（這會自動將ecmaVersion解析器選項設置爲6）。
• worker - 網絡工作者全局變量。
• amd- 根據amd規範定義require()和define()作爲全局變量。
• mocha - 增加了所有的Mocha測試全局變量。
• jasmine - 爲版本1.3和2.0添加了所有Jasmine測試全局變量。
• jest - 是全局變量。
• phantomjs - PhantomJS全局變量。
• protractor - 量角器全局變量。
• qunit - QUnit全局變量。
• jquery - jQuery全局變量。
• prototypejs - Prototype.js全局變量。
• shelljs - ShellJS全局變量。
• meteor - 流星全球變量。
• mongo - MongoDB全局變量。
• applescript - AppleScript全局變量。
• nashorn - Java 8 Nashorn全局變量。
• serviceworker - 服務工作者全局變量。
• atomtest - Atom測試助手全局變量。
• embertest - 灰燼測試幫手全局。
• webextensions - 全球網絡擴展。
• greasemonkey - GreaseMonkey全局變量。

這些環境並不相互排斥，因此您可以一次定義多個環境。

可以在文件內部，配置文件中或使用--env命令行標誌指定環境。

module.exports = {
    env: {
        browser: true,
        node: true
    }
}

 

---