代码规范 | 如何在react项目中配置eslint

「这是我参与2022首次更文挑战的第1天,活动详情查看:2022首次更文挑战

什么是ESLint

ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误。在许多方面,它和 JSLintJSHint 相似,除了少数的例外:

  • ESLint 使用 Espree 解析 JavaScript
  • ESLint 使用 AST 去分析代码中的模式
  • ESLint 是完全插件化的。每一个规则都是一个插件并且你可以在运行时添加更多的规则

简单理解,它就是一个代码检查工具

为什么需要ESLint

在日常开发中,每个开发者的代码规范是不一样的,但一个项目是由多人进行开发,这就会导致整个项目的代码是各种各样的,为了解决这一问题我们将ESLint引入到我们的实际项目上,来约束代码和降低维护成本。

准备项目

看了ESLint的简介之后,我们如何在项目中使用它?这也是今天这篇文的主题。

首先准备一个react项目,我们使用vite+react-ts模板来创建,打开一个终端执行以下命令:

pnpm create vite eslint-react-app -- --template react-ts
复制代码

注意:双横线是必须的,这里没有写错哦!

拉取完毕之后,你会看到以下内容:

Done. Now run:

  cd eslint-react-app
  npm install
  npm run dev
复制代码

执行cd eslint-react-app,进去命令之后使用pnpm i对项目依赖进行安装。

配置ESLint

pnpm install eslint -D
复制代码

查看安装的ESLint版本。

"devDependencies": {
  // ...省略
  "eslint": "^8.5.0","
}
复制代码

执行eslint初始化命令,生成.eslintrc.js配置文件。

pnpm exec eslint --init
PS E:\project\viteProjects\eslint-react-app> pnpm exec eslint --init
√ How would you like to use ESLint? · style       
√ What type of modules does your project use? · esm
√ Which framework does your project use? · react
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ How would you like to define a style for your project? · guide
√ Which style guide do you want to follow? · airbnb      
√ What format do you want your config file to be in? · JavaScript
√ Would you like to install them now with npm? · No
复制代码

这里我们不使用npm对依赖进行安装,我们手动使用pnpm对依赖进行安装。(尽可能让项目包管理工具保持一致),执行以下命令进行安装,注意的是这里要加上-D参数。

pnpm install [email protected]^7.28.0 @typescript-eslint/[email protected] [email protected] [email protected]^2.25.3 [email protected]^6.5.1 [email protected]^4.3.0 @typescript-eslint/[email protected] eslint-import-resolver-typescript -D
复制代码

运行eslint

在项目命令中,我们打开一个终端,在使用之前我们先看这两条命令,也算是在项目中比较常用的命令,但现在的编辑器都自带了纠正功能。这里知道一下就好了。

使用eslint命令查看项目中src目录下有哪些错误(这里指不符合规则的地方)。

