Eslint 从入门到放弃

原创 2017年01月20日 21:22:35

前言

ESLint 由 JavaScript 红宝书 作者 Nicholas C. Zakas 编写, 2013 年发布第一个版本。 NCZ 的初衷不是重复造一个轮子,而是在实际需求得不到 JSHint 团队响应 的情况下做出的选择:以可扩展、每条规则独立、不内置编码风格为理念编写一个 lint 工具。

中文官方网站

英文官方网站

可以去上方网站进行相关资料查阅,长话短说,直接开始入门吧~

安装

建议采用全局安装方式

npm install -g eslint

初始化

如果你的项目还没有配置文件(.eslintrc)的话,可以通过指定–init参数来生成一个新的配置文件:

eslint --init

运行eslint –init后,会在当前目录下生成一个.eslintrc文件,你可以在这个文件中配置一些规则。

配置

ESLint被设计为完全可配置的,主要有两种方式来配置ESLint:

  1. 内嵌配置:将配置信息以注释的形式写在要检验的文件内
  2. 文件配置:利用javascript、json、yml语言的语法,生成名为.eslintrc.*的配置文件,将配置信息写到文件内

文件配置方式

env:你的脚本将要运行在什么环境中

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

'env': {
    'browser': true,
    'commonjs': true,
    'es6': true
  },

globals:额外的全局变量

示例:

globals: {
    vue: true,
    wx: true
  },

rules:开启规则和发生错误时报告的等级

示例:

'rules': {
    // no-var
    'no-var': 'error',
    // 要求或禁止 var 声明中的初始化
    'init-declarations': 2,
    // 强制使用单引号
    'quotes': ['error', 'single'],
    // 要求或禁止使用分号而不是 ASI
    'semi': ['error', 'never'],
    // 禁止不必要的分号
    'no-extra-semi': 'error',
    // 强制使用一致的换行风格
    'linebreak-style': ['error', 'unix'],
    // 空格2个
    'indent': ['error', 2, {'SwitchCase': 1}],
    // 指定数组的元素之间要以空格隔开(,后面), never参数:[ 之前和 ] 之后不能带空格,always参数:[ 之前和 ] 之后必须带空格
    'array-bracket-spacing': [2, 'never'],
    // 在块级作用域外访问块内定义的变量是否报错提示
    'block-scoped-var': 0,
    // if while function 后面的{必须与if在同一行,java风格。
    'brace-style': [2, '1tbs', {'allowSingleLine': true}],
    // 双峰驼命名格式
    'camelcase': 2,
    // 数组和对象键值对最后一个逗号, never参数:不能带末尾的逗号, always参数:必须带末尾的逗号, 
    'comma-dangle': [2, 'never'],
    // 控制逗号前后的空格
    'comma-spacing': [2, {'before': false, 'after': true}],
    // 控制逗号在行尾出现还是在行首出现
    'comma-style': [2, 'last'],
    // 圈复杂度
    'complexity': [2, 9],
    // 以方括号取对象属性时,[ 后面和 ] 前面是否需要空格, 可选参数 never, always
    'computed-property-spacing': [2, 'never'],
    // TODO 关闭 强制方法必须返回值,TypeScript强类型,不配置
    // 'consistent-return': 0
  }

规则的错误等级有三种:

0或'off':关闭规则。
1或'warn':打开规则,并且作为一个警告(并不会导致检查不通过)。
2或'error':打开规则,并且作为一个错误 (退出码为1,检查不通过)。

参数说明:

参数1 : 错误等级
参数2 : 处理方式

"comma-dangle": ["error", "never"],

上述配置只是简要将最基本的一些配置罗略出来,如果有需要建议去上方官网中查看。

配置代码注释方式

有时我们可能要在代码中忽略eslint的某种检查,或者加入某种特定检查,此时我们可以用如下的方式:

示例:

  1. 忽略 no-undef 检查
/* eslint-disable no-undef */ 
  1. 忽略 no-new 检查
