为你的react app增加eslint自动格式化和代码提交检查

最新推荐文章于 2024-04-20 11:50:28 发布
最新推荐文章于 2024-04-20 11:50:28 发布
阅读量1k 收藏
点赞数
文章标签： javascript git ViewUI
原文链接：https://juejin.im/post/5cb88c4d518825186d654383
版权

众所周知，代码规范一直是我们一个老生常谈的话题，好的代码规范能一定程度上规避bug，提高代码的可维护性，团队风格的统一性，但我们自己创建的项目，以及使用create-react-app等脚手架创建的项目都不会自动添加代码规范以及格式化功能。

今天我就给大家分享一个小工具，为你的react app增加eslint自动格式化和代码提交格式化，他就是fsgen，全名叫做frontend code specification generator，好长的一个名字啊，不过使用起来真的很简单，如下图所示：

这样他就能自动添加一些配置文件完成上述功能了，我使用的vscode，加上eslint插件，配置一下保存自动格式化，就能够在保存的时候自动格式化代码了，并且集成了husky，提交前代码格式化，再也不用自己写一堆eslint配置了，完美！

使用完的目录结构如下图所示（这里默认使用了stylus）：

git地址：github.com/justb/fsgen

觉得好用的话麻烦各位大佬辛苦给个star，谢谢！

转载于:https://juejin.im/post/5cb88c4d518825186d654383

