React项目配置prettier和eslint的方法

更新时间：2022年06月27日 10:04:28 作者：一个爬坑的Coder

这篇文章主要介绍了React项目配置prettier和eslint的相关知识，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

配置prettier和eslint

1.初始化React项目

npx create-react-app study_react

2.安装vscode插件 prettier和eslint, 配置vscode

在这里插入图片描述

3.安装相关依赖

yarn add -D prettier eslint

在代码格式化时采用Perttier规则，而我们代码校验使用的是ESLint，如果同一个规则配置不一致，往往就会出现冲突问题；
比如：字符串单、双引号的配置，eslint后把字符串变成单引号，更新文件代码过后，重新保存（Prettier）又自动格式化后变成双引号，导致代码校验异常。

解决方案1：两者配置文件部分配置修改成一致.
解决方案2：安装相关插件（Prettier 和 ESLint 冲突解决方案 eslint-config-prettier eslint-plugin-prettier）
eslint-config-prettier 禁用 eslint 冲突配置

eslint-plugin-prettier Prettier先格式化（默认是先eslint格式化，再Prettier格式化）

yarn add -D eslint-config-prettier eslint-plugin-prettier

4.优雅的提示错误

“extends”: [“eslint:recommended”, “plugin:react/recommended”], 默认是eslint:recommended，（步骤6后面会看到这个配置）
https://www.npmjs.com/package/eslint-config-airbnb

npx install-peerdeps --dev eslint-config-airbnb

5.初始化.eslintrc.json文件

npx eslint --init

如果全局安装了eslint (npm install -g eslint )了, 可以直接使用eslint --init

根据提示勾选:

在这里插入图片描述

安装完成的eslintrc.json文件

