React Native 公式の ESLint の設定を見る
ESLint の勉強ついでに React Native 公式の ESLint Config を調べるスクラップ
※ 翻訳には Deepl を使用
設定ファイル全体像
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
*/
module.exports = {
env: {
es6: true,
},
parserOptions: {
sourceType: 'module',
ecmaFeatures: {
jsx: true,
},
},
extends: ['plugin:prettier/recommended'],
plugins: [
'eslint-comments',
'react',
'react-hooks',
'react-native',
'@react-native',
'jest',
],
settings: {
react: {
version: 'detect',
},
},
overrides: [
{
files: ['*.js'],
parser: '@babel/eslint-parser',
plugins: ['ft-flow'],
rules: {
// Flow Plugin
// The following rules are made available via `eslint-plugin-ft-flow`
'ft-flow/define-flow-type': 1,
'ft-flow/use-flow-type': 1,
},
},
{
files: ['*.jsx'],
parser: '@babel/eslint-parser',
},
{
files: ['*.ts', '*.tsx'],
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint/eslint-plugin'],
rules: {
'@typescript-eslint/no-unused-vars': [
'error',
{
argsIgnorePattern: '^_',
destructuredArrayIgnorePattern: '^_',
},
],
'no-unused-vars': 'off',
'no-shadow': 'off',
'@typescript-eslint/no-shadow': 1,
'no-undef': 'off',
'func-call-spacing': 'off',
'@typescript-eslint/func-call-spacing': 1,
},
},
{
files: [
'*.{spec,test}.{js,ts,tsx}',
'**/__{mocks,tests}__/**/*.{js,ts,tsx}',
],
env: {
jest: true,
'jest/globals': true,
},
rules: {
'react-native/no-inline-styles': 0,
quotes: [1, 'single', {avoidEscape: true, allowTemplateLiterals: true}],
},
},
],
// Map from global var to bool specifying if it can be redefined
globals: {
__DEV__: true,
__dirname: false,
__fbBatchedBridgeConfig: false,
AbortController: false,
Blob: true,
alert: false,
cancelAnimationFrame: false,
cancelIdleCallback: false,
clearImmediate: true,
clearInterval: false,
clearTimeout: false,
console: false,
document: false,
ErrorUtils: false,
escape: false,
Event: false,
EventTarget: false,
exports: false,
fetch: false,
File: true,
FileReader: false,
FormData: false,
global: false,
Headers: false,
Intl: false,
Map: true,
module: false,
navigator: false,
process: false,
Promise: true,
requestAnimationFrame: true,
requestIdleCallback: true,
require: false,
Set: true,
setImmediate: true,
setInterval: false,
setTimeout: false,
queueMicrotask: true,
URL: false,
URLSearchParams: false,
WebSocket: true,
window: false,
XMLHttpRequest: false,
},
rules: {
// General
'comma-dangle': [1, 'always-multiline'], // allow or disallow trailing commas
'no-cond-assign': 1, // disallow assignment in conditional expressions
'no-console': 0, // disallow use of console (off by default in the node environment)
'no-const-assign': 2, // disallow assignment to const-declared variables
'no-constant-condition': 0, // disallow use of constant expressions in conditions
'no-control-regex': 1, // disallow control characters in regular expressions
'no-debugger': 1, // disallow use of debugger
'no-dupe-class-members': 2, // Disallow duplicate name in class members
'no-dupe-keys': 2, // disallow duplicate keys when creating object literals
'no-empty': 0, // disallow empty statements
'no-ex-assign': 1, // disallow assigning to the exception in a catch block
'no-extra-boolean-cast': 1, // disallow double-negation boolean casts in a boolean context
'no-extra-parens': 0, // disallow unnecessary parentheses (off by default)
'no-extra-semi': 1, // disallow unnecessary semicolons
'no-func-assign': 1, // disallow overwriting functions written as function declarations
'no-inner-declarations': 0, // disallow function or variable declarations in nested blocks
'no-invalid-regexp': 1, // disallow invalid regular expression strings in the RegExp constructor
'no-negated-in-lhs': 1, // disallow negation of the left operand of an in expression
'no-obj-calls': 1, // disallow the use of object properties of the global object (Math and JSON) as functions
'no-regex-spaces': 1, // disallow multiple spaces in a regular expression literal
'no-reserved-keys': 0, // disallow reserved words being used as object literal keys (off by default)
'no-sparse-arrays': 1, // disallow sparse arrays
'no-unreachable': 2, // disallow unreachable statements after a return, throw, continue, or break statement
'use-isnan': 1, // disallow comparisons with the value NaN
'valid-jsdoc': 0, // Ensure JSDoc comments are valid (off by default)
'valid-typeof': 1, // Ensure that the results of typeof are compared against a valid string
// Best Practices
// These are rules designed to prevent you from making mistakes. They either prescribe a better way of doing something or help you avoid footguns.
'block-scoped-var': 0, // treat var statements as if they were block scoped (off by default)
complexity: 0, // specify the maximum cyclomatic complexity allowed in a program (off by default)
'consistent-return': 0, // require return statements to either always or never specify values
curly: 1, // specify curly brace conventions for all control statements
'default-case': 0, // require default case in switch statements (off by default)
'dot-notation': 1, // encourages use of dot notation whenever possible
eqeqeq: [1, 'allow-null'], // require the use of === and !==
'guard-for-in': 0, // make sure for-in loops have an if statement (off by default)
'no-alert': 1, // disallow the use of alert, confirm, and prompt
'no-caller': 1, // disallow use of arguments.caller or arguments.callee
'no-div-regex': 1, // disallow division operators explicitly at beginning of regular expression (off by default)
'no-else-return': 0, // disallow else after a return in an if (off by default)
'no-eq-null': 0, // disallow comparisons to null without a type-checking operator (off by default)
'no-eval': 2, // disallow use of eval()
'no-extend-native': 1, // disallow adding to native types
'no-extra-bind': 1, // disallow unnecessary function binding
'no-fallthrough': 1, // disallow fallthrough of case statements
'no-floating-decimal': 1, // disallow the use of leading or trailing decimal points in numeric literals (off by default)
'no-implied-eval': 1, // disallow use of eval()-like methods
'no-labels': 1, // disallow use of labeled statements
'no-iterator': 1, // disallow usage of __iterator__ property
'no-lone-blocks': 1, // disallow unnecessary nested blocks
'no-loop-func': 0, // disallow creation of functions within loops
'no-multi-str': 0, // disallow use of multiline strings
'no-native-reassign': 0, // disallow reassignments of native objects
'no-new': 1, // disallow use of new operator when not part of the assignment or comparison
'no-new-func': 2, // disallow use of new operator for Function object
'no-new-wrappers': 1, // disallows creating new instances of String,Number, and Boolean
'no-octal': 1, // disallow use of octal literals
'no-octal-escape': 1, // disallow use of octal escape sequences in string literals, such as var foo = "Copyright \251";
'no-proto': 1, // disallow usage of __proto__ property
'no-redeclare': 0, // disallow declaring the same variable more then once
'no-return-assign': 1, // disallow use of assignment in return statement
'no-script-url': 1, // disallow use of javascript: urls.
'no-self-compare': 1, // disallow comparisons where both sides are exactly the same (off by default)
'no-sequences': 1, // disallow use of comma operator
'no-unused-expressions': 0, // disallow usage of expressions in statement position
'no-useless-escape': 1, // disallow escapes that don't have any effect in literals
'no-void': 1, // disallow use of void operator (off by default)
'no-warning-comments': 0, // disallow usage of configurable warning terms in comments": 1, // e.g. TODO or FIXME (off by default)
'no-with': 1, // disallow use of the with statement
radix: 1, // require use of the second argument for parseInt() (off by default)
'semi-spacing': 1, // require a space after a semi-colon
'vars-on-top': 0, // requires to declare all vars on top of their containing scope (off by default)
'wrap-iife': 0, // require immediate function invocation to be wrapped in parentheses (off by default)
yoda: 1, // require or disallow Yoda conditions
// Variables
// These rules have to do with variable declarations.
'no-catch-shadow': 1, // disallow the catch clause parameter name being the same as a variable in the outer scope (off by default in the node environment)
'no-delete-var': 1, // disallow deletion of variables
'no-label-var': 1, // disallow labels that share a name with a variable
'no-shadow': 1, // disallow declaration of variables already declared in the outer scope
'no-shadow-restricted-names': 1, // disallow shadowing of names such as arguments
'no-undef': 2, // disallow use of undeclared variables unless mentioned in a /*global */ block
'no-undefined': 0, // disallow use of undefined variable (off by default)
'no-undef-init': 1, // disallow use of undefined when initializing variables
'no-unused-vars': [
1,
{vars: 'all', args: 'none', ignoreRestSiblings: true},
], // disallow declaration of variables that are not used in the code
'no-use-before-define': 0, // disallow use of variables before they are defined
// Node.js
// These rules are specific to JavaScript running on Node.js.
'handle-callback-err': 1, // enforces error handling in callbacks (off by default) (on by default in the node environment)
'no-mixed-requires': 1, // disallow mixing regular variable and require declarations (off by default) (on by default in the node environment)
'no-new-require': 1, // disallow use of new operator with the require function (off by default) (on by default in the node environment)
'no-path-concat': 1, // disallow string concatenation with __dirname and __filename (off by default) (on by default in the node environment)
'no-process-exit': 0, // disallow process.exit() (on by default in the node environment)
'no-restricted-modules': 1, // restrict usage of specified node modules (off by default)
'no-sync': 0, // disallow use of synchronous methods (off by default)
// ESLint Comments Plugin
// The following rules are made available via `eslint-plugin-eslint-comments`
'eslint-comments/no-aggregating-enable': 1, // disallows eslint-enable comments for multiple eslint-disable comments
'eslint-comments/no-unlimited-disable': 1, // disallows eslint-disable comments without rule names
'eslint-comments/no-unused-disable': 1, // disallow disables that don't cover any errors
'eslint-comments/no-unused-enable': 1, // // disallow enables that don't enable anything or enable rules that weren't disabled
// Stylistic Issues
// These rules are purely matters of style and are quite subjective.
'key-spacing': 0,
'keyword-spacing': 1, // enforce spacing before and after keywords
'jsx-quotes': [1, 'prefer-double'], // enforces the usage of double quotes for all JSX attribute values which doesn’t contain a double quote
'comma-spacing': 0,
'no-multi-spaces': 0,
'brace-style': 0, // enforce one true brace style (off by default)
camelcase: 0, // require camel case names
'consistent-this': 1, // enforces consistent naming when capturing the current execution context (off by default)
'eol-last': 1, // enforce newline at the end of file, with no multiple empty lines
'func-names': 0, // require function expressions to have a name (off by default)
'func-style': 0, // enforces use of function declarations or expressions (off by default)
'new-cap': 0, // require a capital letter for constructors
'new-parens': 1, // disallow the omission of parentheses when invoking a constructor with no arguments
'no-nested-ternary': 0, // disallow nested ternary expressions (off by default)
'no-array-constructor': 1, // disallow use of the Array constructor
'no-empty-character-class': 1, // disallow the use of empty character classes in regular expressions
'no-lonely-if': 0, // disallow if as the only statement in an else block (off by default)
'no-new-object': 1, // disallow use of the Object constructor
'func-call-spacing': 1, // disallow space between function identifier and application
'no-ternary': 0, // disallow the use of ternary operators (off by default)
'no-trailing-spaces': 1, // disallow trailing whitespace at the end of lines
'no-underscore-dangle': 0, // disallow dangling underscores in identifiers
'no-mixed-spaces-and-tabs': 1, // disallow mixed spaces and tabs for indentation
quotes: [1, 'single', 'avoid-escape'], // specify whether double or single quotes should be used
'quote-props': 0, // require quotes around object literal property names (off by default)
semi: 1, // require or disallow use of semicolons instead of ASI
'sort-vars': 0, // sort variables within the same declaration block (off by default)
'space-in-brackets': 0, // require or disallow spaces inside brackets (off by default)
'space-in-parens': 0, // require or disallow spaces inside parentheses (off by default)
'space-infix-ops': 1, // require spaces around operators
'space-unary-ops': [1, {words: true, nonwords: false}], // require or disallow spaces before/after unary operators (words on by default, nonwords off by default)
'max-nested-callbacks': 0, // specify the maximum depth callbacks can be nested (off by default)
'one-var': 0, // allow just one var statement per function (off by default)
'wrap-regex': 0, // require regex literals to be wrapped in parentheses (off by default)
// Legacy
// The following rules are included for compatibility with JSHint and JSLint. While the names of the rules may not match up with the JSHint/JSLint counterpart, the functionality is the same.
'max-depth': 0, // specify the maximum depth that blocks can be nested (off by default)
'max-len': 0, // specify the maximum length of a line in your program (off by default)
'max-params': 0, // limits the number of parameters that can be used in the function declaration. (off by default)
'max-statements': 0, // specify the maximum number of statement allowed in a function (off by default)
'no-bitwise': 1, // disallow use of bitwise operators (off by default)
'no-plusplus': 0, // disallow use of unary operators, ++ and -- (off by default)
// React Plugin
// The following rules are made available via `eslint-plugin-react`.
'react/display-name': 0,
'react/jsx-boolean-value': 0,
'react/jsx-no-comment-textnodes': 2,
'react/jsx-no-duplicate-props': 2,
'react/jsx-no-undef': 2,
'react/jsx-sort-props': 0,
'react/jsx-uses-react': 1,
'react/jsx-uses-vars': 1,
'react/no-did-mount-set-state': 1,
'react/no-did-update-set-state': 1,
'react/no-multi-comp': 0,
'react/no-string-refs': 1,
'react/no-unknown-property': 0,
'react/no-unstable-nested-components': 1,
'react/prop-types': 0,
'react/react-in-jsx-scope': 1,
'react/self-closing-comp': 1,
'react/wrap-multilines': 0,
// React-Hooks Plugin
// The following rules are made available via `eslint-plugin-react-hooks`
'react-hooks/rules-of-hooks': 2,
'react-hooks/exhaustive-deps': 2,
// React-Native Plugin
// The following rules are made available via `eslint-plugin-react-native`
'react-native/no-inline-styles': 1,
// Jest Plugin
// The following rules are made available via `eslint-plugin-jest`.
'jest/no-disabled-tests': 1,
'jest/no-focused-tests': 1,
'jest/no-identical-title': 1,
'jest/valid-expect': 1,
},
};
使い方 (prettier は内部で使用しているため必須)
npm install -D eslint prettier @react-native/eslint-config
{
"extends": "@react-native"
}
はじめに package.json を確認
{
"name": "@react-native/eslint-config",
"version": "0.73.0",
"description": "ESLint config for React Native",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/facebook/react-native.git",
"directory": "packages/eslint-config-react-native"
},
"homepage": "https://github.com/facebook/react-native/tree/HEAD/packages/eslint-config-react-native#readme",
"keywords": [
"eslint",
"config",
"react-native"
],
"bugs": "https://github.com/facebook/react-native/issues",
"engines": {
"node": ">=18"
},
"main": "index.js",
"dependencies": {
"@babel/core": "^7.20.0",
"@babel/eslint-parser": "^7.20.0",
"@react-native/eslint-plugin": "^0.73.0",
"@typescript-eslint/eslint-plugin": "^5.57.1",
"@typescript-eslint/parser": "^5.57.1",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-eslint-comments": "^3.2.0",
"eslint-plugin-ft-flow": "^2.0.1",
"eslint-plugin-jest": "^26.5.3",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-native": "^4.0.0"
},
"peerDependencies": {
"eslint": ">=8",
"prettier": ">=2"
},
"devDependencies": {
"eslint": "^8.19.0",
"prettier": "2.8.8"
}
}
env
env: {
es6: true,
},
env
で環境を指定する。指定した環境のグローバル変数を使用できるようになる。厳密には設定しなくてもグローバル変数を使用することはできるが、未定義変数として ESLint がエラーを出すのでそれを防ぐために設定する。よく使うのは browser
、node
、jest
、ブラウザ拡張機能を開発しているなら webextensions
あたり。ESLint のデフォルトは ES5。
例えば webextensions: true
にした場合、どんなグローバル変数が使用できるか確認したい場合は globals パッケージの globals.json
を見る。browser
、chrome
、opr
が追加されることがわかる。
ちなみにこの globals.json
を ESLint のどこから使用しているかというとこのあたり。
parserOptions
parserOptions: {
sourceType: 'module',
ecmaFeatures: {
jsx: true,
},
},
sourceType
は script
(デフォルト) or module
。ES Modules を使う場合 module
を設定する必要あり。
jsx
は React を書くので必要。
ecmaVersion
が設定されている例もよく見るが、env
で es6: true
を設定している場合は、parserOptions
で ecmaVersion: 6
が自動的に設定されるため書かなくても良い。
反対に ecmaVersion: 6
を設定しても es6: true
が自動的に設定されるわけではないため env
の設定は必須である。
ecmaVersion: 6
は ES6 構文をサポートすること、es6: true
は ES6 のグローバル変数を使用できるようにすることが役割である。
「グローバル変数を追加 => 構文をサポート」であり、その逆は成り立たないと勝手に解釈。
extends
ESLint shareable configsは、ESLintの事前定義された設定で、あなたのプロジェクトで使用することができます。ルールやその他の設定をnpmパッケージにまとめます。設定ファイルに記述できるものであれば、何でも共有可能な設定ファイルに記述できます。
共有可能な設定は、単独で公開することも、プラグインの一部として公開することもできます。
extends: ['plugin:prettier/recommended'],
ここが ESLint 設定で最も肝心なところだろう。extends
はその名の通り設定ファイルを拡張する。
plugins
プラグインにも様々な種類がある (カスタムルールのみでないことに注意)
- カスタムルール:
rules
で使用 - カスタム設定:
extends
で使用 - カスタム環境:
env
で使用 - カスタムプロセッサ:
processor
で使用
plugins: [
'eslint-comments',
'react',
'react-hooks',
'react-native',
'@react-native',
'jest',
],
使用するプラグインを配列で指定する。ここでは eslint-plugin-
を省略することが可能。例えば react
は eslint-plugin-react
、jest
は eslint-plugin-jest
、@react-native
は @react-native/eslint-plugin
のことである。もちろん省略しないで書くことも可能。
プラグイン名のルールはこちら
- eslint-plugin-<plugin-name>
- @<scope>/eslint-plugin-<plugin-name>
- @<scope>/eslint-plugin
settings
ESLintは設定ファイルへの共有設定の追加をサポートしています。プラグインは設定を使用して、すべてのルールで共有される情報を指定します。ESLintの設定ファイルに設定オブジェクトを追加すると、実行されるすべてのルールにそのオブジェクトが提供されます。これはカスタムルールを追加する際に、同じ情報にアクセスして簡単に設定できるようにしたい場合に便利です。
settings: {
react: {
version: 'detect',
},
},
eslint-plugin-react
を使用する場合 react.version
を設定する必要がある。detect
にするとインストールされたバージョンが自動で適用される。デフォルトは latest
。
settings.react.version
が使用されている箇所はこのあたり
このような使われ方をしている
// lib/util/version.js
const semver = require('semver');
function test(semverRange, confVer) {
return semver.satisfies(confVer, semverRange);
}
function testReactVersion(context, semverRange) {
return test(semverRange, getReactVersionFromContext(context));
}
// lib/rules/no-unsafe.js
module.exports = {
meta: {},
create(context) {
....
const isApplicable = testReactVersion(context, '>= 16.3.0');
if (!isApplicable) {
return {};
}
....
},
};
overrides
同じディレクトリ内のファイルに対する構成が異なる必要がある場合など、より細かい制御が必要な場合があります。この場合、overrides キーの下に、特定のグロブ・パターンに一致するファイルにのみ適用される構成を、コマンド・ラインで渡すのと同じ形式(例えば、app/**/*.test.js )で指定できます。
{
files: ['*.js'],
parser: '@babel/eslint-parser',
plugins: ['ft-flow'],
rules: {
// Flow Plugin
// The following rules are made available via `eslint-plugin-ft-flow`
'ft-flow/define-flow-type': 1,
'ft-flow/use-flow-type': 1,
},
}
これはプロジェクト内の .js
ファイルのみに適用される設定を書いている。
parser
{
files: ['*.jsx'],
parser: '@babel/eslint-parser',
}
{
files: ['*.ts', '*.tsx'],
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint/eslint-plugin'],
rules: {
'@typescript-eslint/no-unused-vars': [
'error',
{
argsIgnorePattern: '^_',
destructuredArrayIgnorePattern: '^_',
},
],
'no-unused-vars': 'off',
'no-shadow': 'off',
'@typescript-eslint/no-shadow': 1,
'no-undef': 'off',
'func-call-spacing': 'off',
'@typescript-eslint/func-call-spacing': 1,
},
}
TypeScript のコードを ESLint が解釈できるようにする設定をしている。
{
files: [
'*.{spec,test}.{js,ts,tsx}',
'**/__{mocks,tests}__/**/*.{js,ts,tsx}',
],
env: {
jest: true,
'jest/globals': true,
},
rules: {
'react-native/no-inline-styles': 0,
quotes: [1, 'single', {avoidEscape: true, allowTemplateLiterals: true}],
},
}
globals
ESLintのコアルールのいくつかは、実行時にコードが利用できるグローバル変数の知識に依存しています。グローバル変数は実行時に変更されるだけでなく、異なる環境間で大きく変化する可能性があるため、ESLintはあなたの実行環境にどのようなグローバル変数が存在するかについて仮定しません。どのようなグローバル変数が利用可能かについての知識を必要とするルールを使用したい場合は、設定ファイルでグローバル変数を定義するか、ソースコードで設定コメントを使用してください。
globals: {
__DEV__: true,
__dirname: false,
__fbBatchedBridgeConfig: false,
AbortController: false,
Blob: true,
alert: false,
cancelAnimationFrame: false,
cancelIdleCallback: false,
clearImmediate: true,
clearInterval: false,
clearTimeout: false,
console: false,
document: false,
ErrorUtils: false,
escape: false,
Event: false,
EventTarget: false,
exports: false,
fetch: false,
File: true,
FileReader: false,
FormData: false,
global: false,
Headers: false,
Intl: false,
Map: true,
module: false,
navigator: false,
process: false,
Promise: true,
requestAnimationFrame: true,
requestIdleCallback: true,
require: false,
Set: true,
setImmediate: true,
setInterval: false,
setTimeout: false,
queueMicrotask: true,
URL: false,
URLSearchParams: false,
WebSocket: true,
window: false,
XMLHttpRequest: false,
}
setTimeout
などは env
で browser: true
や node: true
とすると手動で globals
に追加する必要がない。しかし、React Native の実行環境はブラウザや Node.js とは異なるため、browser: true
としてしまうと使用できないグローバル変数が追加されてしまう。reactnative: true
のような設定はないため手動で追加する形になっている。
※ ちなみに React Native は JS エンジンとして Safari などに搭載されている JavaScriptCore を使用してきた。しかし最近はパフォーマンス向上のため React Native に最適化された Meta社作の hermes を使用している。
変数の上書きを許可する場合は true
、上書きを禁止する場合は false
を設定する。
React Native の設定ファイルは boolean 値で設定しているが、現在は writable
と readonly
を使用する書き方が推奨されている。false
は readonly
、true
は writable
と等価。
{
"globals": {
"var1": "writable",
"var2": "readonly"
}
}
rules
スクラップ書いている途中で記事にした