eslint reactnative
2019-05-27 14:01:47 zyh0709 阅读数 9

ESLint是一个JavaScript代码静态检查工具
官网

作用

  • check syntax 语法检查
  • find problems 发现问题
  • enforce code style 强制代码风格

安装

npm install eslint --save-dev
–save直接依赖 -dev指开发环境进行依赖
会自动写入到package.json的devDependencies节点

RN项目

可以手动在package.json中进行配置,然后执行npm install

"babel-eslint": "^10.0.1",
"eslint": "^5.14.1",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.12.4",

使用/配置

规则设定

在根目录创建.eslintrc.js文件,其中rules节点调整规则

module.exports = {
  parser:'babel-eslint',
  env: {
    browser: true,
    es6: true,
  },
  extends: 'airbnb',
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  plugins: [
    'react',
  ],
  rules: {
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],//在JS文件中允许存在JSX语法
    "global-require":"off",//image指定source时要用require语句
    "indent":["error",4],//缩进规则为4个空格
    "react/jsx-indent":["error",4],//缩进规则为4个空格
    "react/jsx-indent-props":["error",4],//缩进规则为4个空格
    "react/prop-types":["error",{"ignore":["tintColor","navigation"]}],
    "react/no-multi-comp":["error",{"ignoreStateless":true}],
    "react/prefer-stateless-function":["error",{"ignorePureComponents":true}],
    "max-len" : ["error", {code : 100}]
  },
};

忽略检测的文件

在根目录创建 .eslintignore文件,配置不进行eslint检测的文件

__tests__/*.*
babel.config.js
/scripts/

还有一种动态忽略的方法
在文件头部声明/* eslint-disable */忽略某个文件的eslint检测
或者在某一行js代码上添加 // eslint-disable-next-line 忽略某一行代码的eslint检测

执行检查

  • 检查某个文件:npx eslint [文件名,文件夹等]
    示例:
    检查单个文件:npx eslint ./src/app.js
    检查某个文件夹:npx eslint ./src

  • 检查并修复
    npx eslint ./src/app.js --fix

–fix可以帮助我们修复一些缩进,空格,引号等提示的错误

2019-03-15 09:56:00 weixin_34235457 阅读数 3

什么是ESLint

ESLint 是由 Nicholas C. Zakas 在2013年编写的开源的 JavaScriptLint 工具。

特点:

  • 可扩展
  • 每条规则独立
  • 可自定义规则

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的一个parserESLint的默认的parserespree)和 core rules 仅仅支持检查 ECMAScript 标准的JS语法。如果你通过 Babel 来使用了 FlowTypeScript、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-eslintESLint默认的parser是支持常规的(非实验性的)语法和JSX语法的。

安装babel-eslint

 npm install eslint babel-eslint --save-dev

.eslintrc.js 文件中加入这句话

module.exports = {
  parser: "babel-eslint",
};

这样就行了。

ps:怎么关闭一些你觉得不需要的 lint 规则呢?

  • 在报错的地方找到这个规则的名字
  • .eslintrc.js 文件的rules字段下加一行
"{规则名字}": "off"

如图:


6964764-2477a8f79fdff058.png
image.png

ESLint plugin for React Native

eslint-plugin-react-native
这个是专门针对React NativeESLint规则,也可以用上,用法见链接。

参考链接

英文: https://eslint.org/docs/user-guide/getting-started
中文: https://cn.eslint.org/docs/user-guide/getting-started

2016-07-12 17:11:00 weixin_33758863 阅读数 21

在前端编码时,为了规范每个成员的代码风格以及避免低级的错误,我们可以使用Eslint来制定规则.这套机制同样适用于React Native的团队开发.

下面将介绍如何在React Native中使用Eslint

得到一个React Native 项目

通过命令:

react-native init EsLintTestProject

新建一个项目.并用命令进入该文件夹

安装Eslint

