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

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

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

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 Formaton:push:branches:- mainpull_request:jobs:lint:runs-on: ubuntu-lateststeps:- name: Checkout codeuses: actions/checkout@v2- name: Setup Node.jsuses: actions/setup-node@v2with:node-version: '14.x'- name: Install dependenciesrun: npm ci- name: Lint and formatrun: npm run lint

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/12860.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

python数据清洗-找到重复的txt并输出字数最少的

python数据清洗-找到重复的txt并输出字数最少的

import os import json from collections import Counterdef find_and_write_duplicate_txt_files(root_folder, output_file):# 存储所有找到的 txt 文件名和路径的字典列表txt_files_dict_list []# 统计每个文件名出现的次数filename_counts Counter()# 遍历文件夹及其子文…
阅读更多...
nmap端口扫描工具——LInux

nmap端口扫描工具——LInux

目录 系统版本： nmap主要功能 安装： nmap命令使用方法
阅读更多...
SC8908电机驱动芯片替代AN41908

SC8908电机驱动芯片替代AN41908

SC8908 描述 五路H桥静音驱动电机驱动芯片，闭环直流电机光圈调节，支持霍尔位置检测， 2个步进电机。步进电机驱动带256微步细分。 主要特性 • 步进驱动H桥每路250mA最大驱动电流 • 光圈直流驱动H桥每路150mA最大驱动电流 • 单独…
阅读更多...
web学习笔记（五十四）Vue

web学习笔记（五十四）Vue

目录 1.初始Vue 1.1 什么是Vue 1.2 Vue的特点 1.3 引入Vue 1.4 使用Vue 2. 数据绑定的方法 2.1 Mustache（双大括号插值法） 2.2 v-text 2.3 v-html 3. 列表渲染 1.初始Vue 1.1 什么是Vue Vue 是一套用于构建用户界面的渐进式JavaScript框架。…
阅读更多...
1725 ssm资产管理系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

1725 ssm资产管理系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 java ssm资产管理系统是一套完善的web设计系统（系统采用SSM框架进行设计开发，springspringMVCmybatis），对理解JSP java编程开发语言有帮助，系统具有完整的源代码和数据库，系统主要采用B/…
阅读更多...
libssh C++封装之六(Dir)

libssh C++封装之六(Dir)