/* eslint-disable no-new */ 
  1. 设置检查
/*eslint eqeqeq: off*/
/*eslint eqeqeq: 0*/

eslint 检查指令

  1. 检查且修复
eslint * --fix
  1. 检查指定文件
eslint app.js --fix

开发工具上的使用

WebStorm

Preferences -> Languages & Frameworks -> JavaScript -> Code Quality Tools -> Eslint -> Enable (勾选) -> Apply -> OK

Atom

安装linter-eslint

Sublime

安装SublimeLinter

安装SublimeLinter-contrib-eslint

结语

Eslint 对于每一个开发者而言都是非常值得使用的,这样会强制你写出高质量且整洁的代码,所以建议无论大家是前端开发者、weex开发者、还是小程序开发者都建议大家讲Eslint集成进入,来提高项目的质量。

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/walid1992/article/details/54633760

Eslint 配置及规则说明

中文官方网站安装可以全局安装,也可以在项目下面安装。 如下是在项目中安装示例,只需要在 package.json 中添加如下配置,并进行安装: “eslint”: “^4.11.0” 配置配置方...
  • hsl0530hsl
  • hsl0530hsl
  • 2017-11-21 17:33:03
  • 2167

ESLint深入使用

ESLint我眼中的ESLint我们先来说说ESLint是什么,能够做什么工作 官网的简介如下:The pluggable listing utility for JavaScript and JS...
  • xueboren001
  • xueboren001
  • 2016-11-29 09:48:24
  • 10669

ESLint的一些配置项解读

example-one eslint完整的校验规则可以访问这里! 1. 安装eslint:$ npm install eslint –save-dev2. 使用eslint –init生成一...
  • wangongda
  • wangongda
  • 2018-01-18 19:36:47
  • 492

Eslint 规则说明

"no-alert": 0,//禁止使用alert confirm prompt "no-array-constructor": 2,//禁止使用数组构造器 "no-bitwise": 0,//禁止使...
  • helpzp2008
  • helpzp2008
  • 2016-05-26 15:03:56
  • 44889

webstorm nodejs ESLint 简单配置

ESLint 简介在团队协作中,为避免低级 Bug、产出风格统一的代码,会预先制定编码规范。使用 Lint 工具和代码风格检测工具,则可以辅助编码规范执行,有效控制代码质量。在以前的项目中,我们选择 ...
  • whitehack
  • whitehack
  • 2016-09-03 13:54:38
  • 22705

eslint配置注意事项

4:1 error Parsing error: The keyword ‘import’ is reserved 确保.eslintrc文件存在,并且内容为 { "extends": "a...
  • suwu150
  • suwu150
  • 2017-11-20 19:28:52
  • 1985

ESLint (二)配置文件

一、配置方式 注释形式:使用 JavaScript 注释将配置信息直接嵌入到文件中 文件形式 .eslintrc.js .eslintrc.yaml 或者 .eslintrc.yml .eslint...
  • destinytaoer
  • destinytaoer
  • 2017-11-30 22:52:16
  • 452

ESLint规则配置说明

"no-alert": 0,//禁止使用alert confirm prompt "no-array-constructor": 2,//禁止使用数组构造器 "no-bitwise": 0,//禁...
  • xiongyayun428
  • xiongyayun428
  • 2017-03-07 16:02:53
  • 977

eslint

es6笔记 习自 阮一峰开源项目  ESLint的使用 ESLint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。 首先,安装 ESLint。 $ n...
  • qiphon3650
  • qiphon3650
  • 2017-11-12 15:20:34
  • 2006

EsLint规范

"no-alert": 0,//禁止使用alert confirm prompt "no-array-constructor": 2,//禁止使用数组构造器 "no-bitwise": 0,//禁止使...
  • baidu_37287649
  • baidu_37287649
  • 2017-01-15 21:43:44
  • 542
收藏助手
不良信息举报
您举报文章:Eslint 从入门到放弃
举报原因:
原因补充:

(最多只允许输入30个字)