一:eslintrc.js文件的配置

//使用Commonjs模版语法导出,

module.exports = {

//告诉 ESLint 这是根配置文件,停止向上查找父目录的 ESLint 配置,避免继承项目根目录外的配置,确保配置的独立性

root: true,

//xxx团队自定义的通用规则,xxx/reactReact 相关规则集,xxx/typescript TypeScript 相关规则集,

顺序很重要: 后面的规则会覆盖前面的规则

extends: ['xxx', 'xxx/react', 'xxx/typescript'],

//可以覆盖或补充 extends 中的规则

rules: {

//检查 JSX 中是否使用了 React,React 17+ 不需要显式导入 React,所以关闭此检查

'react/jsx-uses-react': 'off',

//同上,新版本 React 不需要显式导入

'react/react-in-jsx-scope': 'off',

//允许复杂的回调嵌套,提高代码灵活性

'max-nested-callbacks': 'off',

//允许使用 <div></div> 而不是 <div />

'react/self-closing-comp': 'off',

//允许混用 as 和 <Type> 语法

'@typescript-eslint/consistent-type-assertions': 'off',

//允许自由排列类成员,不强制特定顺序

'@typescript-eslint/member-ordering': 'off',

//允许定义空接口(常用于类型标记或扩展)

'@typescript-eslint/no-empty-interface': 'off'

}

}

二:.prettierrc文件配置

{

"jsxSingleQuote": false, // JSX 使用双引号

"semi": false, // 不使用分号

"jsxBracketSameLine": false, // JSX 标签换行

"arrowParens": "always", // 箭头函数总是使用括号

"singleQuote": true, // 使用单引号

"printWidth": 80, // 行宽限制 80 字符

"trailingComma": "none", // 不使用尾随逗号

"tabWidth": 2, // 缩进 2 个空格

"useTabs": false, // 使用空格而不是制表符

"quoteProps": "as-needed", // 按需使用引号

"bracketSpacing": true, // 对象括号内使用空格

"endOfLine": "lf", // 使用 LF 换行符

"embeddedLanguageFormatting": "auto"//控制模版字符串的配置格式

}

三:编辑器的setting.json配置

{
  // 启用 ESLint 的扁平配置支持(新的配置格式,替代传统的 .eslintrc 格式)
  "eslint.experimental.useFlatConfig": true,
  // 启用编辑器在保存时自动格式化文档
  "editor.formatOnSave": true,
  // 自动修复相关配置
  "editor.codeActionsOnSave": {
    // 保存时使用 ESLint 自动修复所有可修复的问题("explicit" 表示显式触发)
    "source.fixAll.eslint": "explicit",
    // 保存时不自动整理导入语句(禁用自动调整 import 顺序/去重)
    "source.organizeImports": "never"
  },
  // 配置 ESLint 需要校验的文件类型
  "eslint.validate": [
    "javascript",       // 校验 JavaScript 文件
    "javascriptreact",  // 校验 JavaScript React(JSX)文件
    "typescript",       // 校验 TypeScript 文件
    "typescriptreact",  // 校验 TypeScript React(TSX)文件
    "vue",              // 校验 Vue 单文件组件
    "html",             // 校验 HTML 文件
    "markdown",         // 校验 Markdown 文件
    "json",             // 校验 JSON 文件
    "jsonc",            // 校验 JSONC(带注释的 JSON)文件
    "yaml",             // 校验 YAML 文件
    "toml",             // 校验 TOML 文件
    "less"              // 校验 LESS 样式文件
  ]
}

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