ESLint使用心得

2018-01-21

介绍

简单来说,ESLint是一个避免低级错误和统一代码风格的工具.

比如：在Javascript应用中，我们很难找到多余或者忘记声明的变量和方法,或者少空格,多字符。那怎样才能分析JS代码,找到bug并在一定程度上保证JS语法的正确性和规范性呢?

已经出现的解决这类问题的工具有很多,这篇文章要介绍的是这类工具中最高大上的---ESLint

ESLint具有有以下几个特性:

  • 可插拔--所有的东西都是可以随意关闭的;
  • 可配置--任意的rule都是独立的,开启后可自定义代码规范,细化配置;
  • 自由--没有特定的coding style,可以自己配置
  • 多插件--引用共享配置或自定义规则

ESLint提供检验的范围:

  • 语法错误校验
  • 不重要或丢失的标点符号，如分号
  • 多写火少些的空格
  • 没法运行到的代码块
  • 未被使用的参数提醒
  • 漏掉的结束符，如}
  • 检查变量的命名,如是否申明

安装

  1. 进入项目目录中,需要项目中没有package.json文件，需要先创建一个
npm init

局部安装ESlint

npm install eslint --save-dev
  1. 设置一个配置文件,在回答些许问题之后会生成一个.eslintrc.*文件.
    我一般选用的javascript文件,也就是使用.eslintrc.js文件并导出一个包含配置的对象.
eslint --init

当询问到代码风格时,通常默认的是standard style

  1. 在项目目录下执行如下命令来使用ESLint
eslint yourfile.js

配置

可以被配置的信息主要分为3类:

-Environments：你的 javascript 脚步将要运行在什么环境（如：nodejs，browser，commonjs等）中

-Globals：执行代码时脚步需要访问的额外全局变量

-Rules：开启某些规则，也可以设置规则的等级

指定执行环境

在配置文件中可自由的指定JS执行环境,如下面的代码表示在浏览器中运行

env: {
    browser: true,
  }

指定全局变量

可以在配置文件或注释中指定额外的全局变量

globals: {
    $: true,
    _: true
  }

指定规则

-"off" 或者 0：关闭规则

-"warn" 或者 1：打开规则，并且作为一个警告

-"error" 或者 2：打开规则，并且作为一个错误

配置文件来配置

'rules': {
    'arrow-parens': 0,
    'generator-star-spacing': 0,
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
  }

注释来配置

/* eslint-disable no-alert, no-console */
/* eslint-enable no-alert, no-console */

使用方法

命令行

eslint yourfile.js

编辑器

在VSCode中配合相应的插件

image

vue脚手架

在package.json的script中添加注释行
如下代码表示检验src路径下所有带.js .vue扩展名的文件

"lint": "eslint --ext .js,.vue src"

然后命令行运行npm run lint，就会直接显示错误

image

Powered by PuddingNote