文档章节

atom使用全局配置ESLint

阿振
 阿振
发布于 2016/10/13 09:49
字数 1347
阅读 29
收藏 0

ESLint是一个Javascript静态检查工具,它可以帮你养成良好的编程习惯,使你的javascript代码达到国际化的水准。ESLint是所有Javascrpt静态检查工具里最晚诞生的一个,之前还曾经有过JSLint以及JSHint等工具,但JSLint和JSHint都是用的一套标准,在目前这个前端技术飞速发展的时代已经显得有点落伍。ESLint的好处是既提供了国际大厂的标准,同时又给了你自定义标准的可能性。ESLint的推荐设置方式是按项目设置,但是如果我们有很多个不同的javascript项目的话,一个一个去设置未免太麻烦,所以在这里介绍的是全局设置方法,一次设置,所有项目全部采用同一标准。

首先,在atom中安装linter插件和linter-eslint插件。安装完成之后,linter-eslint的缺省设置有2个地方需要修改:

  1. Disable when no ESLint config is found的对钩去掉。这个选项的意思是说:如果你的javascript项目文件夹中没有.eslintrc这样的配置文件的话,那么ESLint就不起作用。在这里,我们要设置为全局lint,不需要在每个javascript文件夹中包含.eslintrc文件,所以要把它去掉,否则由于我们的项目文件夹中没有.eslintrc文件,ESLint会不起作用。

  2. Use global ESLint installation的对钩勾上。因为我们使用的是全局的ESLint安装包。

下面,开始安装ESLint:

  1. npm install eslint -g
    ESLint是通过npm安装的,这里的-g选项代表全局,也就是说它不会把ESLint的可执行文件安装在你的项目文件夹或者说当前文件夹下。如果你没有设置这个-g选项的话,它会在你当前文件夹下安装ESLint可执行文件,那样就不是全局安装了。后面我们所有安装包都要用使用这个-g选项

  2. eslint -v
    安装完成之后,你可以先执行一下eslint -v这个命令来看一下eslint是否已经安装成功了,如果没有的话,你需要反复检查,直到确保eslint安装已经成功为止。

  3. 关于eslint --init可以不必执行,它主要的作用是在你当前文件夹下生成.eslintrc文件,但同时也会把eslint在你当前文件夹下重新安装一遍,并且如果你使用包的话,它还会要求必须要有package.json文件,总之会很麻烦。但如果你是第一次使用的话,我建议你可以执行一下试试,它主要提供3种预安装包:Google标准、Airbnb标准和Standard标准。这3个标准里,Google就是Google公司的标准,Airbnb是Airbnb公司的标准,Standard就是一些前端工程师自定的标准。目前来看,公认的最好的标准是Airbnb标准(互联网发展日新月异,永远是年轻人颠覆老年人,连Google都老了)。它对于ES6要求最严格,比如禁止使用var定义变量,必须使用let或者const等等。既然采用最新标准,当然就让你的代码一次性向最高标准看齐,省得以后麻烦。

  4. npm install eslint-config-airbnb -g
    精彩的重头戏来了:看到漂亮的airbnb了吗?我们就里就是要安装Airbnb的标准了。注意-g,还是全局化安装。

  5. npm install eslint-plugin-jsx-a11y -g
    a11y是accessibility(无障碍环境)的缩写,从第一个字母a到最后一个字母y,中间一共是11个字母,所以就叫a11y了,类似于i18n表示internationalization(国际化)一样。JSX主要是React会用到,虽然我们的项目里可能并不会用React,但是这个Airbnb标准必须要用到它,所以必须安装。

  6. npm install eslint-plugin-import -g
    同上,Airbnb标准必需。

  7. 最后,编写我们自己的全局.eslintrc文件:
    vi ~/.eslintrc.json

前面讲过了,为项目服务的.eslintrc.json文件是放在项目文件夹下的,全局的.eslintrc.json文件则放在当前用户的根目录下,类Unix系统的当前用户目录是~,而Windows系统的话则是类似于C:\Windows\Users\Username这样的地方。 把以下代码放入.eslintrc.json,就做好了你的全局ESLint配置文件。

{
    "extends": "airbnb",
    "installedESLint": true,
    "plugins": [
        "react"
    ]
}

在atom中打开你的某一个js文件,随便改几个字符看看效果吧,不出所料的话,应该会出现一堆红色的错误。如果没有出现,不是你的代码没有问题,而是你没有安装对。

Airbnb的缺省标准是每行的缩进字符是2个空格键,而我一般喜欢使用4个空格键作缩进,所以这里需要一点小小的定制。另外,我缺省会大量使用jQuery,不想让它总是报告什么jQuery这个变量未定义等错误。所以增加了几行,最终的.eslintrc.json如下:

{
    "extends": "airbnb",
    "installedESLint": true,
    "plugins": [
        "react"
    ],
    "env": {
        "jquery": true
    },
    "rules": {
        "indent": ["error", 4]
    }
}

这样你在任何项目中的js文件都会按照这同一套标准去检查。好了,现在可以开始改你的代码了,解决那一大堆红叉子吧,我相信一定不少。

本文转载自:https://segmentfault.com/a/1190000005984309

阿振
粉丝 10
博文 55
码字总数 58791
作品 0
成都
高级程序员
私信 提问
atom 配置 eslint 使用 Google 规范 格式化 js 文件

eslint官方提供了3种预安装包: eslint-config-google Google标准 执行安装: eslint-config-airbnb Airbnb标准,它依赖eslint, eslint-plugin-import, eslint-plugin-react, and eslint-plu......

阿豪boy
2018/01/25
248
0
(转)Eslint 从入门到放弃

前言 ESLint 由 JavaScript 红宝书 作者 Nicholas C. Zakas 编写, 2013 年发布第一个版本。 NCZ 的初衷不是重复造一个轮子,而是在实际需求得不到 JSHint 团队响应 的情况下做出的选择:以可...

davelet
2018/05/10
0
0
vue中eslintrc.js配置最详细介绍

本文是对vue项目中自带文件eslintrc.js的内容解析,介绍了各个eslint配置项的作用,以及为什么这样设置。比较详细,看完能对eslint有较为全面的了解,基本解除对该文件的疑惑。...

peakedness丶
01/14
123
0
使用ESLint & Prettier美化Vue代码 | 晚晴幽草轩

Prettier 是一个有见识的代码格式化工具。它通过解析代码并使用自己的规则重新打印它,并考虑最大行长来强制执行一致的样式,并在必要时包装代码。如今,它已成为解决所有代码格式问题的优选...

2018/06/19
0
0
使用ESLint & Prettier美化Vue代码

Prettier 是一个有见识的代码格式化工具。它通过解析代码并使用自己的规则重新打印它,并考虑最大行长来强制执行一致的样式,并在必要时包装代码。如今,它已成为解决所有代码格式问题的优选...

晚晴幽草
2018/06/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
2.2K
14
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
38
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
40
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
61
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部