详解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
    }
}

 

---