当前位置: 首页 > news >正文

前端规范化设计详解

规范化设计主要包含以下几点:

  • JS/TS 规范约束

  • 样式编写规范约束

  • 命名检查

  • 提交信息规范

除此以外,还可根据项目需要,设计额外规范,保证项目可维护性与编码体验。

1. JS/TS规范

我们选择使用 eslint 来对 JS、TS 相关文件进行校验,同时我们需要搭配 prettier 以及 editorconfig 来保证编辑器的编码风格规范。

1.1. 安装eslint

// package.json
"devDependencies": {"eslint": "9.9.0","@eslint/js": "9.9.0","globals": "15.9.0","typescript-eslint": "81..0","@typescript-eslint/eslint-plugin": "8.1.0","eslint-plugin-simple-import-sort": "12.1.1",
}

安装依赖

pnpm i

以下是这些依赖的作用与用法说明:

1.1.1. eslint

作用:ESLint 是一个广泛使用的 JavaScript 代码质量和风格检查工具。它可以帮助开发者发现代码中的错误或不一致,并强制执行代码风格规范。

用法:

  • 配置 .eslintrc.json 文件来定义规则、环境和插件。

  • 通过命令行运行 eslint . 对项目中的代码进行检查。

  • 集成到代码编辑器中,提供实时提示和自动修复功能。

1.1.2. eslint/js

作用:这是与 JavaScript 语言相关的 ESLint 核心规则集的包。它包含所有与 JavaScript 相关的 ESLint 规则。

用法:

  • 在 .eslintrc 配置中扩展 @eslint/js 以应用标准 JavaScript 规则。

  • 提供了一组默认规则,可以直接使用或者自定义。

1.1.3. globals

作用:globals 是一个用于定义 JavaScript 中全局变量的库。ESLint 通过它可以识别和配置环境中的全局变量。

用法:

  • 可以在 ESLint 配置中指定哪些全局变量应该被认为是已知的,避免误报未定义变量的错误。

  • 通常会在 .eslintrc 文件中配置。

{"globals": {"window": "readonly","process": "readonly"}
}

1.1.4. typescript-eslint

作用:typescript-eslint 是一个为 TypeScript 提供 ESLint 支持的项目。它使得 ESLint 能够对 TypeScript 代码进行静态分析。

用法:

  • 使用 TypeScript 时,配合 ESLint 一起使用来检查 TypeScript 代码中的错误和风格问题。

  • 需要在 .eslintrc 中配置使用 typescript-eslint 的解析器 (parser)。

{"parser": "@typescript-eslint/parser"
}

1.1.5. @typescript-eslint/eslint-plugin

作用:这是 typescript-eslint 项目中的插件,提供了大量专门针对 TypeScript 代码的 ESLint 规则。

用法:在 ESLint 配置中引入此插件,以启用 TypeScript 特有的代码检查规则。

{"plugins": ["@typescript-eslint"],"extends": ["plugin:@typescript-eslint/recommended"]
}

1.1.6. eslint-plugin-simple-import-sort

作用:eslint-plugin-simple-import-sort 是一个用于自动排序 JavaScript 和 TypeScript 导入语句的 ESLint 插件。它帮助保持导入语句的整洁和一致。

用法:

  • 插件自动对导入语句进行分组和排序,可以确保导入的模块按照约定的顺序排列,比如标准库、外部依赖、自定义模块。

  • 需要在 .eslintrc 中配置此插件来启用导入排序规则。
{"plugins": ["simple-import-sort"],"rules": {"simple-import-sort/imports": "error","simple-import-sort/exports": "error"}
}

1.1.7. 总结

  • ESLint 是核心的 JavaScript/TypeScript 代码检查工具。

  • @eslint/js 提供了 JavaScript 相关的标准规则。

  • globals 允许你定义代码中使用的全局变量。

  • typescript-eslint 和 @typescript-eslint/eslint-plugin 为 TypeScript 提供 ESLint 支持及相关规则。

  • eslint-plugin-simple-import-sort 自动整理代码中的导入顺序,确保代码整洁。

1.2. 核心配置

// eslint.config.mjsimport globals from 'globals'
import js from '@eslint/js'
import tseslint from 'typescript-eslint'
import importSort from 'eslint-plugin-simple-import-sort'export default tseslint.config({extends: [js.configs.recommended, ...tseslint.configs.recommended],files: ['**/*.{ts,tsx,js}'],ignores: ['*.js', '**/dist/**/*', 'packages/cli/templates/**/*'],rules: {'@typescript-eslint/array-type': 'error','@typescript-eslint/no-for-in-array': 'error','no-unused-vars': 'error','no-undef': 'warn','no-console': 'error','simple-import-sort/imports': ['error',{groups: [['^\\W'],['^@\\w'],['^@/'],['^\u0000'],['^\\.\\./(?!/?$)', '^\\.\\./?$'],['^\\./(?!.*\\.)(?!/?$)', '^\\.(?!/?$)', '^\\./?$']]}],'simple-import-sort/exports': 'error'},languageOptions: {parser: tseslint.parser,globals: {.._globals.node},parserOptions: {project: ['./tsconfig.eslint.json', '**/*/tsconfig.json'],tsconfigRootDir: import.meta.dirname}},plugins: { 'simple-import-sort': importSort }
})

这个配置文件是基于 ESLint 和 TypeScript 的代码检查与代码格式化配置,结合了多个插件和库,帮助开发者进行静态代码分析、错误检测和代码风格统一。接下来我会详细说明相关配置细节,并列出核心内容的官方文档链接。

1.2.1. extends

extends: [js.configs.recommended, ...tseslint.configs.recommended],

作用:这部分指定了 ESLint 的基础配置,继承了两个推荐的规则集:

  • js.configs.recom

http://www.dtcms.com/a/270462.html

相关文章:

  • ORA-600 kokiasg1故障分析---惜分飞
  • [1-01-01].第50节:泛型 - 泛型的使用
  • Python标准库 bisect 模块
  • 云原生技术与应用-容器技术技术入门与Docker环境部署
  • 【洛谷题单】--顺序结构(一)
  • OSPFv3与OSPFv2不同点
  • eslint扁平化配置
  • Linux守护进程
  • 【ES实战】ES客户端线程量分析
  • java-网络编程
  • Java中数组与链表的性能对比:查询与增删效率分析
  • RabbitMQ第二章(RocketMQ的五大工作模式)
  • 【Linux服务器】-安装ftp与sftp服务
  • 数据结构:数组:合并数组(Merging Arrays)
  • 20 道 Node.js 高频面试题
  • Codeforces Round 868 (Div. 2) D. Unique Palindromes(1900,构造)
  • 深入企业内部的MCP知识(四):FastMCP装饰器与类方法:正确结合面向对象与MCP组件的实践指南
  • 4.权重衰减(weight decay)
  • MySQL-索引
  • SQL135 每个6/7级用户活跃情况
  • ${project.basedir}延申出来的Maven内置的一些常用属性
  • Python入门Day5
  • 嵌入式面试八股文100题(二)
  • 分库分表之实战-sharding-JDBC水平分库+水平分表配置实战
  • 【深度学习入门 鱼书学习笔记(1)感知机】
  • 7月8日学习笔记——统计决策方法
  • 基于springboot的物流配货系统
  • Nuxt.js 静态生成中的跨域问题解决方案
  • C++学习笔记之数组、指针和字符串
  • 【PyTorch】PyTorch中torch.nn模块的激活函数