eslint-plugin-react:用于React相关的代码检查。 安装完依赖后,在项目根目录下创建一个.eslintrc.json文件,并添加以下配置: 代码语言:txt 复制 { "extends": [ "eslint:recommended", "plugin:prettier/recommended", "plugin:react/recommended" ], "plugins": ["prettier"], "rules": { "prettier/pre...
1、安装 vscode 插件eslint 和Prettier 要知道 eslint 和 Prettier 所做的事情都是基于编辑器支持的,所以我们做的所有的事情基本都是做给编辑器看的,配置的所有参数配置也是为了编辑器配置的。 2、设置 vscode 让其支持保存自动格式化、支持 React 语法 2、项目安装npm依赖包 这些包都可以安装到 devDependencies 也...
eslint/no-non-null-assertion':0,'@typescript-eslint/no-unused-expressions':'off','semi':['error','never'],// 禁止分号'prettier/prettier':'error',// 强制使用 Prettier 格式化// 导入排序规则'import/order':['error',{'newlines-between':'never',groups:['builtin','external','internal','...
pnpm add -D eslint-plugin-import prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-prettier eslint-config-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser 3. 初始化 eslint npx eslint --init 3.1. 选择 eslint 的校验模式 选择第三个 3.2. 选择项目类型 ...
配置prettier 集成到 eslint 中 此处也可以结合文档进行配置:https://github.com/prettier/eslint-plugin-prettier 安装完成后,需要让 eslint 集成 prettier 的这些规则,让 eslint 可以提示给开发者 prettier 的不规范代码,在.eslintrc.cjs中添加如下内容: ...
lint-staged 就可以实现对于暂存区的检测。 配置 使用npm install lint-staged安装后,在 package.json 中配置 lint-staged 指令,因为需要使用到 eslint 和 prettier 的自动修复,所以还需要将他们添加到 script 属性中。 // package.json"script":{"eslint-fix":"eslint --fix",// 新增eslint的规则, --fix...
stylelint 也同样是作用于暂存区的文件,和 eslint、prettier 一样,只是校验不同类型的文件,所以也配置在 因为之前在 lint-staged 的规则中,在 pre-commit 文件中不需要增添新的命令。 在提交文件时就可以看到对于 css/scss 等样式表的检测,如果报错会终止提交。
要在React应用中使用ESLint和Prettier进行代码规范和格式化,您可以按照以下步骤操作: 安装ESLint和Prettier: 您可以在项目中安装ESLint和Prettier的npm包。运行以下命令来安装它们: npm install eslint prettier AI代码助手复制代码 配置ESLint: 创建一个.eslintrc文件,并在其中配置ESLint规则。您可以使用现有的配置文件...
继续设置 ESLint 和 Prettier,我们需要使用下面给出的命令在我们的应用程序中添加一堆依赖项,例如 babel、eslint、eslint-config、import resolver 和 eslint 插件。 npm install --save-dev @babel/core@7.18.6 @babel/eslint-parser@7.18.2 @babel/preset-react@7.18.6 eslint@8.1.0 eslint-config-prettie...
ESLint和Prettier在React项目中通常被用来帮助开发者维持代码规范和提高代码质量。它们的作用如下: ESLint:ESLint是一个JavaScript静态代码分析工具,用于发现并纠正代码中的潜在问题。在React项目中,ESLint可以帮助开发者发现潜在的代码错误、风格问题和不规范的代码写法,从而提高代码质量和可读性。ESLint可以通过配置文件进...