eslintの修正コードで発生した問題と解決策

最近、会社のフロントエンドがコード化され、以下のようにeslintのチェックサムルールがまとまりました。

	rules: {
		'no-var': 'error', // disable the use of var
		'prefer-const': 'error', // recommend using const
		'no-const-assign': 'error', // prohibit modification of variables declared with const (no-const-assign)
		'object-shorthand': 'error', // abbreviation of method property values
		'quote-props': [ 'error', 'as-needed' ], // use quotes only for invalid markers ''
		'no-array-constructor': 'error', // array requires literal assignment
		'no-new-object': 'error', // objects require literal values to create objects
		'array-callback-return': 'error', // enforced in the callback of the array method
		quotes: [ 'error', 'single' ], // string in single quotes ''
		'prefer-template': 'error', // recommend using template strings
		'no-eval': 'error', // disable the use of eval
		'no-useless-escape': 'error', // don't use unnecessary escaped characters
		'func-style': 'error', // use named function expressions instead of function declarations
		'prefer-rest-params': 'error', // recommend using rest parameters instead of arguments
		'space-before-function-paren': [ 'error', 'never' ], // Do not allow spaces before functions or
		'space-before-blocks': [ 'error', 'always' ], // spaces are required before blocks
		'no-param-reassign': 'error', // Do not allow reassigning function parameters
		'prefer-spread': 'error', // recommend using spread syntax instead of .apply()
		'prefer-arrow-callback': 'error', // Recommend using arrow functions
		'arrow-spacing': 'error', // the arrow function needs spaces before and after the arrow
		'no-confusing-arrow': [ 'error', { allowParens: true } ], // Do not allow arrow functions to be confused with comparisons
		'no-useless-constructor': 'error', // disallow unnecessary constructors
		'no-dupe-class-members': 'error', // Do not allow duplicate names in class members
		'no-duplicate-imports': [ 'error', { includeExports: true } ], // Do not allow duplicate imports
		'import/no-mutable-exports': 'error', // don't export mutable bindings
		'import/first': 'error', // import before all other statements
		'dot-notation': 'error', // use dot notation when accessing properties
		'no-restricted-properties': 'error', // use power operator when doing power operations **
		'no-multi-assign': 'error', // don't use continuous variable assignment
		'no-unused-vars': 'error', // don't allow unused variables
		eqeqeq: [ 'error', 'always' ], // use === and ! == instead of == and ! =
		'no-case-declarations': 'error', // do not allow lexical declarations in case/default clauses
		'no-nested-ternary': 'error', // ternary expressions should not be nested, usually single-line expressions
		'no-unneeded-ternary': 'error', // avoid unneeded ternary expressions
		'no-mixed-operators': 'error', // do not allow mixing of different operators
		'non-block-statement-body-position': [ 'error', 'beside' ], // force single-line statement position
		'brace-style': 'error', // requires brace style
		'no-else-return': 'error', // If the if statements are all to be returned with return, then the subsequent else is not needed. If the if block contains return, it is followed by an else if block that also contains return, at which point the else if can be split up
		indent: [ 'error', 2, { SwitchCase: 1 } ], // force 2 spaces
		'keyword-spacing': [ 'error', { before: true } ], // force consistent spacing before and after keywords
		'space-infix-ops': [ 'error', { int32Hint: false } ], // use spaces to separate operators
		'padded-blocks': [ 'error', 'never' ], // don't intentionally leave unnecessary blank lines
		'array-bracket-spacing': [ 'error', 'never' ], // don't put spaces in the brackets
		'object-curly-spacing': [ 'error', 'always' ], // brackets {} with spaces
		'comma-spacing': [ 'error', { before: false, after: true } ], // , avoid spaces before, , need spaces after
		'key-spacing': [ 'error', { beforeColon: false } ], // In the object's properties, there should be spaces between keys and values
		'no-tiling-spaces': 'error', // no spaces at the end of lines
		'no-multiple-empty-lines': 'error', // Avoid multiple empty lines. Allow only one blank line at the end of the file
		'no-new-wrappers': 'error', // Do not allow primitive wrapper instances
		radix: [ 'error', 'as-needed' ], // requires primitive argument
		camelcase: [ 'error', { properties: 'always' } ], // require camelcase naming of objects, functions, instances
		'new-cap': 'error', // require constructor names to start with an uppercase letter
		'spaced-comment': [
			'error',
			'always',
			{
				line: {
					markers: [ '/' ],
					exceptions: [ '-', '+' ]
				},
				block: {
					markers: [ '! ],
					exceptions: [ '*' ],
					balanced: true
				}
			}
		] // annotation specification
	}

私のプロジェクトでこのルールセットを使って実験してみたところ、かなり多くの問題が見つかりました、700+。

その後、一つ一つ修正し、最終的に0をクリアし、OCDは快適だと言っていた
次に、今回のオーバーホールでよくある問題点をまとめておきます。

1. 識別子 xxxxxx がキャメルケースでない。

問題の説明 : xxxxxxxはhumpメソッドで命名されていないことを意味します。
例 例 <img src={default_logo} alt="icon" /> default_logoのように
解決する : ネーミングをハンプ方式に変更するだけ

<img src={defaultLogo} alt="icon" />

2. xxxxxxxは決して再割り当てされません。代わりにconstを使用してください。

問題の説明 : xxxxxxx は定義されているが再割り当てされていないため、const を使用して定義することをお勧めします。
例 例 let { dispatch } = this.props; このディスパッチのように
解決する : 代わりにconstで定義すればいいだけ

const { dispatch } = this.props;

3. 三項式を入れ子にしない。

問題の説明 : 3項式をネストしてはいけないという意味です。
例 例

type === 'A' ? 'Product type A' : type === 'B' ? 'Commodity type B' : 'Commodity type C'

解決する コードのロジックに応じて、if else や switch などで分割します。

4. 関数式を期待した。

問題の説明 : つまり、関数宣言の代わりに名前付き関数式を使うことが推奨されています。
例 例

export function func1() {... function body}'

解決する : 名前付き関数を使用するように変更

export const func1 = () => {... function body}

5.ファンクションパラメータxxxxxへのアサインメント

問題の説明 : つまり、割り当てパラメータに直接アクセスすることはできません。
例 例

export const func1 = (value) => { value = xx}'

解答 : このようなことはしないようにしますが、必要であれば追加の変数を定義してください。

export const func1 = (value) => { let newValue = value; newValue = xx}'

6. 大文字で始まる名前の関数は、コンストラクタとしてのみ使用すること。

問題の説明 : これは、一般的に関数の最初の文字を大文字にしないことが推奨されていることを意味します
例 例 <div>{InputDom()}</div>' InputDomのように
解決する : 最初の文字を小文字に変えるだけ

7. arrow 関数で値を返すと予想される。

問題の説明 : この関数内に戻り値が必要であることを意味し、一般的に map() や filter() のようなメソッドで見られます。
例 例

arr.map(item => { ... function body });

解答 本当に値を返す必要があるのなら、return outしてください。mapのように配列を反復処理するだけなら、forEachで代用できる。

8. xxxxxxxは値が割り当てられているが、一度も使用されていない。

問題の説明 : 変数 xxxxxxx は定義されているが、使用されていないことを意味します。
解決方法 : これらの変数を削除します。

9. 期待した! と思ったら「==」で、「==」と思ったら「==」で。

質問の説明 : は、! = と == の使い分けを意味します。
解決する を !== と === に変更する。

10. target="_blank" を rel="noopener noreferrer" なしで使うのはセキュリティ上のリスクがあります: https://mathiasbynens. github.io/rel-noopener を参照してください。

問題の説明 : これは、aタグでtarget="_blank"を使用する場合、それはrel="noopener noreferrer"を追加することをお勧めしますことを意味します。理由は、新しく開いたページでソースページへのwindow.openerを介して取得することができますこれは安全ではないとrel="とnoopener noreferrerは、一般のwindow.openerはヌルを得ることになります。
解決する : rel="noopener noreferrer"を追加すればOK!

11.evalは有害である可能性がある。

問題の説明 : eval()は括弧の中のjsを実行するので安全ではないので、evalを使わないでください、という意味です。
解決方法 : カスタム関数を使用する、または、以下のように書き換えてください。

12. componentWillReceiveProps は React 16.9.0 以降で非推奨となりました。

問題の内容 : componentWillReceiveProps のライフサイクルの名前が変更されたことを意味します。
解決方法 : UNSAFE_componentWillReceivePropsに置き換えればOK!

13. デフォルトのケースを期待。

問題の説明 : デフォルトケースがなく、スイッチケースを使用するシナリオの場合を指します。
解決方法 : スイッチ・ケースを使用することを忘れないでください。

default: break.

プロジェクトをまとめる際に、より頻繁に発生する警告やエラーの種類は以下の通りです。
その後、修正作業中にUNSAFE_componentWillReceivePropsのようなハンプメソッドに違反するあまり良くないものに遭遇し、これらのあまり良くないものについては、一時的にチェックしないようにするのが今のやり方です。
チェックサム回避の書き方は以下の通りです。
1. ファイル全体に対してチェックサムを行わない
ファイルの先頭に、次のように書きます。

/* eslint-disable */

2. コードブロックのチェックサムがない
使用方法 /* eslint-disable */ と /* eslint-enable */ ラップアップ

/* eslint-disable */
console.log (111)
/* eslint-enable */

2. コードブロックのチェックサムがない
使用方法 /* eslint-disable */ と /* eslint-enable */ ラップアップ

/* eslint-disable */
console.log (111)
/* eslint-enable */

3. 指定行のチェックサムがない
これには、次の2つの方法があります。
1つは console.log(1) // eslint-disable-line ;
もう1つは

// eslint-disable-next-line
console.log(1)

4. 上記は全てのルールに対してチェックサムを行わないので、1つまたは一部のルールだけチェックサムを行わないようにしたい場合は、上記のUNSAFE_componentWillReceivePropsのように、別途ルールを追加することが可能です

// eslint-disable-next-line camelcase ... Other rules
UNSAFE_componentWillReceiveProps = () => {}