eslint总结

keke 发布于2019-08-23 13:59 / 626人阅读

摘要：初始命令初始命令如下生成文件自动修复错误。第一个是错误级别关闭规则将规则视为一个警告不会影响退出码将规则视为一个错误退出码为可以从基础配置中继承已启用的规则。一旦发现配置文件中有，它就会停止在父级目录中寻找。

1、初始命令

eslint初始命令如下:

(1) eslint --init：生成.eslintrc.js文件
(2) eslint src --fix: 自动修复错误。但是只能修复基础的不影响代码逻辑的错误。其他像no-unused-vars这种错误只能手动修改

2、常用属性

eslint的常用属性： env、extends、parserOptions、plugins、rules等。

parserOptions
EsLint通过parserOptions，允许指定校验的ecma的版本，及ecma的一些特性

"parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },

parser
指定解析器
EsLint默认使用esprima做脚本解析，在使用es6代码中，需要改成babel-eslint。
babel-eslint 解析器是一种使用频率很高的解析器，因为现在很多公司的很多项目目前都使用了es6，为了兼容性考虑基本都使用babel插件对代码进行编译。而用babel编译后的代码使用 babel-eslint 这款解析器可以避免不必要的麻烦。
babel-eslint 安装命令：

npm install --save-dev babel-eslint

在 .eslintrc.js 配置文件中添加如下配置项代码：

parser: "babel-eslint",

env
Environment可以预设好的其他环境的全局变量，如brower、node环境变量、es6环境变量、mocha环境变量等

"env": {
        "browser": true,
        "node": true
    }

如果想使用插件中的环境变量，你可以使用plugins指定：

{
      "plugins": ["example"],
      "env": {
          "example/custom": true
      }
  }

plugins
用来引用第三方插件

"plugins": [
        "plugin1",
        "eslint-plugin-plugin2"
    ]

rules:
设置具体的配置。第一个是错误级别：
"off" or 0 - 关闭规则
"warn" or 1 - 将规则视为一个警告（不会影响退出码）
"error" or 2 - 将规则视为一个错误 (退出码为1)

{
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
}

extends
可以从基础配置中继承已启用的规则。eslint官方提供了3种预安装包：
（1）eslint-config-google

npm install eslint eslint-config-google

(2)eslint-config-airbnb
Airbnb标准,它依赖eslint, eslint-plugin-import, eslint-plugin-react, and eslint-plugin-jsx-a11y等插件。
执行以下命令查看所依赖的各个版本：

npm info "eslint-config-airbnb@latest" peerDependencies

知道依赖后，安装依赖包。
eslint-config-airbnb-base 包含了针对 ES6+ 代码的检查
eslint-config-airbnb 在 eslint-config-airbnb-base 的基础上增加了对 react 和 jsx 语法的检查。

（3）eslint-config-standard

"extends": "standard",

global
指定全局变量。true代表允许重写、false代表不允许重写

"globals": {
  "var1": true,
  "var2": false
}

3、代码间的使用

eslint的注释
可以在代码间加注释，设置是否启用eslint

var a = 1; //eslint-disable-line 设置该行不启用

//eslint-disable-next-line 设置下行不启用
var a = 1

/* eslint-disable */
...
/* eslint-enable */
设置代码段不启用

4、发布自己的配置

eslint允许发布自己设定的配置。被引用进来即可使用。
（1）my-config.js

module.exports = {
    extends: "eslint:recommended",
    env: {
        node: true,
        es6: true
    },
    rules: {
        "no-console": "off",
        "indent": [ "error", 4 ],
        "quotes": [ "error", "single" ]
    }
};

(2) package.json

{
    "name": "eslint-config-my",
    "version": "0.0.1",
    "main":"my-config.js"
}

为了能让 eslint 正确载入这个模块，我们需要执行 npm link 将这个模块链接到本地全局位置：

npm link eslint-config-my

然后将文件 .eslintrc.js 改成：

module.exports = {
    extends: "my", //在 extends 中， eslint-config-my 可简写为 my
};

代码说明

