eslint 代码检测工具
jshint 检测工具不够灵活下,道格拉斯(何许人也?json创造者,javascript重要任务,犀牛那本书就是他写的)。
文档地址:
安装
利用npm
全局安装eslint
和pre-commit
。建议这两个全局安装,可能别人检测代码工具不一样,尤其webstrom是自带检测代码功能。
npm i -g eslint pre-commit
pre-commit,在git commit
提交代码的时候,希望能够执行代码检测,不要把错误的代码上传到项目仓库(说直白点,谁写的错误代码,在提交时被检查出来,你必须解决,不解决不上传到。从而杜绝了他人修改你的代码)。
pre-commit 主要的配置是都在package.json中
- 在
scripts
定义你希望执行的命令。
这里我们定义一个用eslint检测你开发代码,如下:
"scripts": {
"lint": "eslint src/**"
}
- 在定
pre-commit
的中
"pre_commit": [
"lint"
]
配置文件
这里都是按照推荐的方法来配置的(务必一定要看官网文档说明,很多语法支持都在官网有说明,google和百度文档不是一定是eslint最新最稳定版本。)
- 生成配置文件
eslint --init
在项目根目录下会生成 .eslintrc.js。
- 执行环境的配置
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
}
}
- 解析器
parser
,这里是使用babel-eslint
先全局安装babel-eslint
。
npm i -g babel-eslint
修改配置参数:
{
"parser": "babel-eslint",
}
- jsx语法支持,安装
eslint-plugin-react
npm install eslint-plugin-react --save-dev
配置参数
"extends": [
"eslint:recommended",
"plugin:react/recommended"
]
- rule配置,这是elsint的核心,这个看文档
- "off" 或 0 - 关闭规则
- "warn" 或 1 - 开启规则,使用警告级别的错误:warn (不会导致程序退出)
- "error" 或 2 - 开启规则,使用错误级别的错误:error (当被触发的时候,程序会退出)
这里以no-console
为例子说明。
"rules": {
"no-console": [
"error",
"allow": ["warn","error"]
]
}
这段规则意思禁止使用console
,但出console.warn
和 console.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 代码检测工具的更多相关文章
- 基于git diff进行的eslint代码检测
缘起 在项目中, 通常都会使用代码检测工具来规范团队的代码风格, 比如eslint.随着代码的不断增加, eslint进行代码检测的时间也越来越久.每次检测的时候, 需要检测的文件和实际检测的文件极度 ...
- StyleCop(C#代码检测工具)
StyleCop(C#代码检测工具) 一.StyleCop是微软的一个开源的静态代码分析工具,检查c#代码一致性和编码风格. 二.下载地址 http://stylecop.codeplex.c ...
- python 代码检测工具
对于我这种习惯了 Java 这种编译型语言,在使用 Python 这种动态语言的时候,发现错误经常只能在执行的时候发现,总感觉有点不放心. 而且有一些错误由于隐藏的比较深,只有特定逻辑才会触发,往往导 ...
- Jenkins整合SonarQube代码检测工具
借鉴博客:https://blog.csdn.net/kefengwang/article/details/54377055 上面这博客写得挺详细的,挺不错.它这个博客没有提供下载的教程,这个博客提供 ...
- c++代码检测工具
cppcheck是一款静态代码检查工具,可以检查如内存泄漏等代码错误,使用起来比较简单,即提供GUI界面操作,也可以与VS开发工具结合使用. 1.安装 一般会提供免安装版,安装完成后将cppcheck ...
- 恶意代码检测工具 -- Mathematics Malware Detected Tools
Mathematics Malware Detected Tools 重要:由于缺少测试数据,部分结论可能不正确.更多更准确的结论,还需要进行大量实验. 概述 mmdt(Mathematics Mal ...
- 阿里java代码检测工具p3c
阿里在杭州云栖大会上,正式发布众所期待的<阿里巴巴Java开发规约>扫描插件! 该插件由阿里巴巴P3C项目组研发.这个项目组是阿里巴巴开发爱好者自发组织形成的虚拟项目组,把<阿里巴巴 ...
- 关闭vue的eslint代码检测和WebStorm的代码检测
1. 在vue项目中 bulid > webpack.base.conf.js 中: 如图,在rules规则中有一条规则是校验代码的,也就是红框2那行,要取消可以直接注释掉这行,或者把红框1的函 ...
- JS代码检查工具ESLint
前面的话 ESLint是一个JavaScript代码静态检查工具,可以检查JavaScript的语法错误,提示潜在的bug,可以有效提高代码质量,维持前端团队高度一致的编码风格.ESLint不但提供一 ...
随机推荐
- 再战android-语音识别1(科大讯飞)
重新拾起刚入门的android,开发个小工具,一来不让自己离开发太远,二来看能否做出一个帮助自己管儿子学习的东西. 这次的主题是语音识别.稍微研究了下,开放的语音识别平台,本地识别的担心识别率问题,在 ...
- Git之右键没有Git Bash Here的解决办法
1.Win+R 打开运行输入regedit 回车打开注册表 2.找到[HKEY_CLASSES_ROOT\Directory\Background]. 3.在[Background]下如果没有[she ...
- Git -- 搭建git服务器
在远程仓库一节中,我们讲了远程仓库实际上和本地仓库没啥不同,纯粹为了7x24小时开机并交换大家的修改. GitHub就是一个免费托管开源代码的远程仓库.但是对于某些视源代码如生命的商业公司来说,既不想 ...
- MATLAB plot()、scatter()的RGB颜色设置以及生成渐变色
1.转载:https://blog.csdn.net/wh1312142954/article/details/80796764 plot(x,y,'Color',[R G B]);%只要设置颜色中R ...
- ios开发之--关于UIView的autoresizingMask属性的研究
在 UIView 中有一个autoresizingMask的属性,它对应的是一个枚举的值(如下),属性的意思就是自动调整子控件与父控件中间的位置,宽高. enum { UIViewAutoresizi ...
- SQL创建索引
http://www.w3school.com.cn/sql/sql_create.asp 注释:更新一个包含索引的表需要比更新一个没有索引的表更多的时间,这是由于索引本身也需要更新.因此,理想的做法 ...
- scala 模式匹配详解 2 scala里是怎么实现的?
在这篇martin和另外两位模式匹配领域专家的论文里说了模式匹配的几种实现方式,以及scala是选择哪种方式来实现的.http://lampwww.epfl.ch/~emir/written/Matc ...
- vue 数据管道
文档https://cn.vuejs.org/v2/guide/filters.html html 片段 <div class="app"> <div>{{ ...
- AWS EC2 使用root账户密码登陆
创建亚马逊的云主机EC2会提示下载一个pem的文件,需要使用puttygen转换成ppk私钥,转换过程如下图: 然后在使用putty登录,用户名是ec2-user.下面将修改使用root账户登录: 1 ...
- PHP 代 码 操 作 文 件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...