eslint 簡單使用

eslint是在 ECMAScript/JavaScript 代碼中識別和報告模式匹配的工具，它的目標是保證代碼的一致性和避免錯誤。

兩種安裝方式

• 全局

適用于所有項目文件

先全局安裝ESLint插件

$ npm install -g eslint

初始化配置文件

eslint --init

使用

eslint file.js

• 本地

  項目里使用

  npm install eslint --save-dev
  

react plugins

npm install --save-dev eslint-plugin-react

目前項目中用的airbnb代碼規范

npm install --save-dev eslint-config-airbnb

項目中初始化配置文件

./node_modules/.bin/eslint --init

然后選擇使用airbnb的方式

? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? AirBnB
? What format do you want your config file to be in? JavaScript

運行

./node_modules/.bin/eslint file.js

autofix

只支持空格分號等

鏈接

./node_modules/.bin/eslint file.js --fix

配置文件

• init 初始化配置文件后，項目中會得到一個.eslintrc.js的文件。當然還會有.json YAML等格式的。

  module.exports = {
      "extends": "airbnb",//拓展規則
      "plugins": [//插件
            "react",
            "jsx-a11y",
            "import"
      ],
      "env": {//指定環境
        "browser": true,
        "node": true
      },
       "rules": {//規則
          "semi": "error"
      }
  }
  

• package.json中使用

  "name": "mypackage",
  "version": "0.0.1",
  "eslintConfig": {
      "plugins": ["react"],
      "env": {
          "browser": true
      }
  }
  

Rules

• “off” 或 0 - 關閉規則
• “warn” 或 1 - 開啟規則，使用警告級別的錯誤：warn (不會導致程序退出)
• “error” 或 2 - 開啟規則，使用錯誤級別的錯誤：error (當被觸發的時候，程序會退出)

如果采用了拓展規則，比如說airbnb，會有默認的，再node_module中都有rules，那配置文件就不用再多寫了。但是我們可以寫一些，覆蓋拓展里的，以達到關閉某些規則的作用。

例如

這些規則都可以google一下

"rules": {
  "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
  "react/forbid-prop-types": 0,
  "react/no-array-index-key": 0,
  "react/jsx-wrap-multilines": 0,
  "react/prop-types": 1,
  "jsx-a11y/no-static-element-interactions": 0,
  "no-underscore-dangle": 0,
  "no-script-url": 0,
  "class-methods-use-this": 0,
  "no-constant-condition": 0,
  "max-len": 0,
  "no-nested-ternary": 0,
  "semi": 1,
  "space-before-function-paren": 1
}

.eslintignore

可以在項目根目錄創建，告訴ESLint忽略某些文件或者目錄。相當于.gitignore都是純文本文件。

例如

# 注釋，忽略文件
node_modules
**/.js
build

配合webpack的使用

安裝一個eslint-loader 的loader

module:{
    preLoaders: [
      {test: /\.js$/, loader: "eslint-loader", exclude: /node_modules/}
    ],
    loaders:[
    {
        test:/\.jsx?$/,
        exclude:/node_modules/,
        loader:'babel'
    },
    {
        test:/\.css$/,
        loaders:['style','css'],
        include:'/dist'
    }]
}

結合pre-commit使用

有時候可能我們的項目后入eslint，之前的文件太多，改不過來，但是卻要慢慢加入。可以加一個git的hooks。

• 項目本地安裝

  npm install --save-dev pre-commit
  

• package.json配置

例如

{
    "script": {
        "lint": "git diff-tree --no-commit-id --name-only -r $REVISION | xargs pre-commit run --files."

    },
    "pre-commit": [
        "lint"
    ],
}

pre-commit

• git鉤子(可自定義)

  鉤子都被存儲在Git目錄下的hooks目錄中

  cd .git/hooks && ls
  

這些鉤子的功能主要分為提交工作流鉤子、電子郵件工作流鉤子和其它鉤子。比如提交代碼之前檢查，提交給同組開發人員發郵件等等。

git hooks

當然eslint也可以結合gulp，以及在編譯器中使用。這些從網上都可以查到。比如我現在atom用到的就直接下載bao包了

apm install linter-eslint

 

來自：https://sunyongjian.github.io/2017/02/17/eslint簡單使用/