依赖安装

ESLint 全局安装和项目根目录下安装都可以,只是应用起来稍微有些区别;
eslint-plugin-react是兼容React语义的插件;

以下安装选择一种即可,推荐局部安装,插件也根据项目安装;

全局安装

全局安装如下:

局部安装

进入项目根目录下安装:

区别:
在全局安装ESLint,所有的插件必须也全局安装;
在局部安装ESLint,插件不限制在哪里安装;

工具配置

IntelliJ IDEA、 Webstrom的配置一样,如果ESLint package没有自动填充,需要把node_modules中的eslint导入进去;

配置文件

经过以上步骤,随意打开一个.js文件会发现报错;

文件忽略

设置一些忽略检测的文件:

多配置

多配置检测顺序

如果同一目录下有多个配置文件,按以下顺序检测,使用第一个匹配到的文件:

.eslintrc.js
.eslintrc.yaml
.eslintrc.yml
.eslintrc.json
.eslintrc
package.json

多配置处理方式

如果项目下有多个结构层级不同的配置文件,会产生配置级联

默认情况下,ESLint 会在所有父级目录里寻找配置文件,一直到根目录。

父级目录下的配置将使用于所有子目录,当子目录下的配置文件中的规则与父级配置发生冲突时,使用优先级高的,离的最近的一个优先。

禁止检测父级配置

为了将 ESLint 限制到一个特定的项目,在配置文件里设置 "root": true
ESLint 一旦发现配置文件中有 "root": true,它就会停止在父级目录中寻找。

內联注释配置

注释以指令(eslint/eslint-env/global/eslint-disable)开始,接下来是逗号分隔的规则列表;

作用:
会覆盖配置文件里的规则:禁用ESlint | 禁用某条规则 | 调整规则;

参考配置

module.exports = {"env": {"browser": true,"commonjs": true,"es6": true},"extends": "eslint:recommended","parserOptions": {"ecmaFeatures": {"experimentalObjectRestSpread": true,"jsx": true},"sourceType": "module"},"globals":{"document": true,"$": true},"plugins": ["react"],"rules": {"react/jsx-uses-react": "error","react/jsx-uses-vars": "error","indent": ["error","tab",4],"linebreak-style": ["error","unix"],"quotes": ["error","double"],"semi": ["error","always"]},"settings": {"react": {"createClass": "createClass","pragma": "React"}}
};

使用的规则可在规则页面查看被标记为✓的规则;


注意:.gitignore中设置node_modules/

ESLint使用文档相关推荐

  1. React文档(一)安装

    React是一个灵活的可以用于各种不同项目的框架,你可以用它来写新应用,你也可以逐步将它引进已有的代码库而不用重写整个项目. 试用React 如果你想玩一玩React,那么就去CodePen上试一试. ...

  2. 前端文档汇总(觉得对您有用的话,别忘了给点个赞哦 ^_^ !)

    原文链接 前端文档汇总 front-end-Doc 前端文档汇总(含代码规范.开发流程.知识分享等) 这里的文档很重要, 你可以在这里看到前端相关代码规范.开发规范.开发流程等, 如果你是新人,务必看 ...

  3. Node交互式命令行工具开发——自动化文档工具

    转载自:小磊 https://segmentfault.com/a/1190000039749423 nodejs开发命令行工具,流程相对简单,但一套完整的命令行程序开发流程下来,还是需要下点功夫,网 ...

  4. 计算机英语介绍项目,【精品文档】614关于计算机专业Vue.js应用程序设计开发介绍简介概述的毕业设计论文英文英语外文文献翻译成品资料:了解Vue.js项目和工具(中英文双语对照)...

    1.本文是中英对照毕业设计论文外文文献翻译,下载后直接可用!省去您找文献.pdf整理成word以及翻译的时间,一辈子也就一次的事!文献引用作者出处信息:Freeman, Adam Pro Vue.js ...

  5. ExcelJS 使用帮助文档

    ExcelJS 使用帮助文档 个人备忘,原文地址:https://github.com/exceljs/exceljs/blob/master/README_zh.md 安装 npm install ...

  6. 使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub

    Vue3+TS+Vite开发组件库并发布到npm 网站在线预览: Vue Amazing UI | Amazing UI Components LibraryAmazing UI 组件库https:/ ...

  7. (上)vuepress编写API文档verdaccio搭建并发布组件库

    vuepress编写API文档 介绍 搭建 安装 初始化 配置 组件API文档 发布组件库 坑 没有高亮 介绍 想要搭建一个类似elementUI的组件库及相关的API文档,可以直接引用组件,还有代码 ...

  8. 第十五章 如何编写README文档

    README 文档对于开源项目的重要性甚至会超过代码本身.你试想一下,你打开一个 Github 项目,第一时间就会看到 README 文档,而这时候同一类的项目你可能有很多选择,如果这个README不 ...

  9. apiDoc生成接口文档,不费吹灰之力

    一个学习编程技术的公众号.每天推送高质量的优秀博文.开源项目.实用工具.面试技巧.编程学习资源等等.目标是做到个人技术与公众号一起成长.欢迎大家关注,一起进步,走向全栈大佬的修炼之路 效果 背景 之前 ...

最新文章

  1. UDP Socket基本思路小程序(2) 多线程简单聊天程序
  2. php xml转化为html,php将xml文件转换为html Web程序 - 贪吃蛇学院-专业IT技术平台
  3. ECSHOP在商品详细页面上获取该商品的顶级分类id和名称
  4. 计算机维修与维护入门,计算机组装与维护基础知识
  5. 前端学习(2585):前端怎么在响应头和请求头里面拿数据?
  6. [BZOJ 2500] 幸福的道路
  7. 详解C# 匿名对象(匿名类型)、var、动态类型 dynamic
  8. VBa运行c语言程序,Excel VBA编程详解
  9. 计算机硬盘容量计算公式
  10. 更改centos7操作系统的IP地址
  11. Navicat premium 导入Excel文件失败
  12. 一加和小米哪个好 一加用技术领先树立起品牌典范
  13. Pytorch版本代码修正
  14. cuda安装正常,nvcc -V却没有任何显示
  15. 【Spring学习】Bean生命周期
  16. win10系统D盘出现莫名其妙的占用
  17. 最流行的布局方案 Flex 弹性盒布局详解
  18. 《非暴力沟通》[1]
  19. 关于校企合作方案_关于合作的5个神话
  20. 基于asp.net在线音乐播放网站设计

热门文章

  1. Selenium学习之==Switch与SelectApi接口详解
  2. 说说json和jsonp 也许你会明白它的原理 含有jQuery实例 蛋疼 ,我面试的时候被卡了 赶紧写一个回顾...
  3. SpringMVC 之@RequestBody 接收Json数组对象
  4. 2、easyUI-创建 CRUD可编辑dataGrid(表格)
  5. css中auto的用法
  6. 结对编程项目的过程记录与收获
  7. python CGI编程Apache配置
  8. PHP按比例生成縮略圖片
  9. 诗与远方:无题(七十六)
  10. Android之使用MediaMetadataRetriever类获取媒体信息