weixin_34112030
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react项目配置eslint步骤，并自动格式化代码
yezi153的博客
11-05 961
1.npm i eslint -D 2.在项目根目录，运行npx eslint --init 按交互提示安装相关插件 它会自动生成eslint的配置文件 3.设置vscode的自动保存格式化 代码 在项目根目录下，补充配置文件：.vscode\settings.json，其内容如下： 自动格式化代码 { "eslint.run": "onType", "eslint.options": { "extensions": [".js", ".vue", ".jsx", ".tsx.
JavaScript 高性能编程 —— Data Access 数据访问
最新发布
cccloveforever的博客
04-20 1423
经典计算机科学的一个问题是确定数据应当存放在什么地方，以实现最佳的读写效率。数据存储在哪里， 关系到代码运行期间数据被检索到的速度。在 JavaScript 中，此问题相对简单，因为数据存储只有少量方 式可供选择。正如其他语言那样，数据存储位置关系到访问速度。每一种数据存储位置都具有特定的读写操作负担。大多数情况下，对一个直接量和一个局部变量数据访 问的性能差异是微不足道的。访问数组项和对象成员的代价要高一些，具体高多少，很大程度上依赖于浏 览器。
Vue-cli Eslint在vscode里代码自动格式化的方法
08-27
本篇文章主要介绍了Vue-cli Eslint在vscode里代码自动格式化的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react-webpack-babel-eslint-boilerplate：高级React + Webpack + Babel + ESLint +路由器基础项目
02-05
高级React | Webpack | 巴别塔ESLint样板 React + Webpack + ESLint + DotENV + ... 产品特点 React Webpack 巴别塔 环境变量 Webpack附加组件 ESLint +漂亮 热装机 路径别名 安装 git clone git@github.com:beyond7/react-webpack-babel-eslint-boilerplate.git cd react-webpack-babel-eslint-样板 纱 yarn dev（ http://localhost:4000 ） 纱线制造和纱线启动（生产）
react-ts-eslint：使用启用了TS和ESLint的create-react-app创建的React应用
02-10
与TS + ESlint互动 如何将ESLint添加到项目 安装仅开发包： npm i --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin 创建初始eslint配置文件 eslint --init （可选）将linting命令添加到package.json " scripts " : { " lint " : " eslint -c .eslintrc.js --ext .js,.jsx,.ts,.tsx ./src " , } F5经验 npm start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行程序。 有关更多信息，请参见关于的部分。 np
react项目增加commit的eslint校验
lyd的博客
07-07 572
husky：8.0.0eslint：8.3.0lint-staged：13.0.3react：18.2.0
前端系列——React开发必不可少的eslint配置
weixin_33852020的博客
01-31 657
项目需要安装的插件 "babel-eslint": "^8.0.3", "eslint": "^4.13.1", "eslint-plugin-react": "^7.5.1", 配置详情 下面的配置涵盖了开发者所需要的绝大部分信息，rules中的值0、1、2分别表示不开启检查、警告、错误。你可以看到下面有些是0，如果有需要开启检查，可以...
react环境配置-引入eslint-保存自动格式化
留着鼻涕敲代码
11-07 988
目标 在react项目中配置eslint，并启用保存自动格式化功能 思路 在项目中安装eslint 用eslint的init命令创建eslint配置文件 设置vscode的自动保存格式化 步骤 npm i eslint typescript -D 在项目根目录，运行npx eslint --init 按交互提示安装相关插件 选择是否使用 TypeScript， 选择是 它会自动生成eslint的配置文件 设置vscode的自动保存格式化 代码 在项目根目录下，补充配置文件：.vscod
React Native 代码规范自动格式化 eslint+prettier
Fan
11-01 3706
在多人开发的过程中，保持代码的规范格式化很重要，有时候每个人开发习惯不同格式各种各样看着很难受，因此我们这里使用eslint+prettier来做自动格式化，可能做前端的同学对这两个工具很熟悉。 下面介绍一下在WebStorm的环境里怎么配置这些插件 eslint配置 ESLint是一个语法规则和代码风格的检查工具 (1)首先我们需要安装相关依赖，将以下依赖添加到package.json的de...
VSCode配合ESLint自动修复格式化（Vue3或React）
weixin_43343144的博客
01-11 8744
原文地址：https://www.jianshu.com/p/5df4ea081fcc   开发Vue或者React的项目的时候，我们经常用到ESLint进行代码的校验，当代码出现不符合规范的格式的时候，ESLint会在控制台提示相关的异常信息。 ESLint极大的提高了团队代码的一致性和规范性，接下来老马介绍一下我的VSCode的相关配置和插件实现保存代码的时候，根据ESLint的配置自动...
前端react项目中添加Eslint校验
weixin_34234721的博客
03-01 2720
当前项目目录安装npm eslint --save-dev eslint --init 生成一个.eslintrc.js文件（可自己在这个文件中进行配置） 安装 npm i eslint-config-airbnb eslint-loader eslint-plugin-babel eslint-plugin-import eslint-plugin-jsx-a11y eslint-plu...
fsgen:在您的React应用的预提交钩子上添加eslint和代码自动格式化
05-05
为您的应用程序（包括打字稿）的precommit钩子添加eslint漂亮和代码自动格式化，默认为react和scss。 分期付款 yarn global add fsgen npm i fsgen -g 用法 // Not in the project folder fsgen my-app // In the ...
react-app:Typescript+React 初始化项目，配置简易 Webpack
05-02
项目会在 git commit 时进行 Prettier 与 ESLint 格式代码，如果未通过请遵守 ESLint 规范，请修复后重新 commit ，情况紧急可以在 git commit 时加 --no-verify 命令不校验直接提交。 启动本地开发服务 yarn start ...
React-Redux-VSCode-样板：使用create-react-app的React Redux Visual Studio Code启动样板
02-05
React Redux VSCode样板 这是使用create-react-app的React Redux Visual Studio Code启动样板。 添加了eslint配置文件 添加了Prettier作为代码格式化程序 ...确保为Visual Studio Code安装Prettier-代码格式化程序插
:ghost: 一个使用 React、Redux 和 Typescript 构建的 SnapChat 克隆。 用 SASS 设计。 使用 Cypress、Jest 和 Enzyme 进行测试。 用 Eslint 整理并用 Prettier 格式化！
06-08
:ghost: SnapChat Clone [LIVE APP] [Live App] • [Video Demo] :high_voltage: Breakdown Built with React Only 功能组件使用 hooks 文件夹结构：扁平 - 不超过一层深 模块化 - 每个文件夹包含组成所需的所有相关...
dungeonindex：用于跟踪NPC的react-app。 这主要是在整个项目NPKeeper之前弄乱React和格式化
02-20
该项目是通过。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看。... 而是将所有配置文件和传递依赖项（Webpack，Babel，ESLint等）直接复制到您的项目中，以
JEECG表格选中状态怎么去掉
weixin_39031037的博客
04-19 435
官网代码（在取消选中状态的时候不生效）
Storage 工具如何封装(前缀、加密、过期时间等)及localStorage的基础介绍
qq_43641110的博客
04-18 1038
​​​​​​​。
一个小时学习javaScript
weixin_43064364的博客
04-20 794
JavaScript 是一种广泛使用的编程语言，最初被设计来增加网页的交互性，让用户能够与网页上的元素进行互动。自从1995年被引入以来，JavaScript已经发展成为Web开发中不可或缺的一部分，并且其用途已经大大扩展到了网页之外。
vscode配合eslint自动修复格式化(vue3或react)
06-28
### 回答1： 要使用VSCode配合ESLint自动修复格式化Vue3或React代码，需要按照以下步骤操作： 1. 在VSCode中安装ESLint插件和Prettier插件。 2. 在项目根目录下安装ESLint和Prettier依赖包。 3. 在项目根目录下创建.eslintrc.js文件，并配置ESLint规则。 4. 在VSCode的设置中，将"editor.formatOnSave"设置为true，以便在保存文件时自动格式化代码。 5. 在VSCode的设置中，将"eslint.validate"设置为"onSave"，以便在保存文件时自动运行ESLint检查。 6. 在VSCode的命令面板中，选择"ESLint: Fix all auto-fixable Problems"，以自动修复ESLint检查出的问题。 7. 在VSCode的命令面板中，选择"Prettier: Format Document"，以自动格式化代码。 通过以上步骤，就可以使用VSCode配合ESLint自动修复格式化Vue3或React代码了。 ### 回答2： VSCode 是一款功能强大的现代化代码编辑器，它支持多种语言和框架，如 Vue3 和 React。同时，它也支持集成 ESLint 插件，以帮助我们检测并自动修复代码规范和格式问题。在该环境中配合 ESLint 自动修复格式化非常简单，下面将为大家介绍具体操作步骤。 首先，我们需要在 VSCode 中搜索并安装 ESLint 插件。安装完毕后，我们可在左侧的“Extensions”面板中看到它。 接着，在项目的根目录下初始化一个新的 eslint 配置文件，运行以下命令： ``` npm install eslint --save-dev ./node_modules/.bin/eslint --init ``` 其中eslint --init命令将会进入eslint的配置向导并根据你的需求自动生成.eslintrc.* 配置文件, 这里的 `—save-dev` 参数意味着将 eslint 安装为开发依赖。同时，我们还需要使用npm/yarn 以安装eslint插件的规则依赖，这里以使用 airbnb 的规则为例： ``` npx install-peerdeps --dev eslint-config-airbnb-base ``` 然后，我们需要在 VSCode 首选项中启用 ESLint 插件，并选择自动保存文件时执行 ESLint 格式化功能。为了实现这个目标，我们需要按照以下步骤： - 打开 VSCode 首选项（Preferences）并搜索“eslint”。 - 在搜索结果中选择“ESLint > Auto Fix On Save”选项并将其勾选上。 image 这样，当我们编写 Vue3 或 React 代码时，ESLint 将自动纠正一些常见的语法和格式问题。一些错误内容比如缩进、括号空格等都会自动得到修复和统一。如果确实存在无法自行修复的问题，我们仍然可以在编辑器中看到它们。在这种情况下，我们需要自行解决问题或查看 ESLint 文档以了解如何解决错误。 综上所述，通过使用 ESLint 工具和 VSCode 编辑器的自动保存功能，我们可以更轻松地维护我们的代码质量和统一性。它可以帮助我们避免格式错误和其他常见的代码问题，确保我们的代码遵循最佳实践，并更加易于阅读和维护。 ### 回答3： VS Code 是一款非常流行的代码编辑器，支持很多功能强大的扩展插件，其中一个非常实用的插件就是 ESLint 自动修复格式化插件。对于 Vue.js 3 或 React 项目的开发者来说，这个插件是非常有用的。 首先，我们要安装 VS Code 上的 ESLint 插件，然后在项目中使用 npm 或 yarn 安装 ESLint： ``` npm install eslint --save-dev ``` 或 ``` yarn add eslint --dev ``` 然后，我们可以在项目根目录下创建一个 `.eslintrc.js` 配置文件，来配置 ESLint 的规则和插件。在 Vue.js 3 项目中，我们可以使用 `@vue/eslint-config` 来设置规则，而在 React 项目中，我们可以使用 `eslint-config-react-app`。配置文件大概长成这样： ``` module.exports = { root: true, env: { browser: true, node: true, es2021: true, }, extends: [ 'plugin:vue/vue3-recommended', 'eslint:recommended', ], parserOptions: { ecmaVersion: 12, sourceType: 'module', }, plugins: [ 'vue', ], rules: { // add your custom rules here }, } ``` 我们可以根据项目需要，自定义 ESLint 的规则和插件。配置好了之后，我们就可以在 VS Code 中使用 ESLint 插件了。 在 VS Code 中打开 Vue.js 3 或 React 项目后，我们可以看到编辑器左下角会出现一个 ESLint 的标志，这表示 VS Code 已经启用了 ESLint 插件。当我们写代码时，如果发现代码出现了 ESLint 的错误或警告，我们只需要将鼠标悬停在出错的地方，就可以看到具体的提示信息。 此时，我们可以使用 VS Code 的快捷键 `Ctrl + .` 或 `Cmd + .`来打开 Quick Fix 菜单，然后选择 "Fix this" 或 "Fix all" 选项，来让 VS Code 自动修复代码中的 ESLint 错误和警告。这个操作非常方便，可以帮助我们快速修复代码中的问题并保持代码风格一致。 总的来说，VS Code 配合 ESLint 自动修复格式化的功能能够大大提高开发效率，降低出错几率，值得我们掌握和使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值