有两种安装方式,全局安装或本地项目安装.(推荐 本地项目安装)
本地项目安装命令:

 npm install eslint --save-dev

初始化Eslint 步骤

首先使用命令:

eslint --init

按了Entry键后,控制台会让你输入一些选项.
本人的步骤是这样的:

1474238-c0bc9d15756a4abe.jpg
react-native

使用上下键可以切换方式.这第一步问你需要如何配置Eslint.
这里一共有三种方式:(1).询问项目的风格;(2).使用流行风格;(3).检查代码
这里我选的是第一个,直接按Entry进入下一题.

1474238-8150b5632d2dba1b.jpg

这就是其后的选择结果.当这些都选择完毕后,会在项目的根目录生成一个.eslintrc.js文件.这就是配置项,就算之前选错了也可以在此进行更改.

到这一步就可以尝试运行指令了:

eslint index.android.js

如无意外,控制台肯定会报各种错误.


1474238-f8f28228243e990f.jpg

这里面也就两个类型的错误,第一个是no-unused-vars(没有用到的变量),第二个是indent(排版缩进).

接下来需要将这些不该报错的地方消除掉.

首先解决缩进问题,找到.eslintrc.js文件的indent对象,将tab字段改成2.

1474238-f8c40f4050d08124.jpg

然后再运行:eslint index.android.js

1474238-6419f94f3d4abb62.jpg

发现错误仅剩下3个了.

再该解决no-unused-vars的问题.这是因为eslint检查的问题,我们需要增加额外的插件支持.
运行命令:

 npm install eslint-plugin-react --save-dev

找到.eslintrc.js文件的extends.

"extends": "eslint:recommended",

替换成

"extends": ["eslint:recommended", "plugin:react/recommended"],

接着再次运行eslint index.android.js.所有不该出现的错误都消失啦.

接着一切安装官网的Rule,配置代码的规范
http://eslint.org/docs/rules/

2017-09-17 06:49:33 yuanshuaicsdn 阅读数 4001

先简单介绍一下mac系统环境下,eslint的配置。

首先打开命令行工具,cd到项目根目录下。

一次输入命令并等待下载完成。

npm install eslint --save-dev

npm install eslint-config-airbnb --save-dev(这个是airbnb的规则)

npm install eslint-plugin-import --save-dev

npm install eslint-plugin-jsx-a11y --save-dev (airbnb规则依赖于这个库)

npm install eslint-plugin-react --save-dev

这几个库需要一起配合使用,少一个都会报错。

命令中--save的意思是将库的记录保存到项目目录下的package.json文件中,用于记录项目的依赖库。由于依赖库文件繁杂且体积大,上传到版本库浪费时间,所以利用package.json来记录依赖。当下载代码到新电脑上时,只需要执行npm install,npm就会到网络中下载项目的所有依赖。

而-dev表示package.json中devDependencies节点下的所有依赖,这些依赖只在开发环境中生效,在正式版本的应用生成过程中不会被编译。由于eslint只是开发辅助插件,所以使用-dev选项。


下载好依赖之后就可以执行命令:

eslint --init

进行玩关于eslint配置的选择之后会在工程根目录生成eslintrc文件,这个文件保存了eslint的配置,可以随时修改。

2017-12-22 21:46:00 weixin_34174422 阅读数 17

本文使用的是 yarn 依赖管理工具

一条命令解决依赖问题

yarn add eslint-config-airbnb eslint eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y babel-eslint -D

配置 .eslintrc.json

{
  "parser": "babel-eslint",
  "extends": "airbnb"
}

自动修复我们的代码

eslint --fix [file.js][dir] //修复指定的文件/文件夹

修复 main.js

yarn eslint --fix main.js

修复 src 文件夹

yarn eslint --fixe src

React 与 React Native

阅读数 82

React和React native

阅读数 324

React Native

阅读数 619

React Native

阅读数 836

没有更多推荐了,返回首页