道者，人之所蹈，使万物不知其所由 —— 张元浩

Q：你可能会遇到 ESLint 报了个错，但不知道什么原因，那么你该怎么办呢？

一.了解规则

1.风格

'quotes': 'single';
// "double" (默认) 要求尽可能地使用双引号
// "single" 要求尽可能地使用单引号
// "backtick" 要求尽可能地使用反勾号

2.code review

var foo = {
-   bar: "baz",
-   qux: "quux"
+   bar: "baz" 
};

var foo = {     
		bar: "baz",
-   qux: "quux", 
};

'comma-dangle': [    
	'error',    
	{        
		arrays: 'always-multiline',        
		objects: 'always-multiline',        
		imports: 'always-multiline',        
		exports: 'always-multiline',        
		functions: 'always-multiline',    
	},
],
// "never" (默认) 禁用拖尾逗号
// "always" 要求使用拖尾逗号
// "always-multiline" 当最后一个元素或属性与闭括号 ] 或 } 在 不同的行时，要求使用拖尾逗号；当在 同一行时，禁止使用拖尾逗号。
// "only-multiline" 当最后一个元素或属性与闭括号 ] 或 } 在 不同的行时，允许（但不要求）使用拖尾逗号；当在 同一行时，禁止使用拖尾逗号。

3.防止出错

// 禁用不必要的转义字符
'no-useless-escape': 'error'

[aeiou][$.*+?{}()|][abs^123-]

4.性能

5.宿主环境

'no-console': 'warn'

二. eslint –fix

三. eslint-disable

1.在文件中临时禁止规则出现警告

/* eslint-disable */
alert('foo');
/* eslint-enable */

2.对指定规则的启用或者禁用警告

/* eslint-disable no-alert, no-console */
alert('foo');
console.log('bar');
/* eslint-enable no-alert, no-console */

3.对指定行禁用规则警告

alert('foo'); // eslint-disable-line
// eslint-disable-next-line
alert('foo');

4.在指定行上禁用指定的某个规则

alert('foo'); // eslint-disable-line no-alert
// eslint-disable-next-line no-alert
alert('foo');

5.在某个特定的行上禁用多个规则

alert('foo'); // eslint-disable-line no-alert, quotes, semi
// eslint-disable-next-line no-alert, quotes, semi
alert('foo');

四.使用 overrides

"overrides": [    
	{      
		"files": ["*-test.js","*.spec.js"],      
		"rules": {        
			"no-unused-expressions": "off"      
		}    
	}
]

Q：一个项目，我该如何配置它的 ESLint 规则？

一.复杂配置–

// 原教旨主义者
{    
	plugins: [
		'import', 
		'jsx-a11y', 
		'react', 
		'react-hooks', 
		'@typescript-eslint'
	],    
	extends: [        
		'eslint:recommended',        
		'plugin:import/errors',        
		'plugin:import/warnings',        
		'plugin:import/typescript',        
		'plugin:jsx-a11y/recommended',        
		'plugin:react/recommended',        
		'plugin:@typescript-eslint/recommended',        
		'prettier',        
		'prettier/react',        
		'prettier/@typescript-eslint',    
	],    
	rules: {        
		// 太严格了！改规则，改规则...    
	}
};
// or 照搬西方那套
{    
	plugins: ['react-hooks', '@typescript-eslint'],    
	extends: [        
		'airbnb',        
		'plugin:@typescript-eslint/recommended',        
		'prettier',        
		'prettier/react',        
		'prettier/@typescript-eslint',    
	],    
	rules: {        
		// 不适合我！改规则，改规则...    
	}
};
{    
	plugins: ['react-hooks', '@typescript-eslint'],    
	extends: [        
		'airbnb',        
		'airbnb-typescript',        
		'prettier',        
		'prettier/react',        
		'prettier/@typescript-eslint',    
	],    
	rules: {       
		// 不适合我！改规则，改规则...    
	}
};

二.简单配置++

// 自立根生，艰苦奋斗
{    
	plugins: [
		'import', 
		'jsx-a11y', 
		'react', 
		'react-hooks', 
		'@typescript-eslint'
	],    
	extends: [        
		'prettier',        
		'prettier/react',        
		'prettier/@typescript-eslint',    
	],    
	rules: {        
		// ...        
		// ...        
		// ...        
		// ...        
		// ...        
		// ...        
		// ...    
	}
};

三.总结适合自己团队的配置

// 走自己的特色道路
{    
	plugins: ['react-hooks', '@typescript-eslint'],
  extends: [        
		'eslint-config-xxx',        
		'prettier',        
		'prettier/react',        
		'prettier/@typescript-eslint',    
	]
};
// 那些自己特别在意的 rule 可以记下来，搞一套自己的配置 eslint-config-52wa
{    
	plugins: [/* ... */],    
	extends: [        
		// ...    
	],    
	rules: {        
		'no-useless-escape': 'error'    
	}
};

Q：为什么 Prettier 的配置总是写在后面？

"lint-staged": {   
	"linters": {      
		"*.{js,jsx,ts,tsx}": [        
			"prettier --write",        
			"git add",        
			"eslint"      
		]    
	},
}

Q：ESLint 如何工作的？

Q：怎么搞一套自己的 config？

Q：怎么搞个自己的规则？