links:
Flat Config 配置
Eslint 新版的配置方式，使用eslint.config.js作为配置文件
VSCode 需要配置开启"eslint.experimental.useFlatConfig": true，同时对于 Vscode 的Eslint插件，如果不生效，需要将插件切换到预览版
参考：Eslint 8.23 Flat Config 新配置迁移升级指南_咲奈的博客-CSDN博客_升级eslint
文档：配置文件（新） - ESLint - 插件化的 JavaScript 代码检查工具
依赖
globals
对于新版本的 env 配置，之前的配置方式:
env: {
es2021: true,
browser: true,
node: true,
commonjs: true
},新的配置方式需要依赖globals包，使用方式需要改变为：
// 从 ESLint 中提取了所有环境信
const globals = require('globals');
module.exports = [
{
files: ['**/*.ts?(x)', '**/*.js?(x)'],
languageOptions: {
globals: {
...globals.commonjs,
...globals.browser,
...globals.es2021,
...globals.node
}
},
}
];@typescript-eslint/parser
ESLint 解析器，它利用TypeScript ESTree允许 ESLint 对 TypeScript 源代码进行 lint。当使用 TypeScript时需要使用这个 parser，使用方式：
const globals = require('globals');
const parser = require.resolve('@typescript-eslint/parser');
const parserInstance = require(parser);
module.exports = [
{
files: ['**/*.ts?(x)', '**/*.js?(x)'],
ignores: ['**/dist/**', '**/node_modules/**'],
languageOptions: {
parser: parserInstance,
parserOptions: {}, // 针对不同的 parser 传入对应 parser 的参数
globals: {
...globals.commonjs,
...globals.browser,
...globals.es2021,
...globals.node
}
},
];eslint-plugin-prettier
eslint-plugin-prettier用于与 prettier配合使用，将 prettier的配置作为 ESLint的规则运行，相当于代码不符合 Prettier 的标准时，会报一个 ESLint 错误，同时也可以通过 eslint --fix 来进行格式化。
const eslintPluginPrettier = require.resolve('eslint-plugin-prettier');
const pluginPrettier = require(eslintPluginPrettier);
module.exports = [
{
rules:{
...configPrettier.rules,
// 相当于老版配置的：recommended.extends: ['prettier']
}
}
]使用方式：
const eslintPluginPrettier = require.resolve('eslint-plugin-prettier');
const pluginPrettier = require(eslintPluginPrettier);
module.exports = [
{
files: ['**/*.ts?(x)', '**/*.js?(x)'],
ignores: ['**/dist/**', '**/node_modules/**'],
languageOptions: {},
plugins: {
prettier: pluginPrettier
},
}
];eslint-config-prettier
eslint-config-prettier配合 prettier使用,关闭所有不必要的或可能与 Prettier 冲突的规则。关掉与Prettier产生冲突的ESlint格式相关配置
const eslintPluginPrettier = require.resolve('eslint-plugin-prettier');
const pluginPrettier = require(eslintPluginPrettier);
module.exports = [
{
rules:{
...pluginPrettier.configs.recommended.rules,
}
}
]使用方式:
const eslintConfigPrettier = require.resolve('eslint-config-prettier');
const configPrettier = require(eslintConfigPrettier);
module.exports = [
{
files: ['**/*.ts?(x)', '**/*.js?(x)'],
ignores: ['**/dist/**', '**/node_modules/**'],
languageOptions: {},
rules: {
...configPrettier.rules,
// prettier
'prettier/prettier': [
'warn',
// LF 和 CRLF 格式问题
{
endOfLine: 'auto'
}
],
semi: 'error',
}
}
];React 相关规则
eslint-plugin-react
eslint-plugin-react-hooks
问题
1. Delete ␍eslint prettier/prettier
因为文件结尾换行符格式不同导致的错误，Window上文件默认是 CSRF格式，MAC上是LF格式，解决方案：
- 通过
.editconfig强制统一文件保存时的格式
end_of_line = crlf
- 配置
eslint.config.js
rules:{
'prettier/prettier': [
'warn',
// LF 和 CRLF 格式问题
{
endOfLine: 'auto'
}
],
}参考：