pnpm exec eslint src/*
复制代码

使用--fix指令,修复项目中src目录下的错误。

pnpm exec eslint src/* --fix
复制代码

让我们来试试这些命令

在项目中,新开一个终端执行:

pnpm exec eslint src/*
复制代码
PS E:\project\viteProjects\eslint-react-app> pnpm exec eslint src/*

E:\project\viteProjects\eslint-react-app\src\App.css
  1:0  error  Parsing error: Declaration or statement expected

E:\project\viteProjects\eslint-react-app\src\App.tsx
   1:33  error  Missing semicolon                                                      semi
   2:30  error  Missing semicolon                                                      semi
   3:19  error  Missing semicolon                                                      semi
   6:40  error  Missing semicolon                                                      semi
   9:5   error  'React' must be in scope when using JSX                                react/react-in-jsx-scope    
   9:5   error  JSX not allowed in files with extension '.tsx'                         react/jsx-filename-extension
  10:7   error  'React' must be in scope when using JSX                                react/react-in-jsx-scope    
  11:9   error  'React' must be in scope when using JSX                                react/react-in-jsx-scope
  12:9   error  'React' must be in scope when using JSX                                react/react-in-jsx-scope
  13:9   error  'React' must be in scope when using JSX                                react/react-in-jsx-scope
  14:11  error  'React' must be in scope when using JSX                                react/react-in-jsx-scope
  14:58  error  'count' is already declared in the upper scope on line 6 column 10     no-shadow
  15:23  error  `{count}` must be placed on a new line                                 react/jsx-one-expression-per-line    
  18:9   error  'React' must be in scope when using JSX                                react/react-in-jsx-scope
  19:16  error  `code` must be placed on a new line                                    react/jsx-one-expression-per-line    
  19:16  error  'React' must be in scope when using JSX                                react/react-in-jsx-scope
  19:36  error  ` and save to test HMR updates.        ` must be placed on a new line  react/jsx-one-expression-per-line    
  21:9   error  'React' must be in scope when using JSX                                react/react-in-jsx-scope
  22:11  error  'React' must be in scope when using JSX                                react/react-in-jsx-scope
  31:11  error  'React' must be in scope when using JSX                                react/react-in-jsx-scope
  42:4   error  Missing semicolon                                                      semi
  45:19  error  Missing semicolon                                                      semi

E:\project\viteProjects\eslint-react-app\src\favicon.svg
   1:1    error  'React' must be in scope when using JSX                       react/react-in-jsx-scope
   1:1    error  JSX not allowed in files with extension '.svg'                react/jsx-filename-extension
   2:1    error  'React' must be in scope when using JSX                       react/react-in-jsx-scope
   2:1    error  Expected indentation of 2 space characters but found 0        react/jsx-indent
   2:311  error  A space is required before closing bracket                    react/jsx-tag-spacing
   3:1    error  'React' must be in scope when using JSX                       react/react-in-jsx-scope
   3:1    error  Expected indentation of 2 space characters but found 0        react/jsx-indent
   3:635  error  A space is required before closing bracket                    react/jsx-tag-spacing
   4:1    error  'React' must be in scope when using JSX                       react/react-in-jsx-scope
   4:1    error  Expected indentation of 2 space characters but found 0        react/jsx-indent
   5:1    error  'React' must be in scope when using JSX                       react/react-in-jsx-scope
   5:1    error  Expected indentation of 2 space characters but found 0        react/jsx-indent
   6:1    error  'React' must be in scope when using JSX                       react/react-in-jsx-scope
   6:1    error  Expected indentation of 2 space characters but found 0        react/jsx-indent
   6:7    error  Unknown property 'stop-color' found, use 'stopColor' instead  react/no-unknown-property
   6:27   error  A space is required before closing bracket                    react/jsx-tag-spacing
   7:1    error  'React' must be in scope when using JSX                       react/react-in-jsx-scope
   7:1    error  Expected indentation of 2 space characters but found 0        react/jsx-indent
   7:18   error  Unknown property 'stop-color' found, use 'stopColor' instead  react/no-unknown-property
   7:38   error  A space is required before closing bracket                    react/jsx-tag-spacing
   9:1    error  'React' must be in scope when using JSX                       react/react-in-jsx-scope
   9:1    error  Expected indentation of 2 space characters but found 0        react/jsx-indent
  10:1    error  'React' must be in scope when using JSX                       react/react-in-jsx-scope
  10:1    error  Expected indentation of 2 space characters but found 0        react/jsx-indent
  10:7    error  Unknown property 'stop-color' found, use 'stopColor' instead  react/no-unknown-property
  10:27   error  A space is required before closing bracket                    react/jsx-tag-spacing
  11:1    error  'React' must be in scope when using JSX                       react/react-in-jsx-scope
  11:1    error  Expected indentation of 2 space characters but found 0        react/jsx-indent
  11:26   error  Unknown property 'stop-color' found, use 'stopColor' instead  react/no-unknown-property
  11:46   error  A space is required before closing bracket                    react/jsx-tag-spacing
  12:1    error  'React' must be in scope when using JSX                       react/react-in-jsx-scope
  12:1    error  Expected indentation of 2 space characters but found 0        react/jsx-indent
  12:18   error  Unknown property 'stop-color' found, use 'stopColor' instead  react/no-unknown-property
  12:38   error  A space is required before closing bracket                    react/jsx-tag-spacing
  15:7    error  Missing semicolon                                             semi

E:\project\viteProjects\eslint-react-app\src\index.css
  1:0  error  Parsing error: Unexpected keyword or identifier

E:\project\viteProjects\eslint-react-app\src\logo.svg
  1:1     error  'React' must be in scope when using JSX                 react/react-in-jsx-scope
  1:1     error  JSX not allowed in files with extension '.svg'          react/jsx-filename-extension
  2:5     error  'React' must be in scope when using JSX                 react/react-in-jsx-scope
  2:5     error  Expected indentation of 2 space characters but found 4  react/jsx-indent
  3:9     error  'React' must be in scope when using JSX                 react/react-in-jsx-scope
  3:9     error  Expected indentation of 6 space characters but found 8  react/jsx-indent
  3:2481  error  A space is required before closing bracket              react/jsx-tag-spacing
  4:9     error  'React' must be in scope when using JSX                 react/react-in-jsx-scope
  4:9     error  Expected indentation of 6 space characters but found 8  react/jsx-indent
  4:47    error  A space is required before closing bracket              react/jsx-tag-spacing
  5:9     error  'React' must be in scope when using JSX                 react/react-in-jsx-scope
  5:9     error  Expected indentation of 6 space characters but found 8  react/jsx-indent
   7:3   error  JSX not allowed in files with extension '.tsx'  react/jsx-filename-extension
  10:34  error  Missing trailing comma                          comma-dangle
  11:2   error  Missing semicolon                               semi

✖ 82 problems (82 errors, 0 warnings)
  46 errors and 0 warnings potentially fixable with the `--fix` option.
复制代码

可以发现当前这个项目高达82个规范问题,大致看了下,是一些代码没有引号结尾,以及空格引起的,其中有46个错误可以通过--fix参数进行修复,我们执行下pnpm exec eslint src/* --fix,执行完之后我们的错误还没有被完成清除。

解决剩下的问题

解决 error Unable to resolve path to module './App' import/no-unresolved

解决 error Missing file extension for "./App" import/extensions

安装eslint-import-resolver-typescript插件(在前面我们已经安装了),在eslintrc.js配置文件中新增一个settings节点,配置以下内容。

// eslintrc.js
settings:{
  "import/resolver": {
      typescript: {}
      }
}
复制代码

解决 error 'React' must be in scope when using JSX react/react-in-jsx-scope

eslintrc.js文件中rules添加以下规则,忽略规则。

// eslintrc.js
rules: {
  "react/react-in-jsx-scope": "off",
},
复制代码

忽略一些不检测的文件例如svg文件。

在项目根项目中新增一个.eslintignore配置文件,该文件作用于在执行eslint检测时,忽略的一些文件(根据自身的需求,来填写忽略检测的文件)。

// .eslintignore
*.svg
*.css
复制代码

解决 Missing file extension "ts" for "./App"

// eslintrc.js
rules: {
  "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
   ]
},
复制代码

解决 error 'count' is already declared in the upper scope on line 6 column 10 no-shadow

// eslintrc.js
rules: {
  "no-shadow": "off",
},
复制代码

解决 error JSX not allowed in files with extension '.tsx' react/jsx-filename-extension

// eslintrc.js
rules: {
  "react/jsx-filename-extension": [1, { extensions: [".tsx",".ts"] }],
},
复制代码

添加react-hooks插件(在前面我们已经安装了),在.eslintrc.js文件中plugins节点最后面添加react-hooks

// eslintrc.js
plugins: [
	// ...
	"react-hooks"
],
复制代码

我们再执行下pnpm exec eslint src/*命令,现在项目已经没有任何规范问题了。

在编辑器中使用ESLint

VSCODE插件中心中搜索ESLint,安装ESLint插件即可。

image-20211228154828669

Webstorm中默认集成了ESLint,打开菜单栏中File->Settings 配置ESLint

image-20211228155946697

GitHub仓库

github.com/QC2168/esli…

猜你喜欢

转载自juejin.im/post/7054206618275151908