详解create-react-app 自定义 eslint 配置

2024-12-01 05:47:51

使用eslint和editorconfig规范代码

为什么要用这些：

代码规范有利于团队协作
纯手工规范耗时耗力而且不能保证准确性
能配合编辑器自动提醒错误，提高开发效率

eslint

随着ECMAScript版本一直更新的Js lint工具，插件丰富，并且能够套用规范，规则非常丰富，能够满足大部分团队的需求。

eslint 配合 git

为了最大程度控制每个人的规范，我们可以在git commit代码的时候，使用git hook调用eslint进行代码规范验证，不规范的代码无法提交到仓库。

editorconfig

不同编辑器对文本的格式会有一定的区别，如果不统一一些规范，可能你和别人合作的时候每次更新下来别人的代码就会出一大堆错误-webstorm自动支持editorconfig配置文件。

首先安装eslintnpm i eslint 因为create-react-app默认已经安装了

  "babel-eslint": "7.2.3",
  "eslint": "4.10.0",
  "eslint-config-react-app": "^2.1.0",
  "eslint-loader": "1.9.0",
  "eslint-plugin-flowtype": "2.39.1",
  "eslint-plugin-import": "2.8.0",
  "eslint-plugin-jsx-a11y": "5.1.1",
  "eslint-plugin-react": "7.4.0",

我们针对我们想要的自定义配置，我们再安装如下

npm i babel-eslint \
\ eslint-config-airbnb eslint-config-standard \
\ eslint-loader \
\ eslint-plugin-import \
\ eslint-plugin-jsx-a11y \
\ eslint-plugin-node \
\ eslint-plugin-promise \
\ eslint-plugin-react \
\ eslint-plugin-standard -D

我们在根目录下新建 .eslintrc 文件针对整个项目做一个标准的规范

{
 "extends": "standard"
}

主要项目是前端工程，所以我们在前端文件夹下新建 .eslintrc 文件，在这里去规范客户端代码，客户端代码使用 jsx，很多规则和 nodejs 是不同的，在这里使用更加严格的规范来要求客户端代码。

配置的value对应的值： 0 : off 1 : warning 2 : error

{
 "parser": "babel-eslint",
 "env": {
  "browser": true,
  "es6": true,
  "node": true
 },
 "parserOptions": {
  "ecmaVersion": 6,
  "sourceType": "module"
 },
 "extends": "airbnb",
 "rules": {
  "semi": [0],
  "react/jsx-filename-extension": [0],
  "jsx-a11y/anchor-is-valid": [0]
 }
}

使用 babel-eslint 去解析代码，定义环境是浏览器和es6，会包含公共变量，webpack所以需要node一些环境变量，parserOptions定义版本，jsmodule模式方法书写。

因为需要在每次编译之前都要去检查一下代码，所以还需要配置 webpack,这是create-react-app默认的

   {
    test: /\.(js|jsx|mjs)$/,
    enforce: 'pre',
    use: [
     {
      options: {
       formatter: eslintFormatter,
       eslintPath: require.resolve('eslint'),

      },
      loader: require.resolve('eslint-loader'),
     },
    ],
    include: paths.appSrc,
   },

我们希望屏蔽掉 node_modules 文件夹下的代码

exclude:[path.resolve(__dirname, '../node_modules')]

在项目根目录下新建文件 .editorconfig webstom默认就有配置

root = true 项目根目录
[*] 所有文件都应用这个规则
charset = utf-8 编码模式
indent_style = space 使用 tab 的样式制表符和 space
indent_size = 2
end_of_line = lf 行尾结尾方式
insert_final_newline = true 自动保存行尾最后一行是空行
trim_trailing_whitespace = true 一行结束后面的空格自动去掉

eslint 不检测这行代码 // eslint-disable-line

eslint 不检测这个文件，在开头 /* eslint-disable */在文件结尾/* eslint-enable */

安装 npm i husky -D

然后在 package.json scripts中增加git 钩子,会在执行git commit之前会调用这个命令

"lint": "eslint --ext .js --ext .jsx src/",
"precommit": "npm run lint"

git commit 强制执行 eslint 通过的代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

js代码规范之Eslint安装与配置详解

什么是 ESLint ESLint(中文站点)是一个开源的 JavaScript 代码检查工具,使用 Node.js 编写,由 Nicholas C. Zakas 于 2013 年 6 月创建.ESLint 的初衷是为了让程序员可以创建自己的检测规则,使其可以在编码的过程中发现问题而不是在执行的过程中.ESLint 的所有规则都被设计成可插入的,为了方便使用,ESLint 内置了一些规则,在这基础上也可以增加自定义规则. 一.Eslint安装 1.全局安装如果你想使 ESLint 适用于你所有
详解React开发必不可少的eslint配置

Eslint介绍 Eslint 是一个JavaScript验证工具,有了它可以让你的编辑器像ide一样进行一些静态的错误提示功能. 安装eslint $ npm install eslint -g 项目需要安装的插件 "babel-eslint": "^8.0.3", "eslint": "^4.13.1", "eslint-plugin-react": "^7.5.1", 配置详情下
webpack引入eslint配置详解

