eslint 代码检测工具

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,否则会出现一些某名奇妙的错误。

时间: 2024-10-11 03:32:31

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

c++代码检测工具

cppcheck是一款静态代码检查工具,可以检查如内存泄漏等代码错误,使用起来比较简单,即提供GUI界面操作,也可以与VS开发工具结合使用. 1.安装 一般会提供免安装版,安装完成后将cppcheck.exe所在目录添加到环境变量中,这样cmd下可直接使用cppcheck指令来检测代码. 2.cppcheck的检查信息 error:代码中的错误项,包括内存泄漏等: warning:为了避免产生bug而提供的编程改进意见: style:编码风格,提示你哪些函数没有使用.哪些为多余代码等: port

Converity与一款国产代码检测工具的对比

源伞科技Pinpoint,作为BAT都在使用的一款静态代码分析工具,到底有什么领先于其他厂商的能力? 1. 扩展和部署功能对比 源伞科技Pinpoint现有的检查器可以通过简单的json配置文件扩展业务逻辑.比如敏感数据泄露到日志检查器,企业或许有很多自己的日志打印函数,我们可以通过人工配置指定,即可提高检测质量. 如果不想人工配置,Pinpoint有未公开发布的库函数学习工具,可以通过线下分析企业代码库自动学习和生成上述配置文件. Pinpoint对分布式多机扫描部署支持比Coverity好,

StyleCop(C#代码检测工具)

一.StyleCop是微软的一个开源的静态代码分析工具,检查c#代码一致性和编码风格. 二.下载地址   http://stylecop.codeplex.com/releases/view/79972 默认安装目录:C:\Program Files (x86)\StyleCop 4.7 自己定义的dll规则也放在这个目录下 三.使用方式:打开VS之后选择一个类或者一个类库右击 RunStyleCop运行结果: 四:编写自己的规则: 1.创建一个类库, 新建一个MyCustomAnalyzer.

Java代码检测工具

开发软件时,我的主要目标之一是:要么防止将缺陷引入代码库,要么限制缺陷的生存期:换言之,要尽早找到缺陷.很显然,越是了解如何编写更好的代码以及如何有效测试软件,就越能及早地捕捉到缺陷.我也很想要一张能发现潜在缺陷的安全之网. 得出了这样的结论:将检验工具集成到构建过程(例如,使用 Ant 或 Maven)中,能够建立起一种寻找潜在缺陷的方法.尽管这种方法使一致性成为可能并超越了 IDE,但它也有一点反作用.必须在本地构建软件或等待 Continuous Integration 构建的运行.如果使

代码检测工具

flake8 flake8:用于检测代码中不符合规范的地方 安装:pip install flake8 手动代码检测:flake8 xxx.py或者文件夹 自动检测代码 # 创建配置文件.flake8 填写[flake8] # 文件中有它就会自动检测代码 配置相关 ignore = E225 # 忽略E225这个规范 except = xxx # 检测时将这些文件排除在外,不进行检测 原文地址:https://www.cnblogs.com/liuweida/p/11769706.html

vim的python代码检测工具

这里介绍三个vim的插件, 一个是pyflakes,另外一个是pep8,还有它们的合体flake8 安装 安装很简单,找到你的.vim目录,把这两个压缩包解压了放进去 去下面vim官方下下来. pyflakes http://www.vim.org/scripts/script.php?script_id=2441 pep8 http://www.vim.org/scripts/script.php?script_id=2914 flake8 http://www.vim.org/scripts

阿里java代码检测工具p3c

阿里在杭州云栖大会上,正式发布众所期待的<阿里巴巴Java开发规约>扫描插件!该插件由阿里巴巴P3C项目组研发.这个项目组是阿里巴巴开发爱好者自发组织形成的虚拟项目组,把<阿里巴巴Java开发规约>强制条目转化成自动化插件,并实现部分的自动编程.插件的下载地址:https://github.com/alibaba/p3c 或者在Github直接搜索p3c插件有哪些功能?为了让开发者更加方便.快速将规范推动并实行起来,阿里基于手册内容,研发了一套自动化的IDE检测插件(IDEA.Ec

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

1. 在vue项目中 bulid > webpack.base.conf.js 中: 如图,在rules规则中有一条规则是校验代码的,也就是红框2那行,要取消可以直接注释掉这行,或者把红框1的函数注释掉. 2.在webstorm中取消编辑器代码校验: 原文地址:https://www.cnblogs.com/licurry/p/9997944.html

NodeJs代码扫描工具ESLint

目录 简介 安装 初始化 检测规则 范例 参考文章 简介 ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具,使用它可以避免低级错误和统一代码的风格.如果每次在代码提交之前都进行一次eslint代码检查,就不会因为某个字段未定义为undefined或null这样的错误而导致服务崩溃,可以有效的控制项目代码的质量. 在许多方面,它和 JSLint.JSHint 相似,除了少数的例外: ESLint 使用 Espree 解析 JavaScript. ESLint 使