Prettier与ESLint:代码风格与质量的自动化保证

简介: 这两个工具协同工作以确保代码一致性。Prettier负责自动格式化,包括缩进、引号等,而ESLint执行静态分析,检查潜在错误和风格。Prettier配置文件如`.prettierrc`,ESLint配置如`.eslintrc.js`。安装它们并集成,例如使用`eslint-plugin-prettier`和`eslint-config-prettier`。在提交前,可通过husky和lint-staged在本地自动运行格式化和检查。IDE中配置插件可实现实时反馈。自定义规则和选择共享配置(如airbnb)以适应项目需求,并在CI流程中集成以保持高标准。

Prettier 和 ESLint 是两个互补的工具,它们共同确保代码的风格一致性和质量。Prettier 负责格式化代码,而 ESLint 则执行更复杂的静态分析和规则检查。

Prettier

作用:

自动化代码格式化,确保代码的缩进、括号、引号、换行等样式一致。
不需要配置太多的规则,因为Prettier有一套默认的代码风格。
支持多种编程语言,包括JavaScript、TypeScript、CSS、HTML等。
可以与ESLint集成,避免两者规则冲突。
使用示例: 在项目根目录下创建 .prettierrc.prettierrc.json 文件来配置Prettier,例如:

{
   
  "printWidth": 80, // 行宽
  "tabWidth": 2, // Tab宽度
  "useTabs": false, // 是否使用制表符
  "semi": true, // 是否使用分号
  "singleQuote": true, // 使用单引号
  "trailingComma": "all", // 尾随逗号
  "bracketSpacing": true, // 对象花括号之间是否有空格
  "jsxBracketSameLine": false // JSX标签闭合花括号是否在同一行
}

然后在项目中安装Prettier:

npm install --save-dev prettier

并在.gitignore文件中排除Prettier生成的临时文件。

ESLint

 作用:

  • 静态代码分析,检测潜在的错误、代码异味和不推荐的编程习惯。
  • 提供丰富的自定义规则,可以检查代码风格、变量使用、代码复杂度等。
  • 可以与Prettier集成,先格式化再检查,避免格式问题干扰实际的错误检测。

使用示例: 创建 .eslintrc.js.eslintrc.yaml 配置文件:

module.exports = {
   
  env: {
   
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:react/recommended',
    'airbnb-base',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
   
    ecmaVersion: 12,
    sourceType: 'module',
    ecmaFeatures: {
   
      jsx: true,
    },
  },
  plugins: [
    '@typescript-eslint',
    'react',
  ],
  rules: {
   
    'no-console': 'off', // 关闭禁止console.log的规则
    'import/no-unresolved': 'error', // 报告未解析的导入
  },
};

安装ESLint及其相关的插件:

npm install --save-dev eslint eslint-plugin-react @typescript-eslint/parser @typescript-eslint/eslint-plugin

在项目中使用npx eslint或配置IDE(如VSCode)的ESLint插件来进行实时检查。

集成与自动化

通过eslint-plugin-prettier和eslint-config-prettier,可以在ESLint中集成Prettier:

npm install --save-dev eslint-plugin-prettier eslint-config-prettier

然后在.eslintrc.js中添加以下内容:

module.exports = {
   
  // ...
  plugins: ['prettier'],
  extends: ['plugin:prettier/recommended'], // 使用Prettier的ESLint规则
  rules: {
   
    'prettier/prettier': 'error', // 把Prettier的规则设为错误级别
    // ...其他规则
  },
};

现在,当运行eslint --fix时,ESLint会先应用Prettier的格式化,然后再执行自己的检查。

样例配置文件

.prettierrc (Prettier配置)