module.exports = {
// 默认情况下，ESLint会在所有父级组件中寻找配置文件，一直到根目录。ESLint一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找。
  root: true,
// 对Babel解析器的包装使其与 ESLint 兼容。
  parser: "babel-eslint",
  parserOptions: {
    // 代码是 ECMAScript 模块
    sourceType: "module"
  },
  env: {
    // 预定义的全局变量，这里是浏览器环境
    browser: true,
  },
// 扩展一个流行的风格指南，即 eslint-config-standard 
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  extends: "standard",
// required to lint *.vue files
  plugins: [
    // 此插件用来识别.html 和 .vue文件中的js代码
    "html",
    // standard风格的依赖包
    "standard",
    // standard风格的依赖包
    "promise"
  ],
// add your custom rules here
  "rules": {
    // allow paren-less arrow functions
    "arrow-parens": 0,
    // allow async-await
    "generator-star-spacing": 0,
    // allow debugger during development
    "no-debugger": process.env.NODE_ENV === "production" ? 2 : 0
  }
}

常用插件

1、eslint-friendly-formatter 可以让eslint的错误信息出现在终端上
通过webpack配置使用如下：

{
  test: /.(js|vue)$/,
  loader: "eslint-loader",
  enforce: "pre",
  include: [resolve("src"), resolve("test")],
  options: {
    formatter: require("eslint-friendly-formatter")
  }
},

2、eslint-plugin-html
这个插件将会提醒模块脚本之间模拟浏览器共享全局变量的行为，因为这不适用于模块脚本。

这个插件也可以扩展文件，如：.vue，.jsx

.eslintrc.js中，添加如下配置项：

settings: {
  "html/html-extensions": [".html", ".vue"],
  "html/indent": "+2",
},

而对于这种用 eslint-pulgin-html 扩展的的文件我们可以使用 eslint --ext .html,.vue src 进行检测，如果想要在开发中边写边检测，我们可以使用相应文件的loader进行处理。然后执行 npm run dev 就可以实现的功能。边写边检测的功能。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99901.html

基于vue项目的知识总结

摘要：前言用有一段时间了，从用搭建项目一步步配置，到之后的研究动效这些，一直想写些东西记录一下做个总结，刚好趁着有空就整理一下。结语有新的知识点会更新到知识体系中，总结和心得体会会单独写文章详述，努力填坑前言用vue有一段时间了，从用vue-cli搭建项目、一步步配置axios、vuex、vue-router，到之后的研究canvas、动效这些，一直想写些东西记录一下、做个总结，刚好趁着...

tianlai 2019-08-29 14:07 评论0 收藏0
ESLint 工作原理探讨

摘要：彻底理解ESLint。原文：ESLint 工作原理探讨作者：zhangwang Fundebug经授权转载，版权归原作者所有。 ESLint 可谓是现代前端开发过程中必备的工具了。其用法简单，作用却很大，使用过程中不知曾帮我减少过多少次可能的 bug。其实仔细想想前端开发过程中的必备工具似乎也没有那么多，ESLint 做为必备之一，值得深挖，理解其工作原理。在正式讨论原理...

wuyangchun 2019-05-23 14:33 评论0 收藏0
Sublime Text 中配置 Eslint 代码检查和自动修复

摘要：它的目标是提供一个插件化的代码检测工具。，有了全局的和当前项目根目录下的规则配置文件，我们开始装插件并测试功能吧代码检查这个功能需要的插件为和。但是它本身并没有代码检查的功能，需要借助这样的特定语言检查支持。前言第一次运行 Vue 项目时被浏览器中满屏的 ESLint 报错给吓到了，果断禁用了该功能！再之后找了个时间认真的了解了一下 ESLint，终于有了一些概念。简单来说，ES...

yunhao 2019-08-21 16:57 评论0 收藏0
从零开始做Vue前端架构（2）

摘要：前言这一篇，我们将接着上篇来完成配置。开发一配置我们采用的方式来创建。对了，前提我们需要全局安装。三配置创建文件，上配置配置总结这篇不多，就做了三件事，。下一篇我们将创建项目文件目录架构从零开始做前端架构项目完整代码前端架构子咻前言这一篇，我们将接着上篇来完成配置eslint、babel、postcss。开发一、配置eslint 我们采用eslint --init的方式来创建e...

Brenner 2019-08-26 11:34 评论0 收藏0
从零开始做Vue前端架构（2）

摘要：前言这一篇，我们将接着上篇来完成配置。开发一配置我们采用的方式来创建。对了，前提我们需要全局安装。三配置创建文件，上配置配置总结这篇不多，就做了三件事，。下一篇我们将创建项目文件目录架构从零开始做前端架构项目完整代码前端架构子咻前言这一篇，我们将接着上篇来完成配置eslint、babel、postcss。开发一、配置eslint 我们采用eslint --init的方式来创建e...

YanceyOfficial 2019-06-24 17:56 评论0 收藏0