Pregunta : aparece una línea roja ondulada al escribir código y se informa un error ¿Las cadenas deben usar comillas simples?
Descripción : Hoy, un amigo me preguntó, descargó un proyecto de Internet y, una vez completada la instalación, abrió un archivo js de este proyecto. Como resultado, se informaron un montón de líneas onduladas rojas tan pronto como abrió Buscó Se ha dicho durante mucho tiempo que es un error de eslint, pero no sé cómo solucionarlo?
Respuesta : De hecho, existe un conflicto entre eslint y el formateador local, como el problema anterior.
Strings must use singlequote
Esto significa que la cadena debe definirse con comillas simples en lugar de comillas dobles . Este problema generalmente ocurre después de guardar, como mi configuración de vscode. Me gusta configurar el código para que se formatee automáticamente al guardar, y el complemento de formato usa It is Prettier - Formateador de código . Creo que muchos amigos son como yo. De acuerdo con mi configuración, Prettier convertirá automáticamente las comillas simples en comillas dobles al formatear, y esto se debe a que se activarán las reglas de eslint, y eslint dirá: Esto está mal, debería ser una comilla simple y luego se informará un error, mostrando una línea ondulada roja...
Conociendo el motivo, es fácil de solucionar, por lo general existen dos soluciones:
- La primera es modificar las reglas de eslint;
- La segunda es modificar las reglas de formato;
Por ejemplo, aquí, puede usar las reglas de formato modificadas para lograr el propósito, porque eslinst no significa que la escritura no esté estandarizada, entonces es suficiente para cumplir con las especificaciones de eslint después de formatear Tomando el segundo ejemplo, cree un nuevo archivo en el directorio raíz: .prettierrc , agregar contenido
{
"singleQuote": true, // 单独加上这一条就行
"tabWidth": 4, // 行前4个空格
"semi":true, // 末尾加上分号
"trailingComma":"none" // 取消末尾加上逗号
}
Modificar eslint
ignorar, no comprobar
La forma más fácil de modificar eslint es ignorar...es decir, no marcar.Una vez hecho esto, cree un nuevo archivo en el directorio raíz del proyecto.Un archivo o carpeta para ignorar, como:
# 忽略目录
build/
tests/
node_modules/
src/micpo
# 忽略文件
**/*-min.js
**/*.min.js
iconfont.js
Después de ignorar el directorio, eslint no detectará todos los archivos en el directorio cambiado;
configurar
Hay dos reglas para configurar eslint, una es configurar en el setting.json de vscode, la otra es crear un nuevo archivo en el directorio raíz del proyecto, el nombre del archivo es: .eslintrc.js El uso general
es como sigue:
module.exports = {
root: true,
parserOptions: {
ecmaVersion: 7,
ecmaFeatures: {
'jsx': true,
'modules': true
},
parser: 'babel-eslint'
},
env: {
es6: true,
node: true
},
extends: [
'eslint:recommended',
'plugin:vue/recommended'
],
plugins: ['vue'],
globals: {
document: false,
navigator: false,
window: false
},
rules: {
'accessor-pairs': 2,
'arrow-spacing': [2, {
'before': true,
'after': true
}],
'block-spacing': [2, 'always'],
'comma-dangle': [2, 'never'],
'comma-spacing': [2, {
'before': false,
'after': true
}],
'comma-style': [2, 'last'],
'constructor-super': 2,
'curly': [2, 'multi-line'],
'dot-location': [2, 'property'],
'eol-last': 2,
'eqeqeq': [2, 'allow-null'],
'generator-star-spacing': [2, {
'before': true,
'after': true
}],
'handle-callback-err': [2, '^(err|error)$'],
'indent': [2, 2, {
'SwitchCase': 1
}],
'jsx-quotes': [2, 'prefer-single'],
'key-spacing': [2, {
'beforeColon': false,
'afterColon': true
}],
'keyword-spacing': [2, {
'before': true,
'after': true
}],
'new-cap': [2, {
'newIsCap': true,
'capIsNew': false
}],
'new-parens': 2,
'no-array-constructor': 2,
'no-console': 0,
'no-caller': 2,
'no-class-assign': 2,
'no-cond-assign': 2,
'no-const-assign': 2,
'no-control-regex': 2,
'no-delete-var': 2,
'no-dupe-args': 2,
'no-dupe-class-members': 2,
'no-dupe-keys': 2,
'no-duplicate-case': 2,
'no-empty-character-class': 2,
'no-empty-pattern': 2,
'no-eval': 2,
'no-ex-assign': 2,
'no-extend-native': 2,
'no-extra-bind': 2,
'no-extra-boolean-cast': 2,
'no-extra-parens': [2, 'functions'],
'no-fallthrough': 2,
'no-floating-decimal': 2,
'no-func-assign': 2,
'no-implied-eval': 2,
'no-inner-declarations': [2, 'functions'],
'no-invalid-regexp': 2,
'no-irregular-whitespace': 2,
'no-iterator': 2,
'no-label-var': 2,
'no-labels': [2, {
'allowLoop': false,
'allowSwitch': false
}],
'no-lone-blocks': 2,
'no-mixed-spaces-and-tabs': 2,
'no-multi-spaces': 2,
'no-multi-str': 2,
'no-multiple-empty-lines': [2, {
'max': 1
}],
'no-native-reassign': 2,
'no-negated-in-lhs': 2,
'no-new-object': 2,
'no-new-require': 2,
'no-new-symbol': 2,
'no-new-wrappers': 2,
'no-obj-calls': 2,
'no-octal': 2,
'no-octal-escape': 2,
'no-path-concat': 2,
'no-proto': 2,
'no-redeclare': 2,
'no-regex-spaces': 2,
'no-return-assign': [2, 'except-parens'],
'no-self-assign': 2,
'no-self-compare': 2,
'no-sequences': 2,
'no-shadow-restricted-names': 2,
'no-spaced-func': 2,
'no-sparse-arrays': 2,
'no-this-before-super': 2,
'no-throw-literal': 2,
'no-trailing-spaces': 2,
'no-undef': 0,
'no-undef-init': 2,
'no-unexpected-multiline': 2,
'no-unmodified-loop-condition': 2,
'no-unneeded-ternary': [2, {
'defaultAssignment': false
}],
'no-unreachable': 2,
'no-unsafe-finally': 2,
'no-unused-vars': [2, {
'vars': 'all',
'args': 'none'
}],
'no-useless-call': 2,
'no-useless-computed-key': 2,
'no-useless-constructor': 2,
'no-useless-escape': 0,
'no-whitespace-before-property': 2,
'no-with': 2,
'one-var': [2, {
'initialized': 'never'
}],
'operator-linebreak': [2, 'after', {
'overrides': {
'?': 'before',
':': 'before'
}
}],
'padded-blocks': [2, 'never'],
'quotes': [2, 'single', {
'avoidEscape': true,
'allowTemplateLiterals': true
}],
'semi': [2, 'never'],
'semi-spacing': [2, {
'before': false,
'after': true
}],
'space-before-blocks': [2, 'always'],
'space-before-function-paren': [2, 'always'],
'space-in-parens': [2, 'never'],
'space-infix-ops': 2,
'space-unary-ops': [2, {
'words': true,
'nonwords': false
}],
'spaced-comment': [2, 'always', {
'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
}],
'template-curly-spacing': [2, 'never'],
'use-isnan': 2,
'valid-typeof': 2,
'wrap-iife': [2, 'any'],
'yield-star-spacing': [2, 'both'],
'yoda': [2, 'never'],
'prefer-const': 2,
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
'object-curly-spacing': [2, 'always', {
objectsInObjects: false
}],
'array-bracket-spacing': [2, 'never'],
'vue/jsx-uses-vars': 2,
'vue/max-attributes-per-line': ['error', {
'singleline': 3,
'multiline': {
'max': 13,
'allowFirstLine': false
}
}],
'vue/html-self-closing': ['error', {
'html': {
'void': 'never',
'normal': 'any',
'component': 'any'
},
'svg': 'always',
'math': 'always'
}]
}
}
ModificarPrettier
Hay dos reglas para configurar Prettier, una es configurar en el setting.json de vscode, la otra es crear un nuevo archivo en el directorio raíz del proyecto, el nombre del archivo es: .prettierrc , el
uso general es el siguiente :
{
"tabWidth": 4, // tab缩进大小,默认为2
"useTabs": false, // 使用tab缩进，默认false
"semi": false, // 使用分号, 默认true
"singleQuote": false, // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
"trailingComma": "all", // 行尾逗号,默认none,可选 none|es5|all
"bracketSpacing": true, // 对象中的空格 默认true
// JSX标签闭合位置 默认false
// false: <div
// className=""
// style={
{}}
// >
// true: <div
// className=""
// style={
{}} >
"jsxBracketSameLine": false,
// 箭头函数参数括号 默认avoid 可选 avoid| always
// avoid 能省略括号的时候就省略 例如x => x
// always 总是有括号
"arrowParens": "avoid"
}