webpack中eslint使用首先,要使webpack支持eslint,就要要安装 eslint-loader ,命令如下: npm install --save-dev eslint-loader 在 webpack.config.js 中添加如下代码: { test: /\.js$/, loader: 'eslint-loader', enforce: "pre", include: [path.resolve(__dirname, 'src')], // 指定检查的目录 op
详解js静态检查工具eslint配置文件

ESLint 是一个 Javascript 静态检查工具,它可以帮你养成良好的编程习惯 { // 环境定义了预定义的全局变量. "env": { //环境定义了预定义的全局变量.更多在官网查看 "browser": true, "node": true, "commonjs": true, "amd": true, "es6": true, "mocha": true
详解vue-cli中的ESlint配置文件eslintrc.js

本文讲解vue-cli脚手架根目录文件.eslintrc.js,分享给大家,具体如下: 1.eslint简介 eslint是用来管理和检测js代码风格的工具,可以和编辑器搭配使用,如vscode的eslint插件.当有不符合配置文件内容的代码出现就会报错或者警告 2.安装exlint npm init -y npm install eslint --save-dev node_modules\.bin\eslint --init 初始化配置文件,此配置文件配置好之后,vscode编辑器自动识别
详解antd+react项目迁移vite的解决方案

antd+react+webpack往往是以react技术栈为主的前端项目的标准组合,三者都有成熟的生态和稳定的表现,但随着前端圈的技术不断革新,号称下一代构建平台vite2的发布,webpack似乎不那么香了,为什么这么说呢,因为vite太快了.经过一段时间的尝试,决定在项目中把webpack替换成vite试试,遂写成本文分享给大家. Vite是什么作为本文的主角,首先简单介绍一下vite这个构建工具,该工具是尤雨溪推出的[下一代前端开发和构建工具],vite其实也不是一个新的工具,早在一年
详解对于React结合Antd的Form组件实现登录功能

一.React 结合 Antd 实现登录功能引入所需的 Antd 组件,代码如下所示: import { Form, Icon, Input, Button, message } from 'antd' 在 Login.jsx 中,创建一个 Login 组件.当对外暴露组件时,需要使用 Form 组件进行包装,包装 Form 组件生成一个新的组件 Form(Login),同时新组件会向 Form 组件传递一个强大的对象属性 form,这样就可以取到 Form 表单的值,这也是高阶组件和高阶函数
详解Android更改APP语言模式的实现过程

一.效果图二.描述更改Android项目中的语言,这个作用于只用于此APP,不会作用于整个系统三.解决方案 (一)布局文件 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" a
详解关于SpringBoot的外部化配置使用记录

更新: 工作中突然想起来,关于Yaml的使用,并不属于Spring的范畴,是org.yaml.snakeyaml处理的.所以yaml的使用应该参考官方,不过貌似打不开... Spring利用snakeyaml将配置解析成PropertySource,然后写入到Environment,就能使用了记录下使用SpringBoot配置时遇到的一些麻烦,虽然这种麻烦是因为知识匮乏导致的. 记录下避免一段时间后自己又给忘记了,以防万一. 如果放到博客里能帮助到遇到同样问题的同志,自是极好! SpringB
详解hibernate自动创建表的配置

详解hibernate自动创建表的配置配置自动创建表: <prop key="hibernate.hbm2ddl.auto">update</prop>//首次创建项目时用,项目稳定后一般注释这里有4个值: update:表示自动根据model对象来更新表结构,启动hibernate时会自动检查数据库,如果缺少表,则自动建表:如果表里缺少列,则自动添加列. 还有其他的参数: create:启动hibernate时,自动删除原来的表,新建所有的表,所以每次启动后
在Create React App中启用Sass和Less的方法示例

关于创建 create-react-app 项目请查看:create-react-app 的安装与创建 . 关于在 less 和 sass 如何在 create-react-app 启用 CSS Modules,请查看我的上一篇文章: 在 Create React App 中使用 CSS Modules . 启用 Sass 语法编写 CSS create-react-app 脚手架中已经添加了 sass-loader 的支持,所以只需要安装 node-sass 插件即可安装 node-sass
详解Pycharm安装及Django安装配置指南

本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 以下文章来源于Python实用宝典 ,作者Python实用宝典 Pycharm拥有强大的配置工具.Git版本管理工具.代码补全工具.Debug工具等等,这些都是进行大型项目开发的利器. 尤其是今天的主角Django,由于太过于重要了,Pycharm甚至专门给其提供了配置模板: 能直接在新建项目的时候选择Django并新建一个独立的虚拟环境: 从新建到编码测试,一套流程用起来都极
详解Python3.8+PyQt5+pyqt5-tools+Pycharm配置详细教程

个人使用环境 WIN10x64系统,Python3.8,PyCharm2020.01.03 安装过程一.安装Python3.8 (自己参考其他教程) 二.安装PyQt5 然后在cmd下输入指令 pip install PyQt5 也可以输入这个指令 pip install PyQt5 -i https://pypi.douban.com/simple (后面是豆瓣的镜像地址,是为了加快下载速度) 提示你更新pip,就按照提示更新(这步骤是可选的,看个人需求) 在cmd下输入 python -m
详解Python中的自定义密码验证

目录在测试:nut_and_bolt:️之前试验contains_character TestContainsCharacter字符试验is_valid_size TestIsValidSize 试验is_valid_password TestIsValidPassword 重构is_valid_password 结论这些帖子将分为三个部分. 1.密码验证功能 2.重构密码验证函数 3.对密码验证功能进行单元测试这是Python系列中自定义密码验证的第三部分,也是最后一部分.我们将看看
详解Java如何使用注解来配置Spring容器

目录介绍 @Bean and @Configuration AnnotationConfigApplicationContext实例化容器通过使用 register(Class...) 以编程方式构建容器 @ComponentScan启用组件扫描 Bean的依赖生命周期回调 Bean指定作用域自定义bean名称 Bean别名 Bean注入之间的依赖 @Import @ImportResource @PropertySource 支持多个properties文件 ApplicationCo

详解create-react-app 自定义 eslint 配置

相关推荐

随机推荐