详解Eslint使用教程及注意事项（一）

小咪咪 2023-02-13 03:50 14阅读 0赞

**目录**

一、简介

二、安装

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`\- 启用全局[严格模式][Link 1]（如果`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
        }
    }

--------------------

[Node.js]: https://nodejs.org/en/
[package.json]: https://docs.npmjs.com/files/package.json
[Link 1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
[JSX]: http://facebook.github.io/jsx/
[Espree]: https://github.com/eslint/espree
[amd]: https://github.com/amdjs/amdjs-api/wiki/AMD