网站首页 > 知识剖析 正文
官方地址:http://eslint.org/
中文地址:http://eslint.cn/
ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。
EsLint帮助我们检查Javascript编程时的语法错误。比如:在Javascript应用中,你很难找到你漏泄的变量或者方法。EsLint能够帮助我们分析JS代码,找到bug并确保一定程度的JS语法书写的正确性。在多人开发维护上,有利于团队开发风格保持一致,利于项目查看,维护。
EsLint提供以下几种校验:
- 语法错误校验;
- 不重要或丢失的标点符号,如分号;
- 没法运行到的代码块;
- 未被使用的参数提醒;
- 漏掉的结束符,如};
- 确保样式的统一规则,如sass或者less;
- 检查变量的命名;
安装
使用npm命令安装
// 如果项目中没有配置文件,通过npm init生成一个新的配置文件
npm init eslint -g
项目目录下,运行:eslint –init将会产生一个.eslintrc的文件,文件内容包含一些校验规则
// 其中”semi”和”quotes”是规则名称。
{
"rules": {
"semi": ["error","always"],
"quotes": ["error","double"]
}
}
自定义配置
配置自己的规则,你可以关掉所有ESLint默认的验证,自行添加所确切需要的验证规则。为此EsLint提供了2个种方式进行设置:
Configuration Comments: 在所要验证的文件中,直接使用Javascript注释嵌套配置信息
Configuration Files: 使用JavaScript、JSON或YAML文件,比如.eslintrc文件,当然你也可以在package.json文件里添加eslintConfig字段,ESLint都会自动读取验证。
parserOptions
# EsLint通过parserOptions,允许指定校验的ecma的版本,及ecma的一些特性
{
"parserOptions": {
"ecmaVersion": 6,//指定ECMAScript支持的版本,6为ES6
"sourceType":"module",//指定来源的类型,有两种”script”或”module”
"ecmaFeatures": {
"jsx":true//启动JSX
},
}
}
Parser
# EsLint默认使用esprima做脚本解析,当然你也切换他,比如切换成babel-eslint解析
{
"parser":"esprima"//默认,可以设置成babel-eslint,支持jsx
}
Environments
# Environment可以预设好的其他环境的全局变量,如brower、node环境变量、es6环境变量、mocha环境变量等
{
"env": {
"browser":true,
"node":true
}
}
//如果你想使用插件中的环境变量,你可以使用plugins指定,如下
{
"plugins": ["example"],
"env": {
"example/custom":true
}
}
Globals
# 指定你所要使用的全局变量,true代表允许重写、false代表不允许重写
{
"globals": {
"var1":true,
"var2":false
}
}
Plugins
# EsLint允许使用第三方插件
{
"plugins": [
"react"
]
}
Rules
在配置文件中可以设置一些规则。
规则的错误等级有三种:
"off" 或者 0:关闭规则。
"warn" 或者 1:打开规则,并且作为一个警告(不影响exit code)。
"error" 或者 2:打开规则,并且作为一个错误(exit code将会是1)。
"extends": "eslint:recommended"
Extends是EsLint默认推荐的验证,你可以使用配置选择哪些校验是你所需要的。
自定义规则,一般格式:”规则名称”:error级别系数。
可以包括Strict模式、也可以是code的方式提醒,如符号等。还可以是第三方的校验,如react。
默认校验的地址:http://eslint.org/docs/rules/(英文),http://eslint.cn/docs/rules/(中文)
{
"plugins": [
"react"
],
"rules": {
//Javascript code 默认校验
"eqeqeq":"off",//off = 0
"curly":"error",//error = 2
"quotes": ["warn","double"],//warn = 1
//使用第三方插件的校验规则
"react/jsx-quotes": 0
}
}
猜你喜欢
- 2025-01-26 JavaScript基础大总结(javascript基础语法)
- 2025-01-26 three.js 入门(threejs入门指南)
- 2025-01-26 最全javascript学习指南,快速了解从入门到精通需要掌握哪些知识
- 2025-01-26 Highlight.js - 前端的代码语法高亮库
- 2025-01-26 常见web安全问题,SQL注入、XSS、CSRF,基本原理以及如何防御
- 2025-01-26 Nice! 一图搞懂JS工作原理(js的工作原理)
- 2025-01-26 Oracle 不会轻易放弃“JavaScript”
- 2025-01-26 3个编写JavaScript高质量代码的技巧,让你不再996
- 2025-01-26 推荐 7 个有用的 JavaScript 库,也许你会用的上
- 2025-01-26 通义灵码使用技巧分享:如何用好注释以及跨文件索引
- 04-29php开发者composer使用看这一篇就够了
- 04-29引用和变量声明在不同语言中的实作
- 04-29PHP 没你想的那么差
- 04-29Ubuntu linux 上的 Nginx 和 Php 安装
- 04-29CentOS下通过yum搭建lnmp(单版本PHP)
- 04-29为什么 PHP8 是个高性能版本
- 04-29PHP8函数包含文件-PHP8知识详解
- 04-29使用无参数函数进行命令执行
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)