atom使用全局配置ESLint

scq000 发布于2019-08-19 18:48 / 2259人阅读

摘要：因为我们使用的是全局的安装包。它对于要求最严格，比如禁止使用定义变量，必须使用或者等等。注意，还是全局化安装。把以下代码放入，就做好了你的全局配置文件。另外，我缺省会大量使用，不想让它总是报告什么这个变量未定义等错误。

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

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

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

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

下面，开始安装ESLint：

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

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

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

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

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

npm install eslint-plugin-import -g
同上，Airbnb标准必需。

最后，编写我们自己的全局.eslintrc文件：

vi ~/.eslintrc.json

前面讲过了，为项目服务的.eslintrc.json文件是放在项目文件夹下的，全局的.eslintrc.json文件则放在当前用户的根目录下，类Unix系统的当前用户目录是~，而Windows系统的话则是类似于C:WindowsUsersUsername这样的地方。
把以下代码放入.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文件都会按照这同一套标准去检查。好了，现在可以开始改你的代码了，解决那一大堆红叉子吧，我相信一定不少。

云服务器 GPU云服务器全局配置全局配置推送 js全局变量无法使用服务器全局配置

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

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

使用ESLint和sublimeLinter实时检测前端项目代码规范性[增Atom配置]

摘要：是一种用于识别代码格式错误的工具，目的是使代码更加规范和一致并避免错误。但是它本身并没有代码检查的功能，需要借助这样的特定语言检查支持。安装以后修改配置文件。问题描述使用vue-cli来构建Vuejs应用的项目中默认安装了eslint-loader模块，eslint-loader模块是目前相对比较流行的代码检测工具，可以检测书写的代码是否符合统一规范，可以在一些比较大型的项目开发中...

lei___ 2019-08-20 18:00 评论0 收藏0
专为 Laravel 定制的 Visual Studio Code 编辑器

摘要：此扩展使用安装在已打开的工作区文件夹内的库。此扩展由开发，是一个与之间的调试适配器。它具有零依赖性，并可以极大程度地工作于任何规模的项目里。查看先前文件的拷贝或者将其与工作区版本或先前版本进行比较，查看编辑器里对活动行的更改。 showImg(https://segmentfault.com/img/remote/1460000018002818?w=1223&h=630); 嗨工匠...

Mertens 2019-07-01 11:16 评论0 收藏0
JS/React 开发者的 Atom 终极配置

摘要：开发者的终极配置原文作者原文链接根据多年以来不断完善配置的经验，决定这次给也来一个大改造。快捷键帮助开发人员在不同的编辑器之间保持一致的编码风格。一组专注，用于优化现代开发生产力的命令集，目标是符合推荐的代码规范。 JS/React 开发者的 Atom 终极配置原文作者：Elad Ossadon 原文链接：The Ultimate Atom Editor Setup (+for J...

LiangJ 2019-08-20 16:55 评论0 收藏0
一文教你构建自己的library、webpack优化和npm版本控制

摘要：地址点个，给我们一点动力中文文档地址交流地址点个，谢谢这套费了几个月时间和很多心血，现在已经趋于完善，你完全可以在你的生产环境中试着使用。介绍构建自己的UI库，你必须要对一款打包工具熟悉(webpack, gulp或者grunt), 本文以webpack为例。 github 地址: https://github.com/reming0227... (点个 star，给我们一点动力 ...

刘玉平 2019-08-26 13:53 评论0 收藏0
Javascript编码规范

摘要：原文链接命名规范标准变量采用驼峰式命名在变量名中全大写常量全大写，用下划线连接构造函数，大写第一个字母对象必须以开头命名局部变量命名规范表示字符串。可执行不可执行判断是否含有某个值，函数返回一个布尔值。原文链接命名规范标准变量采用驼峰式命名 ‘ID’在变量名中全大写常量全大写，用下划线连接构造函数，大写第一个字母 jquery对象必须以’$’开头命名 let thisIsM...

enda 2019-08-23 15:31 评论0 收藏0