jshint 检测工具不够灵活下,道格拉斯(何许人也?json创造者,javascript重要任务,犀牛那本书就是他写的)。

文档地址:

安装

利用npm全局安装eslintpre-commit 。建议这两个全局安装,可能别人检测代码工具不一样,尤其webstrom是自带检测代码功能。

npm i -g eslint pre-commit

pre-commit,在git commit提交代码的时候,希望能够执行代码检测,不要把错误的代码上传到项目仓库(说直白点,谁写的错误代码,在提交时被检查出来,你必须解决,不解决不上传到。从而杜绝了他人修改你的代码)。

pre-commit 主要的配置是都在package.json

  1. scripts 定义你希望执行的命令。

    这里我们定义一个用eslint检测你开发代码,如下:
"scripts": {
"lint": "eslint src/**"
}
  1. 在定 pre-commit 的中
"pre_commit": [
"lint"
]

配置文件

这里都是按照推荐的方法来配置的(务必一定要看官网文档说明,很多语法支持都在官网有说明,google和百度文档不是一定是eslint最新最稳定版本。)

  1. 生成配置文件
eslint --init

在项目根目录下会生成 .eslintrc.js

  1. 执行环境的配置
module.exports = {
env : {
"node": true,
"brower": true,
"es6": true
}
}

"es6": true 开启es6全局变量,但并没有支持es6的新语法类型的支持,要开启需要在parserOptions中添加"ecmaVersion": 6

{
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"semi": 2
}
}
  1. 解析器parser,这里是使用babel-eslint

先全局安装babel-eslint

npm i -g babel-eslint

修改配置参数:

{
"parser": "babel-eslint",
}
  1. jsx语法支持,安装eslint-plugin-react
npm install eslint-plugin-react --save-dev

配置参数

 "extends": [
"eslint:recommended",
"plugin:react/recommended"
]
  1. rule配置,这是elsint的核心,这个看文档
  • "off" 或 0 - 关闭规则
  • "warn" 或 1 - 开启规则,使用警告级别的错误:warn (不会导致程序退出)
  • "error" 或 2 - 开启规则,使用错误级别的错误:error (当被触发的时候,程序会退出)

这里以no-console为例子说明。

"rules": {
"no-console": [
"error",
"allow": ["warn","error"]
]
}

这段规则意思禁止使用console,但出console.warnconsole.error

但又有时想用console.log,可以在js文件写入相关注释。

/*eslint-disable no-console*/
console.log('u can use console.log!');
/*eslint-enable no-console*/
console.log('u must not use console.log!');

编辑配置

像sublime、atom默认是没有代码检测的,是用webstorm的知道,那种代码及时检错功能非常方便。那么sublime和atom也可以配置相应及时检错(webstorm是含有的,为什么不使用webstrom?那是因为我对sublime、atom上的沉默成本太大)。

sublime配置

  • sublimeLinter
  • sulimeLinter-contrib-eslint

设置,要在sublimeLinter用户设置,添加如下内容:

{
"user": {
"paths":{
"window": [
"c:/User/userName/AppData/Roaming/npm/eslint.exe"
]
}
}
}

window根据自身的全局安装eslint情况而定。

atom配置

  • linter
  • atom-eslint

安装即可,插件的名字我记不清楚了,但是按照这样搜索,找到下载次数最多安装,是可以安装到对插件(我大多时间是使用sublime,很容易忽视atom,但是使用起来也没什么障碍)。

ps: 具体细节首要是查文档。

我犯了一个严重的错误,项目初始化一定要npm init,否则会出现一些某名奇妙的错误。

