react中使用eslint+prettier+airbnb校验代码风格

刚开始学习react，发现官方脚手架里没有提供eslint，对于我这个有代码洁癖的人来说不能忍啊，下面是我引入eslint的过程

一、安装依赖

npm i eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react babel-eslint babel-plugin-import  --save-dev

二、创建eslint 和 prettier配置文件

创建 .eslintrc.js, 也可以使用json格式的，具体可以查看eslint官方文档
配置如下：

module.exports = {'env': {'browser': true,'es6': true,'node': true},'extends': ['airbnb', 'plugin:prettier/recommended'],'parser': 'babel-eslint','parserOptions': {'ecmaFeatures': {'jsx': true}},'plugins': ['react'],'rules': {// 关闭react默认的props-type验证'react/prop-types': [0],//关闭使用解构赋值的检测'react/destructuring-assignment': [0, 'always'],// 解决require报错问题'import/no-extraneous-dependencies': ['error', { 'devDependencies': true }]}
}

创建.prettierrc 配置文件，可覆盖eslint规则，具体规则配置请查看prettier 官方文档
配置如下：

{"jsxSingleQuote": true,"printWidth": 120,"tabWidth": 2,"semi": false,"singleQuote": true,"trailingComma": "none","jsxBracketSameLine": true
}

到这里基本配置就完成了，项目也拥有了eslint校验的功能了

扩展说明

在webstrom里面使用prettier进行自动格式化

在设置里面打开eslint校验工具
在设置里面启动prettier格式化工具
4
然后代码保存时就会自动格式化了

在vscode里面保存也能自动格式化
4. 安装eslint prettier 插件扩展

这里注意一下，就是如果你的项目文件里没有prettier配置文件，格式化的时候代码就会格式化成不是你想要的格式，出现这样的情况你可以在vscode prettier插件里面根据官方文档配置一下，或者在你的项目里面创建prettier配置文件如：.prettierrc

在vscode 里面修改设置

 "eslint.autoFixOnSave": true,// 根据需求自定义你要检测的文件格式"eslint.validate": ["javascript","javascriptreact",],"editor.tabSize": 2，// 关闭vscode默认的格式化保存"editor.formatOnSave": false,

到这里，配置就完成了

git commit 的时候代码自动格式化并检查代码规范

我用的是pre-commit, （你可以根据自己爱好选用其他的哈）
插件地址 https://pre-commit.com/

npm i pre-commit --save-dev

然后在你的package.json 里面设置

// 先在你的 scripts 里面定义 eslint校验和修复命令
"scripts": {"lint": "eslint --ext .js --ext .jsx src","lint-fix": "eslint --fix --ext .js --ext .jsx src"},// 然后再在你的package.json里面加入以下代码// 这里面值需要和你的scripts命令一一对应才能有效，如果还有其他命令直接在lint 命令后添加就行"pre-commit": "lint-fix lint"

如有不足之处，敬请各位大佬批评指正！
QQ 交流 2770723534

react中使用eslint+prettier+airbnb校验代码风格相关推荐

前端通过eslint+prettier+husky统一代码风格
背景多人协作项目,会遇到每个人都有自己的代码风格.所以需要通过工具来统一代码风格. husky是什么? 当您提交或推送时,您可以使用 husky 来检查您的提交消息.运行测试.检查代码等Husky ...
从esLint+Prettier开始格式化代码
1. 促使我要代码格式化的原因代码格式化和代码规范对研发者来说,都并不陌生.随手的保存,随手的格式化代码,总让我们的代码更加漂亮.但是我们在一次次的格式化中,偶尔也有一些问题. 在开发同一个项目时, ...
VSCode中使用 eslint+prettier完成代码格式化以及自动化整理
如果在一个大型项目中会有多个人一起去开发,为了使每个人写的代码格式都保持一致,就需要借助软件去帮我们保存文件的时候,自己格式化代码配置 ESLInt.js vscode软件下载一个ESLint,在到 ...
vue中使用 eslint+prettier
ESLint 主要解决了两类问题,但其实 ESLint 主要解决的是代码质量问题.另外一类代码风格问题这个应该是eslint的报错问题,那么在vue2中如何使用eslint和eslint自动修复呢? ...
webpack中利用eslint对js进行代码格式检校
1.下载多个相关插件 npm i -D eslint eslint-config-airbnb-base eslint-webpack-plugin eslint-plugin-import 2.we ...
Java中手机号、身份证号校验代码
以下是一个Java的校验手机号码的代码: public static boolean validatePhoneNumber(String number) {/*** 校验手机号码是否合法*/Patt ...
antd + react model自定义footer_使用ESLint+Prettier规范React+Typescript项目
项目开发过程中,大多数时候我们使用别人搭建好的脚手架编写代码,是项目的参与者.对于一些细节往往被忽略了.其中代码检测本身是一类非常简单的配置,但涉及不同框架和语言组合使用的时候,可能比想象中要困难,本 ...
eslint规范_规范统一前端代码风格
背景众所周知,前端项目的代码质量和代码格式的校验是不可或缺的.很早之前在一个人开发的时候,脚手架生成vue项目的时候都没有打开过eslint,后面有位大佬加入,给boss说,加了个插件(eslint ...
vscode+CRA+TypeScript+eslint+prettier+stylelint+husky+lint-staged完整版配置
最近在做一个react项目,需要统一和规范代码风格,并且实现git管理,规范提交.所以基于CRA脚手架搭建项目整体框架,并自定义配置相关需求. CRA 在目标文件夹下打开cmd,项目使用ts开发,输入 ...
vue+eslint+prettier格式化
vue项目+eslint自动格式化背景手动格式化命令行指令 vscode设置自定义校验规则 eslint扩展配置文件 eslint:recommended plugin:vue/vue3-es ...

react中使用eslint+prettier+airbnb校验代码风格

刚开始学习react，发现官方脚手架里没有提供eslint，对于我这个有代码洁癖的人来说不能忍啊，下面是我引入eslint的过程

一、安装依赖

二、创建eslint 和 prettier配置文件

扩展说明

git commit 的时候代码自动格式化并检查代码规范

react中使用eslint+prettier+airbnb校验代码风格相关推荐

最新文章

热门文章

react中使用eslint+prettier+airbnb校验代码风格

刚开始学习react，发现官方脚手架里没有提供eslint，对于我这个有代码洁癖的人来说不能忍啊，下面是我引入eslint的过程

一 、安装依赖

二、创建eslint 和 prettier配置文件

扩展说明

git commit 的时候 代码自动格式化并检查代码规范

react中使用eslint+prettier+airbnb校验代码风格相关推荐

最新文章

热门文章

一、安装依赖

git commit 的时候代码自动格式化并检查代码规范