前端代码保存自动格式化的设置(适合cursor,trae,vscode编辑器,可以直接cv,大家可以自定义修改)
/使用Commonjs模版语法导出,//告诉 ESLint 这是根配置文件,停止向上查找父目录的 ESLint 配置,避免继承项目根目录外的配置,确保配置的独立性//xxx团队自定义的通用规则,xxx/reactReact 相关规则集,xxx/typescript TypeScript 相关规则集,顺序很重要: 后面的规则会覆盖前面的规则//可以覆盖或补充 extends 中的规则rules: {
一: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 样式文件
]
}
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐

所有评论(0)