前言我的项目版本如下：React：V18.2.0Node.js:V16.14.0TypeScript：最新版工具：VsCode本文将采用图文详解的方式，手把手带你快速完成在React项目中配置husky、prettier、commitLint，实现编码规范的统一，git提交规范的统一。文章目录前言一、使用eslint1.1装包1.2ESLint插件安装1.3创建命令并使用二、使用prettier2.1装包2.2创建配置文件2.3安装插件2.3创建命令并使用2.4vscode配置2.5代码风格配置2.6重启vscode三、将代码提交到git仓库四、使用husky4.1简介4.2安装4.3编辑pa

有时候手动安装了一个npm包A，npm包A里面包含了npm包B，这时候如果importxxxfrom'npm包B';eslint会报错，提示npm包B不在package.json里面 解决方法：在eslintrc.js增加配置module.exports={rules:{'import/no-extraneous-dependencies':[0,{devDependencies:true,peerDependencies:true//optionalDependencies:true,//bundledDependencies:true}]}};

        错误如图所示：解决方法：    将下面的代码复制到vue.config.js即可：const{defineConfig}=require('@vue/cli-service')module.exports=defineConfig({transpileDependencies:true,lintOnSave:false})

如何在提交代码之前，进行代码格式化检查，保证每个成员的代码都是同一个风格呢？最简单的两种方式：使用prettier+gitpre-commit使用prettier+husky(原理和第一种一模一样哦)名词简介githooks下图为githooks的官方示例，以.sample结尾。注意这些以.sample结尾的示例脚本是不会执行的，重命名后会生效是一些自定义的脚本，用于控制git工作的流程，分为客户端钩子和服务端钩子。客户端钩子包括：pre-commit、prepare-commit-msg、commit-msg、post-commit等，主要用于控制客户端git的提交工作流。服务端钩子：pre

eslint+prettier+vscode自动保存用起来感觉非常爽快。一般来说，安装eslint+prettier插件，然后使用相关脚手架配套的eslint+prettier，无法自动格式代码，每次都需要执行格式化命令。这里贴出保存自动格式化代码的setting.json。//...其他配置项//eslint配置开始//eslint检测开关"eslint.enable":true,//需要eslint校验的文件"eslint.validate":{ "javascript", "javascriptreact", "typescript", "typescriptreact", "vue",

Parsingerror:Unexpectedtoken…eslint报错处理记录起因使用pegjs生成MySQL语法分析js文件后，突然报错。截图：代码：peg$c8=function(c,o){ return{ ...c, order_by:o&&o.toLowerCase(),}},简而言之，就是解析出错了，eslint：“…”这东西我不认识。解决过程一顿搜索，在stackoverflow找到了需要的答案。stackoverflow问题链接大佬说，justadd:"parser":"@babel/eslint-parser"就是在你的eslint配置文件.eslintrc，指定一下解析

vscode配置文件-vutur自动格式化-eslint校验-属性换行{//eslint配置"eslint.enable":true,"eslint.run":"onType","eslint.options":{"extensions":[".js",".vue",".jsx",".tsx"]},//自动格式化代码设置"editor.codeActionsOnSave":{"source.fixAll":true,//"source.fixAll.eslint":true,//保存时格式化"editor.formatOnSave":true,},"vetur.format.defaultFo

Prettier介绍： 一、安装方法：方法一：1.在webstorm的插件市场，搜索并下载prettier方法二：2.可以用npm全局安装，然后在webstom里面配置路径：全局安装prettiernpminstall--globalprettier 配置：2.1配置安装路径2.2 针对以下文件运行：默认是没有包含Vue的，我们手动加上即可：{**/*,*}.{js,ts,jsx,tsx,vue}二、使用方法：每次保存的时候，就会自动格式化了。

我已经设置了我的项目以通过Travis.CI。特拉维斯自动设置CI（环境）变量为真，从而导致警告在构建过程中被视为错误。我的依赖之一（react-mapbox-gl）迫使我违反eslint规则，“风格道具必须是一个对象（react/style-prop-object).我不想将警告作为错误禁用，但我想暂时禁用这一特定规则。我知道在常规的JavaScript节点应用程序中ESLint规则可以在.eslintrc或者package.json。但是，在创建反应式启动的项目中，这些文件似乎都不对构建过程有任何影响吗？有没有一种方法可以在创建反应应用中配置ESLINT规则，而无需弹出我的create-r

准备教程安装eslint官网vue-eslintts-eslint安装eslintyarnaddeslint-D生成配置文件npxeslint--init安装其他插件yarnadd-Deslint-plugin-importeslint-plugin-vueeslint-plugin-nodeeslint-plugin-prettiereslint-config-prettiereslint-plugin-node@babel/eslint-parservue-eslint-parser修改.eslintrc.cjsmodule.exports={env:{browser:true,es202