1 概述 libssh是一个在客户端和服务器端实现SSHv2协议的多平台C库。使用libssh，您可以远程执行程序、传输文件、使用安全透明的隧道、管理公钥等等。本文描述的对libssh客户端功能的C++封装。 libssh下载地址 3 实现 3.5 Dir Dir类型管理远程路径，通过SFTP和Channel实现(有…
阅读更多...
uni u-form-item 只有图标点击有效

uni u-form-item 只有图标点击有效

如下，输入的地方是个选择项，代码如下： <u-form-item class=u-form-item label="监督主题" prop="themeName" borderBottom ref="item1" @click="openPopup(0)" > <u--input v-model="form.themeNam…
阅读更多...
PTA--《面线对象程序设计》作业3-继承与多态

PTA--《面线对象程序设计》作业3-继承与多态

目录 一&#xff1a;函数题 6-2 长方形长方体类&#xff1a; 6-1 从抽象类shape类扩展出一个圆形类Circle 二&#xff1a;编程题 7-1&#xff1a;周长计算器 一&#xff1a;函数题 6-2 长方形长方体类&#xff1a; 定义一个长方形类Rectangle&#xff0c;拥有长、宽属性…
阅读更多...
定时发圈操作介绍

定时发圈操作介绍

1、登陆已有的账号&#xff0c;点击到"朋友圈"功能 2、选择要发圈的微信号&#xff0c;编辑发圈的文案内容 3、自定义想要的时间点 4、点击"立即发送" 5、可进行跟圈
阅读更多...
【JavaScript】eval

【JavaScript】eval

JavaScript 中的 eval() 是一个全局函数&#xff0c;它接受一个字符串参数&#xff0c;并将其作为 JavaScript 代码进行解析和执行&#xff1b;如果接收的不是一个字符串&#xff0c;则会将传入的数据直接返回。 eval 的基本用法&#xff1a; eval() 函数将传入的字符串参数作为…
阅读更多...
深度解析 Spring 源码：解密AOP切点和通知的实现机制

深度解析 Spring 源码：解密AOP切点和通知的实现机制

文章目录 深度解析 Spring 源码&#xff1a;解密AOP切点和通知的实现机制一、Spring AOP的基础知识1.1 AOP的核心概念&#xff1a;切点、通知、切面等1.2 Spring AOP与传统AOP的区别和优势 二、深入分析切点和通知的实现2.1 研究 Pointcut 接口及其实现类2.1.1 Pointcut 接口2.…
阅读更多...
powershell 防止休眠或屏幕关闭并定时截屏保存

powershell 防止休眠或屏幕关闭并定时截屏保存

powershell 防止休眠或屏幕关闭 01 前言 因工作需要&#xff0c;需要在用户的机器上进行操作&#xff0c;有些工作比较耗时、耗CPU&#xff0c;配置也不高&#xff0c;因而就不能用这台机器同时干太多活&#xff0c;又不能干盯着啥也干不了&#xff0c;但是一段时间不操作&am…
阅读更多...
巩固学习9

巩固学习9

show-me-the-code题目001 #做为 Apple Store App 独立开发者&#xff0c;你要搞限时促销&#xff0c;为你的应用生成激活码&#xff08;或者优惠券&#xff09;&#xff0c;使用 Python 如何生成 200 个激活码&#xff08;或者优惠券&#xff09;&#xff1f; import random a…
阅读更多...
延迟队列有哪些

延迟队列有哪些

延迟队列 与时间相关场景的应用，经常用于延后多少时间执行什么任务。 java 自带延迟队列 class Solution {public static void main(String[] args) throws InterruptedException {DelayQueue<DelayMealTask> queue = new DelayQueue<>();DelayMealTask task =…
阅读更多...
MySQL存储过程练习

MySQL存储过程练习

DDL CREATE TABLE student (id int(11) NOT NULL AUTO_INCREMENT COMMENT 学号,createDate datetime DEFAULT NULL,userName varchar(20) DEFAULT NULL,pwd varchar(36) DEFAULT NULL,phone varchar(11) DEFAULT NULL,age tinyint(3) unsigned DEFAULT NULL,sex char(2) DEFAU…
阅读更多...
数据库审计系统Yearning使用笔记

数据库审计系统Yearning使用笔记

一、启动 1、初始化MySQL 启动mysql docker run -d --namemysql -p 3306:3306 -e MYSQL_ROOT_PASSWORDroot mysql:5.7创建数据库&#xff0c;链接数据库并执行以下创建库的脚步&#xff0c;注意字符集 create database yearning char set utf8mb42、启动Yeelabs 需要执行…
阅读更多...
CDGA|揭秘移动物联网数据治理秘诀，轻松提升数据质量，赋能智慧未来

CDGA|揭秘移动物联网数据治理秘诀，轻松提升数据质量，赋能智慧未来

在数字化浪潮汹涌的今天&#xff0c;移动物联网作为连接物理世界与数字世界的桥梁&#xff0c;其数据治理的重要性日益凸显。高质量的数据不仅是企业决策的基石&#xff0c;更是推动行业智能化、精细化发展的关键。本文将为您揭秘移动物联网数据治理的技巧&#xff0c;助您轻松…
阅读更多...
如何设计实用的ITSM自助服务台

如何设计实用的ITSM自助服务台

在现代IT服务管理&#xff08;ITSM&#xff09;领域中&#xff0c;自助服务台已成为IT运维环境的核心组件。它作为企业内部信息中心与其他部门用户之间的桥梁&#xff0c;一个以用户为中心的平台&#xff0c;更注重用户的自主性和自助能力&#xff0c;使用户能够直接访问所需的…
阅读更多...
微软宣布GPT-4o模型，可在 Azure OpenAI上使用

微软宣布GPT-4o模型，可在 Azure OpenAI上使用

5月14日&#xff0c;微软在官网宣布&#xff0c;OpenAI最新发布的多模态模型GPT-4o&#xff0c;可以在 Azure OpenAI 云服务中使用。 据悉&#xff0c;GPT-4o支持跨文本、视频、音频多模态推理&#xff0c;例如&#xff0c;通过GPT-4o打造一个AI助手&#xff0c;用于辅导孩子解…
阅读更多...
halcon学习之形状匹配

halcon学习之形状匹配

算子 create_shape_model&#xff08;&#xff09; 创建一个用于匹配的形状模型 create_shape_model(Template : : NumLevels, AngleStart, AngleExtent, AngleStep, Optimization, Metric, Contrast, MinContrast : ModelID) 参数 Template&#xff1a; NumLevels&#…
阅读更多...
最新文章

Copyright @ 2022~2023