Recientemente, se han compilado la especificación del código de front-end de la compañía y un conjunto de reglas de verificación de eslint, de la siguiente manera:
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
}
}
] // 注释规范
}
En respuesta a este conjunto de reglas, lo probé en el proyecto y descubrí que había bastantes problemas. Más de 700 se
modificaron posteriormente uno por uno y finalmente se borraron a 0. OCD dijo que estaba muy cómodo. 
Luego, resumiré mi rectificación esta vez. , Algunos problemas frecuentes:
1. El identificador xxxxxx no está en caja camel.
Descripción del problema : Significa que xxxxxx no se nombra mediante el método camel-case. Por
ejemplo : <img src={default_logo} alt="图标" />como la
solución default_logo aquí : simplemente cambie el nombre a método camel-case.<img src={defaultLogo} alt="图标" />
2.xxxxxx nunca se reasigna. Utilice const en su lugar.
Descripción del problema : Esto define el significado xxxxxx pero no se reasigna, se propone definir const
ejemplo : let { dispatch } = this.props;como despacho aquí
para resolver : la definición en línea con la constconst { dispatch } = this.props;
3. No anide expresiones ternarias.
Descripción del problema : Significa no anidar expresiones ternarias.
Ejemplo : type === 'A' ? '商品类型A' : type === 'B' ? '商品类型B' : '商品类型C'
Solución : De acuerdo con la lógica del código, use if else o switch u otros métodos para dividir
4. Se esperaba una expresión de función.
Descripción del problema : Significa que se recomienda utilizar expresiones de función con nombre en lugar de declaraciones de función.
Ejemplo : export function func1() {...函数体}'
Solución : cambiar a funciones con nombreexport const func1 = () => {...函数体}
5.Asignación al parámetro de función xxxxxx
Descripción del problema : significa que no puede asignar parámetros directamente.
Ejemplo : export const func1 = (value) => { value = xx}'
Solución : intente no hacer esto, y puede definir una variable más para hacer
export const func1 = (value) => { let newValue = value; newValue = xx}'
6. Una función con un nombre que comience con una letra mayúscula solo debe usarse como constructor.
Descripción del problema : Significa que generalmente se recomienda que la primera letra de la función no esté en mayúscula
, por ejemplo : <div>{InputDom()}</div>'como InputDom aquí
para resolver : cambie la primera letra en minúscula en la línea
7. Se espera que devuelva un valor en la función de flecha.
Descripción del problema : Esto significa que hay un retorno en esta función, que es común en métodos como map () y filter ().
Ejemplo : arr.map(item => { ...函数体 });
Solución : Mira los requisitos. Si realmente es necesario devolver un valor, devuelve. Si el mapa solo se usa para atravesar la matriz, puede usar forEach en su lugar
8.xxxxxx tiene asignado un valor pero nunca se utiliza.
Descripción del problema : Significa que la variable xxxxxx está definida, pero no se utiliza.
Solución : Elimine estas variables
9. ¡Esperaba! == y en su lugar vio! =. 和 Esperado === y en su lugar vio ==.
Descripción del problema : ¡Significa usarlo! = Y ==
Solución : ¡Cámbielo! == y ===
10. Usar target = "_ blank" sin rel = "noopener noreferrer" es un riesgo de seguridad: consulte https://mathiasbynens.github.io/rel-noopener
Descripción del problema : Significa que si se usa target = "_ blank" en la etiqueta a, se recomienda agregar rel = "noopener noreferrer", porque en la página recién abierta, puede obtener un control parcial de la página de origen a través de window.opener , Esto no es seguro, agregue rel = "noopener noreferrer", el window.opener general se vuelve nulo.
Solución : agregue rel = "noopener noreferrer" a ok
11. eval puede ser perjudicial.
Descripción del problema : Significa no usar eval, porque eval () ejecutará el js entre corchetes, lo cual no es seguro de
resolver : puede intentar usar una función personalizada para lograr el efecto deseado, o reescribirlo de otras formas
12. componentWillReceiveProps está en desuso desde React 16.9.0, use UNSAFE_componentWillReceiveProps en su lugar
Descripción del problema : significa que se ha cambiado el nombre del ciclo de vida de componentWillReceiveProps. Se recomienda usar UNSAFE_componentWillReceiveProps en su lugar para
resolverlo : cambie a UNSAFE_componentWillReceiveProps y está bien
13. Se esperaba un caso predeterminado.
Descripción del problema : el significado no es un caso de caso predeterminado, hay una escena en el uso del caso del interruptor
para resolver : recuerde usar el caso del interruptor para agregar en la superficie final default： break；
es mi apariencia más frecuencia varias advertencias y errores al ordenar los elementos de arriba
y luego Durante el proceso de modificación, encontré algunas cosas que no son muy fáciles de modificar, como UNSAFE_componentWillReceiveProps, que viola el método de caso camel. Para aquellos que no son fáciles de modificar, mi enfoque actual es evitar temporalmente la verificación.
Aquí hay algunas formas de evitar la verificación:
1. No se verifica el archivo completo,
escríbalo en la parte superior del archivo. /* eslint-disable */
2. No se verifica un bloque de código determinado,
utilícelo /* eslint-disable */y /* eslint-enable */finalícelo
/* eslint-disable */
console.log（111）
/* eslint-enable */
2. No verifique un bloque de código determinado,
úselo /* eslint-disable */y /* eslint-enable */envuélvalo
/* eslint-disable */
console.log（111）
/* eslint-enable */
3.
Hay dos formas de no verificar la línea especificada,
una es console.log(1) // eslint-disable-line; la
otra es
// eslint-disable-next-line
console.log（1）
4. Lo anterior no es para verificar todas las reglas, si solo desea no verificar una o algunas reglas, puede agregar las reglas por separado, como UNSAFE_componentWillReceiveProps mencionado anteriormente
// eslint-disable-next-line camelcase ...其他规则
UNSAFE_componentWillReceiveProps = () => {}