{
 
  "env": {
 
    "browser": true,
    "es2021": true
  },
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "parserOptions": {
 
    "ecmaFeatures": {
 
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react"],
  "rules": {
 
    "indent": ["error", "tab"],
    "linebreak-style": ["error", "windows"],
    "quotes": ["error", "double"],
    "semi": ["error", "always"]
  }
}

6.修改eslintrc.json优雅提示(也就是步骤4所提到)

"extends": ["airbnb", "prettier", "plugin:react/recommended"],
  "plugins": ["prettier", "react"],

7.新建.prettierrc文件

更多规则: https://www.prettier.cn/docs/options.html

{
 
  "singleQuote": false,
  "endOfLine": "lf"
}

8.可自行定义eslintrc.json规则

https://eslint.bootcss.com/docs/rules/

9.效果

在这里插入图片描述

10.让提示更细致

给eslintrc.json追加rules, "prettier/prettier": "error",

在这里插入图片描述

最终的两个文件的配置

// eslint
{
 
  "env": {
 
    "browser": true,
    "es2021": true
  },
  "extends": ["airbnb", "prettier", "plugin:react/recommended"],
  "parserOptions": {
 
    "ecmaFeatures": {
 
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["prettier", "react"],
  "rules": {
 
    "prettier/prettier": "error",
    "indent": ["off", "tab"],
    "linebreak-style": ["off", "windows"],
    "quotes": ["error", "double"],
    "semi": ["error", "always"]
  }
}
===============================================================================
// prettier
{
 
  "singleQuote": false,
  "endOfLine": "lf"
}

配置stylelint

1.安装相关依赖

yarn add stylelint stylelint-config-stardand stylelint-config-prettier stylelint-order -D
- stylelint-config-prettier解决和prettier冲突
- stylelint-order 排序css属性

2.新建.stylelint.json文件

stylelint相关规则: http://stylelint.docschina.org/user-guide/rules/

{
 
  "plugins": ["stylelint-order"],
  "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
  "rules": {
 
    "property-no-unknown": true,
    "comment-no-empty": [
      true,
      {
 
        "message": "禁止空注释"
      }
    ],
    "order/properties-order": [
      "position",
      "top",
      "right",
      "bottom",
      "left",
      "z-index",
      "display",
      "float",
      "width",
      "height",
      "max-width",
      "max-height",
      "min-width",
      "min-height",
      "padding",
      "padding-top",
      "padding-right",
      "padding-bottom",
      "padding-left",
      "margin",
      "margin-top",
      "margin-right",
      "margin-bottom",
      "margin-left",
      "margin-collapse",
      "margin-top-collapse",
      "margin-right-collapse",
      "margin-bottom-collapse",
      "margin-left-collapse",
      "overflow",
      "overflow-x",
      "overflow-y",
      "clip",
      "clear",
      "font",
      "font-family",
      "font-size",
      "font-smoothing",
      "osx-font-smoothing",
      "font-style",
      "font-weight",
      "hyphens",
      "src",
      "line-height",
      "letter-spacing",
      "word-spacing",
      "color",
      "text-align",
      "text-decoration",
      "text-indent",
      "text-overflow",
      "text-rendering",
      "text-size-adjust",
      "text-shadow",
      "text-transform",
      "word-break",
      "word-wrap",
      "white-space",
      "vertical-align",
      "list-style",
      "list-style-type",
      "list-style-position",
      "list-style-image",
      "pointer-events",
      "cursor",
      "background",
      "background-attachment",
      "background-color",
      "background-image",
      "background-position",
      "background-repeat",
      "background-size",
      "border",
      "border-collapse",
      "border-top",
      "border-right",
      "border-bottom",
      "border-left",
      "border-color",
      "border-image",
      "border-top-color",
      "border-right-color",
      "border-bottom-color",
      "border-left-color",
      "border-spacing",
      "border-style",
      "border-top-style",
      "border-right-style",
      "border-bottom-style",
      "border-left-style",
      "border-width",
      "border-top-width",
      "border-right-width",
      "border-bottom-width",
      "border-left-width",
      "border-radius",
      "border-top-right-radius",
      "border-bottom-right-radius",
      "border-bottom-left-radius",
      "border-top-left-radius",
      "border-radius-topright",
      "border-radius-bottomright",
      "border-radius-bottomleft",
      "border-radius-topleft",
      "content",
      "quotes",
      "outline",
      "outline-offset",
      "opacity",
      "filter",
      "visibility",
      "size",
      "zoom",
      "transform",
      "box-align",
      "box-flex",
      "box-orient",
      "box-pack",
      "box-shadow",
      "box-sizing",
      "table-layout",
      "animation",
      "animation-delay",
      "animation-duration",
      "animation-iteration-count",
      "animation-name",
      "animation-play-state",
      "animation-timing-function",
      "animation-fill-mode",
      "transition",
      "transition-delay",
      "transition-duration",
      "transition-property",
      "transition-timing-function",
      "background-clip",
      "backface-visibility",
      "resize",
      "appearance",
      "user-select",
      "interpolation-mode",
      "direction",
      "marks",
      "page",
      "set-link-source",
      "unicode-bidi",
      "speak"
    ]
  }
}

3.效果

在这里插入图片描述

保存自动修复

采用的vscode编辑器, 往setting.json添加配置

"editor.codeActionsOnSave": {
 
	"source.fixAll.stylelint": true,
	"source.fixAll.eslint": true
},

到此这篇关于React项目配置prettier和eslint的文章就介绍到这了,更多相关React配置prettier和eslint内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

一文带你了解React中的并发机制
React 18.2.0 引入了一系列并发机制的新特性,旨在帮助各位开发者更好地控制和优化应用程序的性能和用户体验,下面我们就来看看如何利用这些新特性构建更高效、更响应式的应用程序吧
2024-03-03
react-native ListView下拉刷新上拉加载实现代码
本篇文章主要介绍了react-native ListView下拉刷新上拉加载实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08
react中useState改变值不渲染的解决方式
这篇文章主要介绍了react中useState改变值不渲染的解决方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
React中setState/useState的使用方法详细介绍
这篇文章主要介绍了React中setState/useState的使用方法，useState 和 setState 在React开发过程中使用很频繁，但很多人都停留在简单的使用阶段，并没有正在了解它们的执行机制
2023-04-04
React状态管理Redux的使用介绍详解
redux是redux官方react绑定库，能够使react组件从redux store中读取数据，并且向store分发actions以此来更新数据，这篇文章主要介绍了react-redux的设置,需要的朋友可以参考下
2022-09-09
浅析react里面如何封装一个通用的Ellipsis组件
这篇文章主要为大家详细介绍了在react里面如何封装一个通用的Ellipsis组件,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2024-12-12
react antd checkbox实现全选、多选功能
目前好像只有table组件有实现表格数据的全选功能,如果说对于list,card,collapse等其他组件来说,需要自己结合checkbox来手动实现全选功能,这篇文章主要介绍了react antd checkbox实现全选、多选功能,需要的朋友可以参考下
2024-07-07
react实现移动端下拉菜单的示例代码
这篇文章主要介绍了react实现移动端下拉菜单的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-01-01
react脚手架构建运行时报错问题及解决
这篇文章主要介绍了react脚手架构建运行时报错问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
React使用hook如何实现数据双向绑定
这篇文章主要介绍了React使用hook如何实现数据双向绑定方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03

React项目配置prettier和eslint的方法

目录

配置prettier和eslint

配置stylelint

保存自动修复

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具