ESLint plugin for React Native
React Native specific linting rules for ESLint. This repository is structured like (and contains code from) the excellent eslint-plugin-react.
Installation
Install ESLint either locally or globally.
$ npm install --save-dev eslint
To make most use of this plugin, its recommended to install eslint-plugin-react in addition to ESLint. If you installed ESLint globally, you have to install eslint-plugin-react globally too. Otherwise, install it locally.
$ npm install --save-dev eslint-plugin-react
Similarly, install eslint-plugin-react-native
$ npm install --save-dev eslint-plugin-react-native
Configuration
Add plugins section and specify ESLint-plugin-React (optional) and ESLint-plugin-react-native as a plugin.
{
"plugins": [
"react",
"react-native"
]
}
If it is not already the case you must also configure ESLint to support JSX.
{
"parserOptions": {
"ecmaFeatures": {
"jsx": true
}
}
}
In order to whitelist all browser-like globals, add react-native/react-native to your config.
{
"env": {
"react-native/react-native": true
}
}
To use another stylesheet providers.
settings: {
'react-native/style-sheet-object-names': ['EStyleSheet', 'OtherStyleSheet', 'PStyleSheet']
}
Finally, enable all of the rules that you would like to use.
{
"rules": {
"react-native/no-unused-styles": 2,
"react-native/split-platform-components": 2,
"react-native/no-inline-styles": 2,
"react-native/no-color-literals": 2,
"react-native/no-raw-text": 2,
"react-native/no-single-element-style-arrays": 2,
}
}
List of supported rules
- no-unused-styles: Detect
StyleSheetrules which are not used in your React components - sort-styles: Require style definitions to be sorted alphabetically
- split-platform-components: Enforce using platform specific filenames when necessary
- no-inline-styles: Detect JSX components with inline styles that contain literal values
- no-color-literals: Detect
StyleSheetrules and inline styles containing color literals instead of variables - no-raw-text: Detect raw text outside of
Textcomponent - no-single-element-style-arrays: No style arrays that have 1 element only
<View style={[{height: 10}]}/>
Shareable configurations
All
This plugin also exports an all configuration that includes every available rule.
{
"plugins": [
/* ... */
"react-native"
],
"extends": [/* ... */, "plugin:react-native/all"]
}
Note: These configurations will import eslint-plugin-react-native and enable JSX in parser options.
-
eslint-plugin-react-hooks配置 在使用create-react-app脚手架生成项目后，使用hooks特性没有eslint提示报错信息。可安装 eslint-plugin-react-hooks并配置package.json中的eslintConfig即可 安装 npm install eslint-plugin-react-hooks --save -dev yarn
-
执行npx create-react-app my-app创建项目，再执行npm run eject package.json如下 { "name": "counter", "version": "0.0.1", "private": true, "homepage": "./", "devDependencies": { "enzyme": "^3.11.0", "enzyme
-
本篇文章是在使用vscode开发react-native和使用typescript作为开发语言的前提下写的。 eslint 是javascript的静态代码分析工具： 它用于查找代码中的错误并统一样式，例如如何使用括号和空格。通过引入 ESLint，修正部分的位置变得清晰，从而减少开发时间。 ① 在命令提示符或 PowerShell 中，移动到要安装 ESlint 的项目文件夹。 ② 执行下面的
-
ESLint 有一套全面的 JavaScript 代码规则，涵盖风格选择并防止常见错误。单独使用 ESLint 可以提升你的项目，但是有一些 ESLint 插件可用于添加特定于 React 的规则，这将帮助你编写可靠的 React 应用程序。 在这篇文章中，我们将讨论这些 ESLint 规则和插件，包括它们适用于 Hooks 的情况。这里有一些快速链接供您跳转： React Hooks 规则 (
-
1. npm 1. npm info react-native：查看react-native所有版本信息; 2. npm uninstall react-native：卸载react-native; 3. npm install --save react-native@0.55.4：安装指定版本react-native; 4. npm install：安装最新版react-native 5. np
-
ESLint是一套javascript代码检测工具。要记住，代码也是写给人看的，所以一定要注意代码的编写规范。ESLint可以根据自己设置的规则实现对代码的检测，从而规范了代码的风格。本篇内容主要介绍如何在VSCode中使用ESLint。 ESLint的官网地址是：https://eslint.org/ 全局初始化： $ npm install eslint -g 在VSCode中安装ESLint
-
vue3.0和ts生成项目时没有eslint 我手动写了.eslintrc.js // @ts-check const { defineConfig } = require('eslint-define-config'); module.exports = defineConfig({ root: true, env: { browser: true, node: true
-
添加依赖 yarn add eslint @react-native-community/eslint-config -D -OR npm i eslint @react-native-community/eslint-config -d 添加 .eslintrc.js配置文件 module.exports = { root: true, extends: '@react-native-
-
eslint-plugin-sql SQL linting rules for ESLint. In its current form, the plugin has been designed and tested to work with Postgres codebase. eslint-plugin-sql Installation Configuration Settings place
-
eslint-plugin-vue Official ESLint plugin for Vue.js �� Documentation See the official website. ⚓ Versioning Policy This plugin is following Semantic Versioning and ESLint's Semantic Versioning Policy.
-
eslint-plugin-node Additional ESLint's rules for Node.js �� Install & Usage $ npm install --save-dev eslint eslint-plugin-node Requires Node.js >=8.10.0 Requires ESLint >=5.16.0 Note: It recommends a
-
eslint-plugin-ember An ESLint plugin that provides a set of rules for Ember applications based on commonly known good practices. ❗️ Requirements ESLint >= 6 Node.js 10.* || 12.* || >= 14 �� Usage 1. I
-
eslint-plugin-wxml 为 lint 微信小程序 wxml 文件而开发的 eslint 插件，可使用 eslint 来检查微信小程序项目内的 wxml 代码 当开发者使用 VSCode 或者 Webstorm 时可以得到代码错误提示，目前支持的 lint 规则如下: 1. wxml/colon-style-event-binding 强制使用:冒号隔开时间绑定 2. wxml/emp
-
eslint-plugin-optimize-regex Optimize regex literals Installation You'll first need to install ESLint: npm i eslint --save-dev Next, install eslint-plugin-optimize-regex: npm install eslint-plugin-opt