atom运用全局设置ESLint

2024年1月10日 244次阅读 来源: 张京

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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