Vue第18话 eslint

逆流者 2020年01月05日 65次浏览

1.简介

  • ESLint 是一个代码规范检查工具
  • 它定义了很多特定的规则, 一旦你的代码违背了某一规则, eslint会作出非常有用的提示
  • 官网: http://eslint.org/
  • 基本已替代以前的 JSLint

2.ESLint 提供以下支持

  • ES
  • JSX
  • style 检查
  • 自定义错误和提示

3. ESLint 提供以下几种校验

  • 语法错误校验
  • 不重要或丢失的标点符号, 如分号
  • 没法运行到的代码块(使用过 WebStorm 的童鞋应该了解)
  • 未被使用的参数提醒
  • 确保样式的统一规则, 如 sass 或者 less
  • 检查变量的命名

4.规则的错误等级有三种

  • 0: 关闭规则。
  • 1: 打开规则, 并且作为一个警告(信息打印黄色字体)
  • 2: 打开规则, 并且作为一个错误(信息打印红色字体)

5. 相关配置文件

5.1 .eslintrc.js : 全局规则配置文件

'rules': {
  'no-new': 1
}

5.2 在 js/vue 文件中修改局部规则

/* eslint-disable no-new */
new Vue({
  el: 'body',
  components: { App }
})

5.3 .eslintignore: 指令检查忽略的文件

*.js
*.vue