ESLint Stylistic 实战：在 Vue、React 和 TypeScript 项目中的最佳实践

ESLint Stylistic 实战：在 Vue、React 和 TypeScript 项目中的最佳实践

【免费下载链接】eslint-stylisticMonorepo for ESLint Stylistic plugins and configs项目地址: https://gitcode.com/gh_mirrors/es/eslint-stylistic

ESLint Stylistic 是一个专注于代码风格检查的 ESLint 插件集合，通过 Monorepo 架构提供了丰富的规则和配置，帮助开发者在 Vue、React 和 TypeScript 项目中保持一致的代码风格。本文将分享如何在这些主流前端项目中应用 ESLint Stylistic 的最佳实践，让代码质量提升变得简单高效。

为什么选择 ESLint Stylistic？

在现代前端开发中，代码风格的一致性直接影响团队协作效率和代码可维护性。ESLint Stylistic 作为专注于代码风格的解决方案，与其他格式化工具相比具有独特优势：

图：ESLint Stylistic 与 Prettier 在相同代码上的格式化效果对比，展示了不同工具的风格差异

与传统格式化工具相比，ESLint Stylistic 提供了更细粒度的规则控制和与 ESLint 生态的无缝集成，特别适合需要高度定制化代码风格的团队。

快速开始：项目安装与基础配置

安装步骤

首先，通过以下命令将 ESLint Stylistic 集成到你的项目中：

# 克隆仓库 git clone https://gitcode.com/gh_mirrors/es/eslint-stylistic # 安装依赖 cd eslint-stylistic && pnpm install

基础配置文件

创建基础的 ESLint 配置文件.eslintrc.js，并继承 ESLint Stylistic 的推荐规则：

module.exports = { extends: [ 'plugin:stylistic/recommended' ], rules: { // 项目自定义规则 } }

详细的配置指南可以参考官方文档 docs/guide/getting-started.md。

TypeScript 项目最佳实践

TypeScript 项目需要特别注意类型相关的代码风格。ESLint Stylistic 提供了专门针对 TypeScript 的规则配置：

类型注解与泛型 spacing

在 TypeScript 中，类型注解和泛型的空格控制非常重要：

// 推荐 const user: User = { name: 'John' }; const list: Array<string> = ['a', 'b']; // 不推荐 const user :User = { name: 'John' }; const list:Array<string> = ['a', 'b'];

相关规则配置可以在 packages/eslint-plugin/rules/type-annotation-spacing.ts 和 packages/eslint-plugin/rules/type-generic-spacing.ts 中找到。

非空断言的特殊处理

对于 TypeScript 的非空断言（value!），ESLint Stylistic 提供了特殊的 spacing 配置：

// 推荐 const name = user!.name; // 不推荐 const name = user !.name;

可以通过ts-non-null配置项单独设置非空断言的空格规则，详细说明见 packages/eslint-plugin/rules/space-unary-ops/README.md。

React 项目最佳实践

React 项目中 JSX 语法的风格检查是重点，ESLint Stylistic 提供了全面的 JSX 规则：

图：JSX 代码格式化配置示例，展示了如何通过 ESLint Stylistic 控制 JSX 语法风格

JSX 属性排序与对齐

保持 JSX 属性的一致排序和对齐方式：

// 推荐 <Button variant="primary" size="large" onClick={handleClick} > Submit </Button> // 不推荐 <Button onClick={handleClick} variant="primary" size="large"> Submit </Button>

相关规则可以在 packages/eslint-plugin/rules/jsx-first-prop-new-line.ts 和 packages/eslint-plugin/rules/jsx-max-props-per-line.ts 中配置。

箭头函数组件格式

统一箭头函数组件的格式风格：

// 推荐 const UserCard = ({ name, email }) => ( <div className="card"> <h2>{name}</h2> <p>{email}</p> </div> ); // 不推荐 const UserCard = ({name,email})=>{ return <div className="card"><h2>{name}</h2><p>{email}</p></div> }

Vue 项目最佳实践

Vue 项目同时包含模板和脚本部分，需要针对性配置：

模板中的空格控制

在 Vue 模板中保持一致的空格风格：

<!-- 推荐 --> <template> <div class="container"> <h1>{{ title }}</h1> <p v-if="showMessage">{{ message }}</p> </div> </template> <!-- 不推荐 --> <template> <div class="container"> <h1>{{title}}</h1> <p v-if = "showMessage">{{message}}</p> </div> </template>

脚本部分的 TypeScript 集成

Vue 3 + TypeScript 项目中，保持脚本部分的代码风格一致：

<script setup lang="ts"> import { ref, computed } from 'vue'; import type { User } from '@/types'; const user = ref<User | null>(null); const userName = computed(() => user.value?.name || 'Guest'); </script>

高级配置：自定义规则与共享预设

创建自定义规则集

通过 packages/eslint-plugin/configs/customize.ts 可以创建项目特定的规则集：

// 自定义配置示例 import { defineConfig } from 'eslint-stylistic'; export default defineConfig({ rules: { 'indent': ['error', 2], 'quotes': ['error', 'single'], 'semi': ['error', 'always'] } });

使用预设配置

ESLint Stylistic 提供了多种预设配置，如 packages/eslint-plugin/configs/index.ts 中定义的recommended、strict等预设，可直接继承使用。

常见问题与解决方案

规则冲突处理

当 ESLint Stylistic 规则与其他插件冲突时，可以通过rules配置显式指定优先级：

module.exports = { extends: [ 'plugin:stylistic/recommended', 'plugin:react/recommended' ], rules: { // 解决冲突，优先使用 stylistic 规则 'react/jsx-indent': 'off', 'stylistic/jsx-indent': ['error', 2] } }

性能优化

对于大型项目，可以通过 .eslintignore 文件排除不需要检查的文件，提高检查速度：

node_modules/ dist/ *.d.ts

总结

ESLint Stylistic 为 Vue、React 和 TypeScript 项目提供了全面的代码风格解决方案。通过本文介绍的最佳实践，你可以：

1. 保持项目代码风格的一致性
2. 提高团队协作效率
3. 减少代码审查中的风格争议
4. 定制符合项目需求的代码风格规则

开始使用 ESLint Stylistic，让你的前端项目代码更加专业、易读和易维护！更多详细规则和配置选项，请参考 docs/rules.md。

【免费下载链接】eslint-stylisticMonorepo for ESLint Stylistic plugins and configs项目地址: https://gitcode.com/gh_mirrors/es/eslint-stylistic