Next.js项目中.eslintrc.js的配置

睡个懒觉 發表於 2024-12-22 10:29:00

<div style="background: rgba(248, 248, 248, 1); overflow: auto; width: auto; border-top: 0.1em solid rgba(128, 128, 128, 1); border-right: 0.1em solid rgba(128, 128, 128, 1); border-bottom: 0.1em solid rgba(128, 128, 128, 1); border-left: 0.8em solid rgba(128, 128, 128, 1); padding: 0.2em 0.6em">
<pre>print 'hello world!'module.exports = {
// 扩展配置，包含Next.js的核心Web Vitals插件和TypeScript支持插件等
extends: ['next/core-web-vitals', 'plugin:@typescript-eslint/recommended', 'plugin:import/recommended', 'prettier'],
rules: {
// 关闭jsx-a11y插件的alt-text规则，通常用于图像的alt属性检查
'jsx-a11y/alt-text': 'off',
// 关闭React插件的display-name规则，检查组件是否有displayName
'react/display-name': 'off',
// 关闭React插件的no-children-prop规则，防止使用children属性
'react/no-children-prop': 'off',
// 关闭Next.js插件的no-img-element规则，不允许使用img元素
'@next/next/no-img-element': 'off',
// 关闭Next.js插件的no-page-custom-font规则，不允许使用自定义字体
'@next/next/no-page-custom-font': 'off',
// 强制使用一致的类型导入形式
'@typescript-eslint/consistent-type-imports': 'error',
// 关闭TypeScript插件的ban-ts-comment规则，不允许使用ts注释
'@typescript-eslint/ban-ts-comment': 'off',
// 关闭TypeScript插件的no-explicit-any规则，不允许使用any类型
'@typescript-eslint/no-explicit-any': 'off',
// 强制禁止未使用的变量
'@typescript-eslint/no-unused-vars': 'error',
// 关闭TypeScript插件的no-non-null-assertion规则，不允许使用非空断言
'@typescript-eslint/no-non-null-assertion': 'off',
// 在注释前后强制使用空行
'lines-around-comment': [
 'error',
 {
 beforeBlockComment: true, // 在块注释前使用空行
 beforeLineComment: true, // 在行注释前使用空行
 allowBlockStart: true, // 允许在块开始时使用空行
 allowObjectStart: true, // 允许在对象开始时使用空行
 allowArrayStart: true // 允许在数组开始时使用空行
 }
],
// 在特定的语句之间强制使用空行
'padding-line-between-statements': [
 'error',
 {
 blankLine: 'any', // 在任意export语句之间可以有或没有空行
 prev: 'export',
 next: 'export'
 },
 {
 blankLine: 'always', // 在变量声明和任意语句之间强制使用空行
 prev: ['const', 'let', 'var'],
 next: '*'
 },
 {
 blankLine: 'any', // 在连续的变量声明之间可以有或没有空行
 prev: ['const', 'let', 'var'],
 next: ['const', 'let', 'var']
 },
 {
 blankLine: 'always', // 在任意语句和函数或多行const、多行块之间强制使用空行
 prev: '*',
 next: ['function', 'multiline-const', 'multiline-block-like']
 },
 {
 blankLine: 'always', // 在函数或多行const、多行块和任意语句之间强制使用空行
 prev: ['function', 'multiline-const', 'multiline-block-like'],
 next: '*'
 }
],
// 在return语句之前强制使用空行
'newline-before-return': 'error',
// 在导入语句之后强制使用空行
'import/newline-after-import': [
 'error',
 {
 count: 1
 }
],
// 强制导入的顺序
'import/order': [
 'error',
 {
 groups: ['builtin', 'external', ['internal', 'parent', 'sibling', 'index'], ['object', 'unknown']],
 pathGroups: [
 {
 pattern: 'react', // 在react导入之前使用空行
 group: 'external',
 position: 'before'
 },
 {
 pattern: 'next/**', // 在next导入之前使用空行
 group: 'external',
 position: 'before'
 },
 {
 pattern: '~/**', // 在自定义路径导入之前使用空行
 group: 'external',
 position: 'before'
 },
 {
 pattern: '@/**', // 在内部导入之前使用空行
 group: 'internal'
 }
 ],
 pathGroupsExcludedImportTypes: ['react', 'type'],
 'newlines-between': 'always-and-inside-groups' // 在分组内和分组之间强制使用空行
 }
],
// 禁用不推荐的类型，并推荐使用更具体的类型
'@typescript-eslint/ban-types': [
 'error',
 {
 extendDefaults: true,
 types: {
 Function: 'Use a specific function type instead', // 使用具体的函数类型替代
 Object: 'Use object instead', // 使用object代替
 Boolean: 'Use boolean instead', // 使用boolean代替
 Number: 'Use number instead', // 使用number代替
 String: 'Use string instead', // 使用string代替
 Symbol: 'Use symbol instead', // 使用symbol代替
 any: false, // 禁用any类型
 '{}': false // 禁用空对象类型
 }
 }
]
},
settings: {
react: {
 version: 'detect' // 自动检测React的版本
},
'import/parsers': {
 '@typescript-eslint/parser': ['.ts', '.tsx'] // 使用TypeScript解析器解析.ts和.tsx文件
},
'import/resolver': {
 node: {},
 typescript: {
 project: './tsconfig.json' // 使用项目中的tsconfig.json文件进行解析
 }
}
},
overrides: [
{
 files: ['*.ts', '*.tsx', 'src/iconify-bundle/*'], // 指定文件匹配模式
 rules: {
 '@typescript-eslint/explicit-module-boundary-types': 'off', // 关闭显式模块边界类型检查
 '@typescript-eslint/no-var-requires': 'off' // 关闭不允许使用require语句的规则
 }
}
]
};
</pre>
</div>

</div>
<div id="MySignature" role="contentinfo">
 <table><tr><td><img style="border-top-width: 0pt; border-left-width: 0pt; border-bottom-width: 0pt; border-right-width: 0pt" alt="Creative Commons License" src="http://i.creativecommons.org/l/by-nc/2.5/cn/88x31.png" /> </td><td>本作品采用知识共享署名-非商业性使用 2.5 中国大陆许可协议进行许可。 </td> 
来源：https://www.cnblogs.com/sekihin/p/18621888

頁: [1]

琼殿技术论坛's Archiver

Next.js项目中.eslintrc.js的配置