最近、同社のフロントエンドコード仕様と一連のeslint検証ルールが次のようにまとめられました。
rules: {
'no-var': 'error', // 禁止使用var
'prefer-const': 'error', // 建议使用const
'no-const-assign': 'error', // 禁止修改使用const（no-const-assign）声明的变量
'object-shorthand': 'error', // 方法属性值简写
'quote-props': [ 'error', 'as-needed' ], // 只对那些无效的标示使用引号 ''
'no-array-constructor': 'error', // 数组要求字面量赋值
'no-new-object': 'error', // 对象要求字面值创建对象
'array-callback-return': 'error', // 在数组方法的回调中强制执行
quotes: [ 'error', 'single' ], // string 统一用单引号 ''
'prefer-template': 'error', // 建议使用模板字符串
'no-eval': 'error', // 禁止使用eval
'no-useless-escape': 'error', // 不要使用不必要的转义字符
'func-style': 'error', // 用命名函数表达式而不是函数声明
'prefer-rest-params': 'error', // 建议使用rest参数而不是参数
'space-before-function-paren': [ 'error', 'never' ], // 函数前不允许使用空格或
'space-before-blocks': [ 'error', 'always' ], // 块前需要空格
'no-param-reassign': 'error', // 不允许重新分配函数参数
'prefer-spread': 'error', // 建议使用spread语法而不是.apply（）
'prefer-arrow-callback': 'error', // 建议使用箭头函数
'arrow-spacing': 'error', // 箭头函数的箭头前后需要空格
'no-confusing-arrow': [ 'error', {
allowParens: true } ], // 不允许箭头函数与比较混淆
'no-useless-constructor': 'error', // 不允许不必要的构造函数
'no-dupe-class-members': 'error', // 不允许在类成员中使用重复名称
'no-duplicate-imports': [ 'error', {
includeExports: true } ], // 不允许重复导入
'import/no-mutable-exports': 'error', // 不要导出可变的绑定
'import/first': 'error', // import 放在其他所有语句之前
'dot-notation': 'error', // 访问属性时使用点符号
'no-restricted-properties': 'error', // 做幂运算时用幂操作符 **
'no-multi-assign': 'error', // 不要使用连续变量分配
'no-unused-vars': 'error', // 不允许有未使用的变量
eqeqeq: [ 'error', 'always' ], // 使用 === 和 !== 而不是 == 和 !=
'no-case-declarations': 'error', // 不允许在case/default子句中使用词法声明
'no-nested-ternary': 'error', // 三元表达式不应该嵌套，通常是单行表达式
'no-unneeded-ternary': 'error', // 避免不需要的三元表达式
'no-mixed-operators': 'error', // 不允许不同运算符的混合
'nonblock-statement-body-position': [ 'error', 'beside' ], // 强制单行语句的位置
'brace-style': 'error', // 需要大括号样式
'no-else-return': 'error', // 如果if语句都要用return返回，那后面的else就不用写了。如果if块中包含return，它后面的else if块中也包含了return，这个时候就可以把else if拆开
indent: [ 'error', 2, {
SwitchCase: 1 } ], // 强制2个空格
'keyword-spacing': [ 'error', {
before: true } ], // 在关键字前后强制使用一致的间距
'space-infix-ops': [ 'error', {
int32Hint: false } ], // 用空格来隔开运算符
'padded-blocks': [ 'error', 'never' ], // 不要故意留一些没必要的空白行
'array-bracket-spacing': [ 'error', 'never' ], // 方括号里不要加空格
'object-curly-spacing': [ 'error', 'always' ], // 花括号 {} 里加空格
'comma-spacing': [ 'error', {
before: false, after: true } ], // , 前避免空格， , 后需要空格
'key-spacing': [ 'error', {
beforeColon: false } ], // 在对象的属性中， 键值之间要有空格
'no-trailing-spaces': 'error', // 行末不要空格
'no-multiple-empty-lines': 'error', // 避免出现多个空行。 在文件末尾只允许空一行
'no-new-wrappers': 'error', // 不允许基元包装实例
radix: [ 'error', 'as-needed' ], // 需要基数参数
camelcase: [ 'error', {
properties: 'always' } ], // 要求驼峰式命名对象、函数、实例
'new-cap': 'error', // 要求构造函数名称以大写字母开头
'spaced-comment': [
'error',
'always',
{
line: {
markers: [ '/' ],
exceptions: [ '-', '+' ]
},
block: {
markers: [ '!' ],
exceptions: [ '*' ],
balanced: true
}
}
] // 注释规范
}
この一連のルールに応えて、プロジェクトで試してみたところ、かなりの問題があったことがわかりました。700+は
その後、1つずつ変更され、最終的に0にクリアされました。OCDは非常に快適だと言ったので
、今回は修正を要約します。 、頻繁に発生する問題：
1.識別子xxxxxxはキャメルケースではありません。
問題の説明：xxxxxxがラクダケースメソッドで名前が付けられていないことを意味します。
例：<img src={default_logo} alt="图标" />ここでのdefault_logo
ソリューションのように：名前をラクダケースメソッドに変更するだけです。<img src={defaultLogo} alt="图标" />
2.xxxxxxが再割り当てされることはありません。代わりにconstを使用してください。
問題の説明：xxxxxxが定義されているが、再割り当てされていないことを意味します。
例を定義するには、 constを使用することをお勧めします：let { dispatch } = this.props;ここでのディスパッチ
ソリューションのように：const定義に変更します。const { dispatch } = this.props;
3.三項式をネストしないでください。
問題の説明：3値式をネストしないことを意味します。
例：type === 'A' ? '商品类型A' : type === 'B' ? '商品类型B' : '商品类型C'
解決策：コードロジックに従って、if else、switch、またはその他のメソッドを使用して分割します。
4.関数式が必要です。
問題の説明：関数宣言の代わりに名前付き関数式を使用することをお勧めします。
例：export function func1() {...函数体}'
解決策：名前付き関数に変更します。export const func1 = () => {...函数体}
5.機能パラメータxxxxxxへの割り当て
問題の説明：パラメータを直接割り当てることができないことを意味します。
例：export const func1 = (value) => { value = xx}'
解決策：これを行わないようにしてください。実行する変数をもう1つ定義できます。
export const func1 = (value) => { let newValue = value; newValue = xx}'
6.名前が大文字で始まる関数は、コンストラクターとしてのみ使用する必要があります。
問題の説明：これは、関数の最初の文字が大文字ではなく一般的に推奨されることを意味し
ます。たとえば、<div>{InputDom()}</div>'ここでInputDomのよう
に解決します：行の最初の文字を小文字に変更します
7.矢印関数で値を返すことが期待されます。
問題の説明：これは、map（）やfilter（）などのメソッドで一般的なこの関数に戻り値があることを意味します。
例：arr.map(item => { ...函数体 });
解決策：要件を確認します。本当に値を返す必要がある場合は、を返します。マップが配列のトラバースにのみ使用される場合は、代わりにforEachを使用できます
8.xxxxxxには値が割り当てられますが、使用されることはありません。
問題の説明：変数xxxxxxが定義されているが、使用されていないことを意味します。
解決策：これらの変数を削除します。
9。！==を期待し、代わりに！=を見ました。和期待===代わりに見た==。
問題の説明：それを使用することを意味します！=そして==
解決策：それを変えてください！==および===
10. rel =“ noopener noreferrer”なしでtarget = "_ blank"を使用することは、セキュリティリスクです。https：//mathiasbynens.github.io/rel-noopenerを参照してください。
問題の説明：タグにtarget = "_ blank"を使用する場合は、rel = "noopener noreferrer"を追加することをお勧めします。これは、新しく開いたページで、window.openerを介してソースページを部分的に制御できるためです。 、これは安全ではありません。rel= "noopener noreferrer"を追加すると、一般的なwindow.openerがnullになります。
解決策：okにrel = "noopenernoreferrer"を追加します。
11.evalは有害な場合があります。
問題の説明：eval（）は括弧内のjsを実行するため、evalを使用しないことを意味します。これは安全に
解決できません。カスタム関数を使用して目的の効果を達成するか、他の方法で書き直すことができます。
12.componentWillReceivePropsはReact16.9.0以降非推奨になりました。代わりに、UNSAFE_componentWillReceivePropsを使用してください。
問題の説明：componentWillReceivePropsのライフサイクルの名前が変更されたことを意味します。
解決するには、代わりにUNSAFE_componentWillReceivePropsを使用することをお勧めします。UNSAFE_componentWillReceivePropsに変更すれば問題ありません。
13.デフォルトのケースが予想されます。
問題の説明：意味はケースdefauleケースではありませんが、スイッチケースの使用場面がある
解決するために、最終的な表面に追加するには、スイッチケースを使用することを忘れないでください：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 ...其他规则
UNSAFE_componentWillReceiveProps = () => {}