11-11 04:48 阅读 196

关注

前端代码规范化之create-react-app项目添加eslint

一、安装和配置 eslint

1. 创建项目并安装依赖

# 1.安装ceate-react-app npx create-react-app cra-eslint-demo # 2.进入项目并使用VS Code打开项目 cd cra-eslint-demo && code . # 补充1:由于cra脚手架自身依赖了eslint，故无需再安装eslint。若另外再安装eslint为dependencies或者devDependencies，在 yarn start启动项目时会报错如下图。 # 补充2：发现一个很有趣的事情，我的npx创建的项目安装依赖竟然使用的yarn，同时生成了yarn.lock文件。（如果有大佬懂得的话，可以留言解答一下） 复制代码

2. 配置 eslint

配置 eslint 有两种方式，一种：通过 eslint 自带命令，第二种：手动添加配置文件并安装依赖

2.1 通过 eslint 自带命令生成配置文件

yarn run eslint --init # 或者 ./node_modules/.bin/eslint --init 两者是一样的 # 2.1 How would you like to use ESLint? # 选择 >To check syntax and find problems # 2.2 What type of modules does your project use? # 选择 >JavaScript modules (import/export) # 2.3 Which framework does your project use? # 选择 >React # 2.4 Does your project use TypeScript? # 选择 >No # 2.5 Where does your code run? # 选择 >Browser & Node (按[a]键全选/取消全选，按[space]以选择，按[enter]以确认) # (根据自身实际情况选择！) # 2.6 How would you like to define a style for your project? # 选择 >Use a popular style guide # 选择 >Standard: https://github.com/standard/standard # 2.7 What format do you want your config file to be in? # 选择 >JavaScript (共三种格式可选：JavaScript、YAML、JSON。注意：.eslintrc格式文件已废弃) # 2.8 Would you like to install them now with npm? # 选择 >选择 No，然后自己手动使用 yarn add eslint-plugin-react@latest --dev 安装 # 3.等待.eslintrc.js生成。若生成文件中同时有package-lock.json和yarn.lock文件，任选其一删除。 # 4.由于react 17使用 new JSX transform from React 17，故再react 17+项目中需要在eslint配置文件中的`extends` 键后添加 "plugin:react/jsx-runtime" 来禁用相关规则。 复制代码

// 生成的.eslintrc.js文件 module.exports = {     "env": {         "browser": true,         "es2021": true,         "node": true     },     "extends": [         "eslint:recommended",         "plugin:react/recommended",         "plugin:react/jsx-runtime" // react 17才需添加且必须要添加，否则启动项目后会在控制台报错如下：         // src\App.js Line 6:5:    'React' must be in scope when using JSX     ],     "parserOptions": {         "ecmaFeatures": {             "jsx": true         },         "ecmaVersion": 12,         "sourceType": "module"     },     "plugins": [         "react"     ],     "rules": {     },     "settings": { // 手动配置的所有插件中共享的配置         "react": {           "createClass": "createReactClass", // Regex for Component Factory to use,                                              // default to "createReactClass"           "pragma": "React",  // Pragma to use, default to "React"           "fragment": "Fragment",  // Fragment to use (may be a property of <pragma>), default to "Fragment"           "version": "detect", // React version. "detect" automatically picks the version you have installed.                                // You can also use `16.0`, `16.3`, etc, if you want to override the detected value.                                // default to latest and warns if missing                                // It will default to "detect" in the future           "flowVersion": "0.53" // Flow version         },         "propWrapperFunctions": [             // The names of any function used to wrap propTypes, e.g. `forbidExtraProps`. If this isn't set, any propTypes wrapped in a function will be skipped.             "forbidExtraProps",             {"property": "freeze", "object": "Object"},             {"property": "myFavoriteWrapper"},             // for rules that check exact prop wrappers             {"property": "forbidExtraProps", "exact": true}         ],         "componentWrapperFunctions": [             // The name of any function used to wrap components, e.g. Mobx `observer` function. If this isn't set, components wrapped by these functions will be skipped.             "observer", // `property`             {"property": "styled"}, // `object` is optional             {"property": "observer", "object": "Mobx"},             {"property": "observer", "object": "<pragma>"} // sets `object` to whatever value `settings.react.pragma` is set to         ],         "formComponents": [           // Components used as alternatives to <form> for forms, eg. <Form endpoint={ url } />           "CustomForm",           {"name": "Form", "formAttribute": "endpoint"}         ],         "linkComponents": [           // Components used as alternatives to <a> for linking, eg. <Link to={ url } />           "Hyperlink",           {"name": "Link", "linkAttribute": "to"}         ]     } }; 复制代码

2.2 手动添加配置文件并安装依赖

# 1.将上文的生成的.eslintrc.js文件加入项目根目录 # 2.安装相关依赖 yarn add eslint-plugin-react@latest --dev 复制代码

10.关于eslint

10.1 配置文件的补充说明

ESLint 支持几种格式的配置文件：

• JavaScript - 使用 .eslintrc.js 然后输出一个配置对象。

• YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定义配置的结构。

• JSON - 使用 .eslintrc.json 去定义配置的结构，ESLint 的 JSON 文件允许 JavaScript 风格的注释。

• (弃用) - 使用 .eslintrc，可以使 JSON 也可以是 YAML。

• package.json - 在 package.json 里创建一个 eslintConfig属性，在那里定义你的配置。

如果同一个目录下有多个配置文件，ESLint 只会使用一个。优先级顺序如下：

1. .eslintrc.js

2. .eslintrc.yaml

3. .eslintrc.yml

4. .eslintrc.json

5. .eslintrc

6. package.json

10.2 小命令

npm ls [库名称] # 如 npm ls eslint 可通过该命令可以查看项目下有几个版本eslint

作者：JSTZGG
链接：https://juejin.cn/post/7029198599946764318