Eslint 介绍
Eslint 是一个 JavaScript 验证工具, 有了它可以让你的编辑器像 ide 一样进行一些静态的错误提示功能.
安装 eslint
$ npm install eslint - g
项目需要安装的插件
- "babel-eslint": "^8.0.3",
- "eslint": "^4.13.1",
- "eslint-plugin-react": "^7.5.1",
配置详情
下面的配置涵盖了开发者所需要的绝大部分信息, rules 中的值 012 分别表示不开启检查警告错误你可以看到下面有些是 0, 如果有需要开启检查, 可以自己修改为 1 或者 2
- module.exports = {
- "env": {
- "browser": true,
- "commonjs": true,
- "es6": true
- },
- "extends": "eslint:recommended",
- "globals": {
- "$": true,
- "process": true,
- "__dirname": true
- },
- "parser": "babel-eslint",
- "parserOptions": {
- "ecmaFeatures": {
- "experimentalObjectRestSpread": true,
- "jsx": true
- },
- "sourceType": "module",
- "ecmaVersion": 7
- },
- "plugins": ["react"],
- "rules": {
- "quotes": [2, "single"], // 单引号
- "no-console": 0, // 不禁用 console
- "no-debugger": 2, // 禁用 debugger
- "no-var": 0, // 对 var 警告
- "semi": 0, // 不强制使用分号
- "no-irregular-whitespace": 0, // 不规则的空白不允许
- "no-trailing-spaces": 1, // 一行结束后面有空格就发出警告
- "eol-last": 0, // 文件以单一的换行符结束
- "no-unused-vars": [2, {"vars": "all", "args": "after-used"}], // 不能有声明后未被使用的变量或参数
- "no-underscore-dangle": 0, // 标识符不能以_开头或结尾
- "no-alert": 2, // 禁止使用 alert confirm prompt
- "no-lone-blocks": 0, // 禁止不必要的嵌套块
- "no-class-assign": 2, // 禁止给类赋值
- "no-cond-assign": 2, // 禁止在条件表达式中使用赋值语句
- "no-const-assign": 2, // 禁止修改 const 声明的变量
- "no-delete-var": 2, // 不能对 var 声明的变量使用 delete 操作符
- "no-dupe-keys": 2, // 在创建对象字面量时不允许键重复
- "no-duplicate-case": 2, //switch 中的 case 标签不能重复
- "no-dupe-args": 2, // 函数参数不能重复
- "no-empty": 2, // 块语句中的内容不能为空
- "no-func-assign": 2, // 禁止重复的函数声明
- "no-invalid-this": 0, // 禁止无效的 this, 只能用在构造器, 类, 对象字面量
- "no-redeclare": 2, // 禁止重复声明变量
- "no-spaced-func": 2, // 函数调用时 函数名与 () 之间不能有空格
- "no-this-before-super": 0, // 在调用 super()之前不能使用 this 或 super
- "no-undef": 2, // 不能有未定义的变量
- "no-use-before-define": 2, // 未定义前不能使用
- "camelcase": 0, // 强制驼峰法命名
- "jsx-quotes": [2, "prefer-double"], // 强制在 JSX 属性 (jsx-quotes) 中一致使用双引号
- "react/display-name": 0, // 防止在 React 组件定义中丢失 displayName
- "react/forbid-prop-types": [2, {"forbid": ["any"]}], // 禁止某些 propTypes
- "react/jsx-boolean-value": 2, // 在 JSX 中强制布尔属性符号
- "react/jsx-closing-bracket-location": 1, // 在 JSX 中验证右括号位置
- "react/jsx-curly-spacing": [2, {"when": "never", "children": true}], // 在 JSX 属性和表达式中加强或禁止大括号内的空格
- "react/jsx-indent-props": [2, 4], // 验证 JSX 中的 props 缩进
- "react/jsx-key": 2, // 在数组或迭代器中验证 JSX 具有 key 属性
- "react/jsx-max-props-per-line": [1, {"maximum": 1}], // 限制 JSX 中单行上的 props 的最大数量
- "react/jsx-no-bind": 0, //JSX 中不允许使用箭头函数和 bind
- "react/jsx-no-duplicate-props": 2, // 防止在 JSX 中重复的 props
- "react/jsx-no-literals": 0, // 防止使用未包装的 JSX 字符串
- "react/jsx-no-undef": 1, // 在 JSX 中禁止未声明的变量
- "react/jsx-pascal-case": 0, // 为用户定义的 JSX 组件强制使用 PascalCase
- "react/jsx-sort-props": 2, // 强化 props 按字母排序
- "react/jsx-uses-react": 1, // 防止反应被错误地标记为未使用
- "react/jsx-uses-vars": 2, // 防止在 JSX 中使用的变量被错误地标记为未使用
- "react/no-danger": 0, // 防止使用危险的 JSX 属性
- "react/no-did-mount-set-state": 0, // 防止在 componentDidMount 中使用 setState
- "react/no-did-update-set-state": 1, // 防止在 componentDidUpdate 中使用 setState
- "react/no-direct-mutation-state": 2, // 防止 this.state 的直接变异
- "react/no-multi-comp": 2, // 防止每个文件有多个组件定义
- "react/no-set-state": 0, // 防止使用 setState
- "react/no-unknown-property": 2, // 防止使用未知的 DOM 属性
- "react/prefer-es6-class": 2, // 为 React 组件强制执行 ES5 或 ES6 类
- "react/prop-types": 0, // 防止在 React 组件定义中丢失 props 验证
- "react/react-in-jsx-scope": 2, // 使用 JSX 时防止丢失 React
- "react/self-closing-comp": 0, // 防止没有 children 的组件的额外结束标签
- "react/sort-comp": 2, // 强制组件方法顺序
- "no-extra-boolean-cast": 0, // 禁止不必要的 bool 转换
- "react/no-array-index-key": 0, // 防止在数组中遍历中使用数组 key 做索引
- "react/no-deprecated": 1, // 不使用弃用的方法
- "react/jsx-equals-spacing": 2, // 在 JSX 属性中强制或禁止等号周围的空格
- "no-unreachable": 1, // 不能有无法执行的代码
- "comma-dangle": 2, // 对象字面量项尾不能有逗号
- "no-mixed-spaces-and-tabs": 0, // 禁止混用 tab 和空格
- "prefer-arrow-callback": 0, // 比较喜欢箭头回调
- "arrow-parens": 0, // 箭头函数用小括号括起来
- "arrow-spacing": 0 //=>的前 / 后括号
- },
- "settings": {
- "import/ignore": [
- "node_modules"
- ]
- }
- };
哦, 老天, 你还希望看到更多的 react 检查器, 那就去 eslint-plugin-react 的 github 文档去慢慢翻译吧
某些文件关闭 eslint 检查
你不总是希望所有的文件都开启 eslint 检查, 那么, 给单独的 js 文件关闭 eslint 的方式, 只需要在该文件的最顶部加上一段注释
- /*eslint-disable*/
- function test() {
- return true
- }
给某一行 js 代码关闭 eslint 检查
关闭整个 js 文件的行为有点暴力, 别担心, 你还可以只给其中某段代码关闭 eslint
- // eslint-disable-next-line
- alert('foo')
eslint 配置文件类型
eslint 配置文件类型不只有 js 和 json, 其实包括下面这些:
- .eslintrc.js
- .eslintrc.yaml
- .eslintrc.yml
- .eslintrc.json
- .eslintrc
- package.json
来源: http://www.jb51.net/article/134474.htm