WebStorm + React 项目,配置 ESLint
WebStorm 提示 Error: No ESLint configuration found.
- 需要配合 ESLint 的配置文件,如果不想配置,可以临时在 WebStorm 中将 ESLint 禁用掉。
Ctrl+Alt+s -> Languages & Frameworks -> Code Quality Tools -> ESLint -> Enable
,将Enable
前面的复选框设置为非勾选状态。 - 全局或者仅在项目安装
ESLint
(二选一),并运行eslint --init
- 仅在项目安装,执行
npm i eslint --save-dev
,如果是开源项目,推荐这种方式。 - 全局安装
npm i eslint -g
- 在 cmd 窗口,进入项目根目录,执行
eslint --init
。如果用 WebStorm 打开的项目,直接在Terminal
窗口执行命令即可(默认路径就是项目根目录)。
- 仅在项目安装,执行
通过以上操作,最终在项目根目录下生成文件 .eslintrc.yml
,内容如下:
env:
browser: true
commonjs: true
es6: true
extends: 'eslint:recommended'
parserOptions:
ecmaFeatures:
jsx: true
ecmaVersion: 2018
sourceType: module
plugins:
- react
rules:
# 缩进风格:这里设置的是用4个空格缩进。
# 至于要用几个空格来缩进,需要根据团队的编码规范来。
# 如果是研究别人的开源项目,建议根据开源项目的实际情况来设置。
indent:
- error
- 4
linebreak-style:
- error
- windows
quotes: # 引号:设置成双引号
- error
- double
semi: # 分号:语句末尾需要有分号
- error
- always
ESLint 是否全局安装,决定 WebStorm
如何配置
- 如果
ESLint
是配置到package.json
,即仅项目下安装,而不是全局安装,则Configuration file
,勾选Automatic search
即可。 - 如果
ESLint
是全局安装,则要指定配置文件,勾选Configuration file:
并在其后指定配置文件。
eslint-plugin-react
依赖
在执行 eslint --init
初始化配置文件的时候,如果选择了要使用 react,则需要安装依赖 eslint-plugin-react
,否则会提示: Error: Failed to load plugin react: Cannot find module 'eslint-plugin-react'
。
解决此类问题,最基本的原则是,缺什么依赖,就安装什么依赖。只是要注意区分,是全局安装还是仅项目安装。
eslint-plugin-react
是否全局安装,与 ESLint
是否全局安装相关:
- 如果
ESLint
是全局安装的,eslint-plugin-react
也要全局安装,安装命令:cnpm install eslint-plugin-react -g
。 - 同理,如果
ESLint
只是在项目下安装,安装命令:cnpm install eslint-plugin-react --save-dev
。
关于 ESLint
与 eslint-plugin-react
的搭配安装,官方文档是这样描述的:If you installed ESLint globally, you have to install React plugin globally too. Otherwise, install it locally.