什么是ESLint
ESLint 是由 Nicholas C. Zakas 在2013年编写的开源的 JavaScript 的 Lint 工具。
特点：
- 可扩展
- 每条规则独立
- 可自定义规则
While ESLint will ship with some built-in rules to make it useful from the start, you’ll be able to dynamically load rules at any point in time.
ESlint有一些内置的规则让你更容易上手，同时你可以随时加载自己的规则。
ESLint is written using Node.js to provide a fast runtime environment
ESLint是使用Node.js作为运行环境
React Native 配置 ESLint
- 安装ESLint
npm install eslint --save-dev
- 生成
.eslintrc.js文件
ESLint --init
ps：上一步如果报错未识别ESLint 命令，可以使用下面的命令
./node_modules/.bin/eslint --init
这里会在命令行选择一系列的配置选项，其中最重要的是要选择EsLint规则。目前推崇的适合React Native的规则是 eslint-config-airbnb。选择完成后会自动安装与你配置的选项相关的以下依赖：
- eslint
- eslint-config-airbnb
- eslint-plugin-jsx-a11y
- eslint-plugin-import
- eslint-plugin-react
没错。。你安装一个ESLint，配置完成后实际装了这么多东西。。
然后在WebStorm的设置里开启ESLint就行了。
babel-eslint
什么是babel-eslint
ESLint's default parser and core rules only suppport the latest final ECMAScript standard and do not support experimental (such as new features) and non-standard (such as Flow or TypeScript types) syntax provided by Babel. babel-eslint is a parser that allows ESLint to run on source code that is transformed by Babel.
babel-eslint 是ESLint的一个parser，ESLint的默认的parser（ espree）和 core rules 仅仅支持检查 ECMAScript 标准的JS语法。如果你通过 Babel 来使用了 Flow、TypeScript、JavaScript实验性的新特性的语法，你需要 babel-eslint 这个 parser 来替代默认的parser来检查你的代码。
Note: You only need to use babel-eslint if you are using Babel to transform your code. If this is not the case, please use the relevant parser for your chosen flavor of ECMAScript (note that the default parser supports all non-experimental syntax as well as JSX).
只有当你在使用Babel 来转换你的代码的时候，你才需要使用 babel-eslint 。ESLint默认的parser是支持常规的（非实验性的）语法和JSX语法的。
安装babel-eslint
npm install eslint babel-eslint --save-dev
在.eslintrc.js 文件中加入这句话
module.exports = {
parser: "babel-eslint",
};
这样就行了。
ps：怎么关闭一些你觉得不需要的 lint 规则呢？
- 在报错的地方找到这个规则的名字
- 在
.eslintrc.js文件的rules字段下加一行
"{规则名字}": "off"
如图：
image.png
ESLint plugin for React Native
eslint-plugin-react-native
这个是专门针对React Native的ESLint规则，也可以用上，用法见链接。
参考链接
英文： https://eslint.org/docs/user-guide/getting-started
中文： https://cn.eslint.org/docs/user-guide/getting-started
网友评论