eslint 代码检测工具的更多相关文章

  1. 基于git diff进行的eslint代码检测

    缘起 在项目中, 通常都会使用代码检测工具来规范团队的代码风格, 比如eslint.随着代码的不断增加, eslint进行代码检测的时间也越来越久.每次检测的时候, 需要检测的文件和实际检测的文件极度 ...

  2. StyleCop(C#代码检测工具)

    StyleCop(C#代码检测工具)   一.StyleCop是微软的一个开源的静态代码分析工具,检查c#代码一致性和编码风格. 二.下载地址   http://stylecop.codeplex.c ...

  3. python 代码检测工具

    对于我这种习惯了 Java 这种编译型语言,在使用 Python 这种动态语言的时候,发现错误经常只能在执行的时候发现,总感觉有点不放心. 而且有一些错误由于隐藏的比较深,只有特定逻辑才会触发,往往导 ...

  4. Jenkins整合SonarQube代码检测工具

    借鉴博客:https://blog.csdn.net/kefengwang/article/details/54377055 上面这博客写得挺详细的,挺不错.它这个博客没有提供下载的教程,这个博客提供 ...

  5. c++代码检测工具

    cppcheck是一款静态代码检查工具,可以检查如内存泄漏等代码错误,使用起来比较简单,即提供GUI界面操作,也可以与VS开发工具结合使用. 1.安装 一般会提供免安装版,安装完成后将cppcheck ...

  6. 恶意代码检测工具 -- Mathematics Malware Detected Tools

    Mathematics Malware Detected Tools 重要:由于缺少测试数据,部分结论可能不正确.更多更准确的结论,还需要进行大量实验. 概述 mmdt(Mathematics Mal ...

  7. 阿里java代码检测工具p3c

    阿里在杭州云栖大会上,正式发布众所期待的<阿里巴巴Java开发规约>扫描插件! 该插件由阿里巴巴P3C项目组研发.这个项目组是阿里巴巴开发爱好者自发组织形成的虚拟项目组,把<阿里巴巴 ...

  8. 关闭vue的eslint代码检测和WebStorm的代码检测

    1. 在vue项目中 bulid > webpack.base.conf.js 中: 如图,在rules规则中有一条规则是校验代码的,也就是红框2那行,要取消可以直接注释掉这行,或者把红框1的函 ...

  9. JS代码检查工具ESLint

    前面的话 ESLint是一个JavaScript代码静态检查工具,可以检查JavaScript的语法错误,提示潜在的bug,可以有效提高代码质量,维持前端团队高度一致的编码风格.ESLint不但提供一 ...

随机推荐

  1. No service of type Factory<LoggingManagerInternal> available in ProjectScopeService

    导入GitHub上下载的项目时报错 No service of type Factory<LoggingManagerInternal> available in ProjectScope ...

  2. 对TextFile格式文件的lzo压缩建立index索引

    转自:http://blog.csdn.net/yangbutao/article/details/8519572 hadoop中可以对文件进行压缩,可以采用gzip.lzo.snappy等压缩算法. ...

  3. 概率霍夫变换(Progressive Probabilistic Hough Transform)原理详解

    概率霍夫变换(Progressive Probabilistic Hough Transform)的原理很简单,如下所述: 1.随机获取边缘图像上的前景点,映射到极坐标系画曲线: 2.当极坐标系里面有 ...

  4. 大数据学习笔记03-HDFS-HDFS组件介绍及Java访问HDFS集群

    HDFS组件概述 NameNode 存储数据节点信息及元文件,即:分成了多少数据块,每一个数据块存储在哪一个DataNode中,每一个数据块备份到哪些DataNode中 这个集群有哪些DataNode ...

  5. linux memcached

    依赖库 yum install libevent libevent-deve 云安装 yum install memcached 源代码安装 wget http://memcached.org/lat ...

  6. 【Dubbo 源码解析】01_Dubbo 设计简介

    Dubbo 设计简介 Dubbo 采用 Microkernel + Plugin (微内核 + 插件)模式,Microkernel 只负责组装 Plugin,Dubbo 自身的功能也是通过扩展点实现的 ...

  7. 通信原理之TCP/IP基本概念 (二)

    本来想写写,但发现有人写的很好了,不造轮子了!  直接转了 一.为什么会有TCP/IP协议 在世界上各地,各种各样的电脑运行着各自不同的操作系统为大家服务,这些电脑在表达同一种信息的时候所使用的方法是 ...

  8. 系统信号(signal)与其他(定时器,退出清理等)

    信号signal,可以用作进程线程通信,也可以用作接收中断后退出,退出时,清理资源,记录日志.python相关包为signa. linux信号表 root@server:~# kill -l ) SI ...

  9. for循环 例子

    <script type="text/javascript"> //循环 for循环 //循环操作某一个功能(执行某段代码) //四要素 1.循环初始值 2.循环条件 ...

  10. 蚂蚁金服缘何自研Service Mesh?

    2018年,微服务方兴未艾,Service Mesh(服务网格)又快速崛起.有观点认为,2018年可被称之为“Service Mesh元年”,在未来两年中,Service Mesh将迎来爆发式增长,成 ...