ESLint深入使用

ESLint简介

我眼中的ESLint

我们先来说说ESLint是什么，能够做什么工作
官网的简介如下:

The pluggable listing utility for JavaScript and JSX.
支持插件的Javascript和JSX的代码检测工具

官网比较含蓄,似乎功能也不过如此。不过,看ESLint不能只看它本身的功能，千万要注意<插件>这个字眼。好了，和大家说说我眼中的ESLint能够做什么事情。

• 功能一: 检测代码合法性
  支持JavaScript、JSX、ES6、Html、JSDoc、posts、vue、React、AngularJS、React Native、mocha等等。当然了，除了JavaScript与JSX，其他的都需要相应的插件来配合.可在此查看ESLint的插件列表,该列表并非全部的ESLint插件,有兴趣的同鞋还可以在Github上搜索下
  
  
• 功能二: 配合流行的前端构建工具
  年龄大点的grunt、使用广泛的gulp、新秀webpack以及browserify、rollup、ember-cli等等都有ESLint的封装版本，比如 gulp-eslint、eslint-loader等.具体支持列表可参考这里
  
  
• 功能三: 代码格式化(按照eslint配置文件的规范设置)
  eslint –fix:用该命令可依照ESLint的配置来格式化代码，你怎么定义代码规范的，他就怎么格式化。可自动格式化规则的列表, 一些复杂的代码错误,我想目前还没有任何一款软件可以帮助我们自动格式化的.
  
  
• 功能四: 结合编辑实现 代码时实检验、自动格式化
  需要结合编辑器使用, 自己亲手试验了Sublime、Atom、Webstorm有一个编辑器, 在文章末尾我会把各个编辑器上的效果截图show给大家.截图包含,时实代码提示、代码自动格式化等.编辑器支持列表
  
  
• 功能五:生成代码规范检测报告
  可生成各种格式的报告，也可同时生成多种格式的报告.html、markdown等格式。自己比较喜欢的插件,美化命令行输出的插件eslint-friendly-formatter、eslint-formatter-pretty，支持Markdown格式的插件eslint-formatter-markdown
• 功能六: 结合Git Hook来实现代码检测不通过则不允许提交
  ESLint pre-commit 钩子 demo、ESLint 只检验git缓存区的代码 demo
  Git hook管理工具

下面谈谈具体怎么使用ESLint

插件安装

建议全局安装ESLint及其常用插件:

$ npm i -g aslant babel eslint-plugin-babel eslint-plugin-standard eslint-config-standard eslint-plugin-promise eslint-config-standard  // babel-eslint可能会需要管理员权限，调用系统syslink来创建软链接 sudo npm i -D babel-eslint

当然如果你不想全局安装也可使用 npm -i -D 来局部安装

ESLint配置

ESLint支持以下配置方式:

• 命令行参数
• package.json 中的 eslintConfig
• .eslintrc.*配置文件: 支持json、js等
• 文件内部 comment 注释, 如下:

const NOOP_FN = function() {} // eslint-disable-line space-before-function-paren  //单行注释,只作用于该行

const NOOP_FN = function() {} // eslint-disable space-before-function-paren // 该行以下都适用该规则

• .eslintignore: 可设置忽略文件。默认为/node_module/* /bower_componenets/*

个人建议, 使用单独的eslintrc配置文件,这样别人一看代码结构就知道使用了eslint来校验代码，最好是js文件,json文件是不支持注释的。如果放在eslintConfig中而自己又喜欢尝试不同的规则设置, 则会导致 package.json 的git diff.

设置ESLint支持ES6语法

编辑.eslintrc.js文件如下:

module.exports = {
    "env": {
      "browser": true,
      "es6": true
    },
    "extends": "standard",
    "plugins": [
        "standard",
        "promise"
    ],
    "parser": "babel-eslint",
    "parserOptions": {
      "sourceType": "module",
      "ecmaFeatures": {
      }
    },
    "rules": {
      "indent": [1, 2],
      "linebreak-style": [2, "unix"],
      "quotes": [1, "single"],
      "semi": [ 1, "never"],
      "semi-spacing": 0,
      "no-extra-semi": 1,
      "no-unused-vars": [ 1, { "vars": "all", "args": "none" }
      ],
      "no-trailing-spaces": 2,
      "no-console": 1
    }
};

具体规则可依据自己的喜好与项目的要求来改。
推荐 plugins 设置为standard(依赖于eslint-plugin-standard插件), 然后自己再针对某个规则来单独设置覆盖.
在 package.json 文件中的scripts字段中配置如下3个属性即可:

"eslint": "eslint --format './node_modules/eslint-friendly-formatter/index.js' ./src/* "

"eslint_html": "eslint --format html ./src/* -o ./dist/eslint/index.html"

"eslint_markdown": "eslint --format './node_modules/eslint-formatter-markdown/markdown.js' ./src/*  -o ./dist/eslint/index.md"

至此ESLint配置完毕，可依次执行如下命令，来输出 代码校验结果、或生成校验报告

$ npm run eslint    
$ npm run eslint_html 
$ npm run eslint_markdown 

ESLint结合编辑器实现时实校验、自动格式化

Sublime-3

安装插件: SublimeLinter、ESlint-formatter两个插件:并设置SublimeLinter使用ESLint来校验:
Sublime Text --> preferences --> Package settings --> Sublime Linter --> settings - User。该按钮会打开一个配置文件，给该配置文件添加添加如下设置:

{
  "user": {
    "linters": {
      "eslint": { "@disable":false, "args": [], "excludes": [] }
    },
    "show_errors_on_save": true  //为true时，保存文件时，会弹出该文件所有不规范的列表及具体规则名,如下图
  }
}

保存该配置文件, 即会生效。此时打开一个js文件，界面会如下:


保存js文件时,效果图如下:



Command+Shift+P: 搜索aslant 出现 ESLint Formatter: Format this file 点击确定进行该文件的格式化



格式化结果如下:

Atom

安装插件：linter、linter-eslint、eslint-fixer 三个插件, 安装完成重启Atom即可生效

Atom 中的 eslint 信息提示效果如下:



Atom 中进行 代码格式化 的操作:



Atom 中 格式化后效果:

Webstorm

由于个人很少使用 Webstorm ，所以在测试过程中出了不少问题，不知道是因为个人设置问题，还是Webstorm自身的问题，有兴趣的同鞋可以自己研究分享下