{
   
  "semi": true,
  "trailingComma": "none",
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 120,
  "jsxSingleQuote": true,
  "arrowParens": "avoid",
  "htmlWhitespaceSensitivity": "css",
  "endOfLine": "lf"
}
1.2 .eslintrc.js (ESLint配置)
javascript
module.exports = {
   
  env: {
   
    browser: true,
    es6: true,
  },
  extends: [
    'airbnb-base',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
   
    ecmaVersion: 2020,
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint', 'prettier'],
  rules: {
   
    'prettier/prettier': 'error',
    'no-unused-vars': 'warn',
    'no-console': 'warn',
  },
};

集成到构建流程

使用husky和lint-staged进行提交前的检查

安装依赖:

npm install --save-dev husky lint-staged

package.json中添加如下配置:

"husky": {
   
  "hooks": {
   
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
   
  "*.ts?(x)": ["prettier --write", "eslint --fix"],
  "*.js?(x)": ["prettier --write", "eslint --fix"],
  "*.html": ["prettier --write"],
  "*.css": ["prettier --write"]
}

这样,在每次提交前,lint-staged会自动运行Prettier和ESLint,格式化和修复代码。

配置IDE

在Visual Studio Code、WebStorm或其他支持ESLint和Prettier的IDE中,安装对应的插件并配置自动格式化和检查。

自定义规则

ESLint的灵活性允许你创建自定义规则以满足特定项目需求。在.eslintrc.js中添加自定义规则:

rules: {
   
  'your-custom-rule': 'error',
  // ...
}

创建一个lib或rules目录,然后在其中定义你的自定义规则模块。

常见问题与解决方案

冲突处理

有时,Prettier和ESLint的规则可能会冲突。在这种情况下,通常优先遵循Prettier的规则,因为它专注于代码格式。如果你需要特定的ESLint规则,可以在.eslintrc.js中禁用Prettier的对应规则:

rules: {
   
  'prettier/prettier': ['error', {
    singleQuote: false }] // 禁用Prettier的单引号规则
}

性能优化

如果ESLint运行缓慢,可以考虑以下优化:

仅在必要时运行:例如,只在修改了相关文件后运行。
使用--cache选项:ESLint将缓存已检查的文件,以加快后续运行速度。
使用.eslintignore文件:排除不需要检查的文件和目录。

使用ESLint的插件和共享配置

插件

@typescript-eslint:为TypeScript提供额外的规则和错误修复。
eslint-plugin-import:检查导入顺序和导出规范。
eslint-plugin-react:针对React组件的特定规则。
eslint-plugin-react-hooks:检查React Hooks的使用。
eslint-plugin-prettier:使ESLint与Prettier协同工作,防止冲突。

安装这些插件:

npm install --save-dev eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin

共享配置

  • eslint-config-airbnb:Airbnb的编码风格指南。
  • eslint-config-prettier:禁用与Prettier冲突的ESLint规则。

.eslintrc.js中使用共享配置:

module.exports = {
   
  extends: [
    'airbnb',
    'airbnb-typescript',
    'plugin:@typescript-eslint/recommended',
    'plugin:import/recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:prettier/recommended',
  ],
  // ...
};

定制共享配置

根据项目需求,可以自定义共享配置,例如:

module.exports = {
   
  extends: [
    'airbnb',
    'airbnb-typescript',
    'plugin:@typescript-eslint/recommended',
    'plugin:import/recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:prettier/recommended',
  ],
  rules: {
   
    'import/prefer-default-export': 'off', // 关闭非默认导出的警告
    '@typescript-eslint/explicit-module-boundary-types': 'off', // 关闭类型声明的警告
    // 添加或修改其他规则
  },
};

高级用法

配置环境

.eslintrc.js中设置环境变量,以便启用特定环境下的规则:

env: {
   
  browser: true,
  es6: true,
  node: true,
  jest: true,
}

使用ESLint的overrides字段

overrides允许你为特定类型的文件或目录指定不同的规则。例如,为.test.js文件添加独立的规则:

module.exports = {
   
  overrides: [
    {
   
      files: ['**/*.test.js'],
      rules: {
   
        'no-unused-expressions': 'off', // 在测试文件中关闭表达式不使用警告
      },
    },
  ],
  // ...
};

部署到持续集成(CI)

将ESLint和Prettier集成到持续集成流程中,确保所有提交的代码都符合标准。例如,在GitHub Actions中配置:

name: Lint and Format

on:
  push:
    branches:
      - main
  pull_request:

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout code
      uses: actions/checkout@v2
    - name: Setup Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '14.x'
    - name: Install dependencies
      run: npm ci
    - name: Lint and format
      run: npm run lint

2500G计算机入门到高级架构师开发资料超级大礼包免费送!

相关文章
|
1月前
|
测试技术 持续交付 UED
探索自动化测试框架:提高软件质量的利器
在软件开发周期中,自动化测试框架扮演着至关重要的角色。本文将深入探讨自动化测试框架如何提升测试效率、确保软件质量和促进持续集成/持续部署(CI/CD)的实施。文章将分析自动化测试的优势、挑战以及实施策略,为读者提供一份全面的自动化测试指南。
|
5天前
|
人工智能
AIGC生图的自动化质量评估(2)
AIGC生图的自动化质量评估
|
5天前
|
机器学习/深度学习 编解码 算法
AIGC生图的自动化质量评估(1)
AIGC生图的自动化质量评估
|
1月前
|
监控 数据管理 测试技术
自动化测试:提升软件质量的关键
【6月更文挑战第19天】自动化测试在软件质量保障中至关重要,通过使用工具执行测试用例,提高效率、减少错误。关键技术包括测试框架(如Selenium)、测试脚本编写、测试数据管理和测试执行监控。虽面临脚本维护、数据管理等挑战,但自动化测试能提升软件质量,降低成本,加快交付速度,并将在未来持续影响软件行业。
|
29天前
|
机器学习/深度学习 敏捷开发 人工智能
自动化测试的崛起:如何利用AI提升软件质量
【6月更文挑战第20天】在软件开发的浪潮中,自动化测试已成为确保产品质量的关键工具。随着人工智能(AI)技术的飞速发展,其在自动化测试中的应用日益广泛,为测试流程带来了革命性的变化。本文将探讨AI如何优化测试用例生成、提高缺陷检测效率和预测潜在问题,从而显著提升软件测试的效率和准确性。
36 3
|
20天前
|
测试技术 UED
探索自动化测试框架:提升软件质量的利器
【6月更文挑战第29天】在软件开发的海洋中,自动化测试框架犹如一艘装备精良的船只,为追求高效与精准的软件质量保驾护航。本文将深入探讨自动化测试框架的核心组成、实施步骤及其在现代软件开发中的重要性,揭示如何通过这些框架来优化测试流程、缩短发布周期并确保产品质量。
20 0
|
21天前
|
测试技术
自动化测试在软件质量保证中的作用与挑战
随着软件开发周期的加速和复杂性的提升,传统的手动测试方法已无法满足高效率、低成本的需求。自动化测试作为解决方案之一,其重要性日益凸显。本文旨在探究自动化测试在确保软件质量方面的贡献及其面临的挑战。通过分析相关研究数据和案例,揭示自动化测试在提高测试覆盖率、降低长期成本以及加快交付速度等方面的优势。同时,探讨了自动化测试实施过程中的技术挑战、维护难题以及技能短缺等问题,并提出了相应的解决策略。
20 0
|
29天前
|
jenkins 测试技术 持续交付
探索自动化测试的边界:持续集成与软件质量的协同进化
随着软件开发节奏的加快,自动化测试成为确保软件质量和快速交付的关键。本文深入分析了持续集成(CI)在自动化测试中的作用,探讨了如何通过优化CI流程来提升软件测试效率和质量。文章首先概述了自动化测试的基本概念和重要性,接着详细讨论了在CI环境下实施自动化测试的策略,包括工具选择、测试用例设计、以及反馈机制建立等。最后,通过案例分析,展示了一个成功的自动化测试实践,旨在为读者提供一套可行的方法论,以促进其软件项目的质量保证工作。
22 0
|
2月前
|
监控 测试技术 持续交付
提升软件测试效率与质量的自动化策略
【5月更文挑战第25天】 在快速迭代的软件发展环境中,传统的手动测试方法已难以满足高效率和高质量的双重要求。本文将探讨一系列创新的自动化测试策略,旨在通过减少重复性工作、提高测试覆盖率以及实现持续集成来优化软件测试流程。文中不仅分析了自动化测试的优势,还详细讨论了实施过程中面临的挑战,并提出了相应的解决方案。通过案例研究和最佳实践分享,本文为读者提供了一套实用的自动化测试框架设计思路和实施步骤。
|
15天前
|
数据采集 存储 API
在信息时代,Python爬虫用于自动化网络数据采集,提高效率。
【7月更文挑战第5天】在信息时代,Python爬虫用于自动化网络数据采集,提高效率。基本概念包括发送HTTP请求、解析HTML、存储数据及异常处理。常用库有requests(发送请求)和BeautifulSoup(解析HTML)。基本流程:导入库,发送GET请求,解析网页提取数据,存储结果,并处理异常。应用案例涉及抓取新闻、商品信息等。
39 2