[英]How to configure ESLint to work with PhpStorm to autofix ESLint errors
I've defined some rules in ESLint config file. 我在ESLint配置文件中定义了一些规则。 This file is attached in
此文件附在
Preferences
->Languages and Frameworks
->JavaScript
->Code Quality Tools
->ESLint
And I see it works fine because in code editor every rule is shown when there appear to be an error which doesn't match them. 我认为它工作正常,因为在代码编辑器中,当出现与它们不匹配的错误时,会显示每个规则。 Also when I use "Code inspector"
当我使用“代码检查员”时
Code
-> Inspect code
Inspector finds all the errors and shows them in little window at the bottom. Inspector找到所有错误并在底部的小窗口中显示它们。 There is also a possibility to apply autofix to each of this errors but when I try to do this I got redirected to ESLint config page in PhpStorm preferences section.
还有可能对每个错误应用自动修复,但是当我尝试这样做时,我被重定向到PhpStorm首选项部分中的ESLint配置页面。 It looks like this:
它看起来像这样:
there should be a link which should fix that automaticly when I click on it but instead there is a link which just opens ESLint config popup window: 应该有一个链接,当我点击它时应该自动修复它,但是有一个链接只打开ESLint配置弹出窗口:
How can I get this to work fine? 我怎样才能让它正常工作? I've been trying to look in PhpStorm docs about it but no success.
我一直试图查看PhpStorm文档,但没有成功。
I haven't found a way to do this in any IDE (PhpStorm/Atom/Sublime/WebStorm). 我还没有找到在任何IDE(PhpStorm / Atom / Sublime / WebStorm)中执行此操作的方法。 However you can fix some issues through the command line by running
eslint --fix
. 但是,您可以通过运行
eslint --fix
通过命令行修复一些问题。
You need a basic understanding of ESLint, to follow these steps: 您需要对ESLint有基本的了解,才能按照以下步骤操作:
1) Install ESlint: 1)安装ESlint:
Globally: 全球:
npm i -g eslint eslint-config-airbnb
(Airbnb's style guide is extensively used - http://nerds.airbnb.com/our-javascript-style-guide/ .) (Airbnb的风格指南被广泛使用 - http://nerds.airbnb.com/our-javascript-style-guide/ 。)
OR locally (preferrable): 或在本地(优先):
Installing locally is preferable if you've a local node_modules
directory. 如果您有本地
node_modules
目录,则最好在本地node_modules
。 Run this command from your Project Directory: 从项目目录运行此命令:
npm i --save-dev eslint eslint-config-airbnb
(You can then run eslint
from ./node_modules/.bin/eslint
) (您可以再运行
eslint
从./node_modules/.bin/eslint
)
2) Create a .eslintrc
file in your project directory with the following line. 2)使用以下行在项目目录中创建
.eslintrc
文件 。
{ "extends": "airbnb" } // We installed airbnb's style guide in step 1.
3) Backup/Commit your source code files 3)备份/提交源代码文件
Backup the files you want to lint; 备份你想要的文件; the following command might change several lines.
以下命令可能会更改多行。
4) Run eslint --fix
as follows: 4)运行
eslint --fix
如下:
eslint --fix path/to/file.js
eslint --fix path/to/files/*.jsx
This will fix 10s of errors in your files! 这将修复文件中的10个错误!
5) If eslint --fix
stops at some error, fix it manually then run again 5)如果
eslint --fix
在某些错误时停止,请手动修复然后再次运行
I noticed that eslint --fix
doesn't fix all erros in one go. 我注意到
eslint --fix
并没有一次性修复所有错误。 ie it will sometimes run till a particular point in file, then stop at errors it can't handle automatically. 即它有时会运行到文件中的特定点,然后停止它无法自动处理的错误。
If you remove the topmost issue that eslint
is stuck on, running the command again fixes more errors in the file. 如果删除了
eslint
卡在最上面的问题,再次运行该命令可以修复文件中的更多错误。 Rinse, Repeat. 冲洗,重复。
-- -
eslint added some new features in 2015. Hope the '--fix' option becomes better in future: http://eslint.org/blog/2015/09/eslint-v1.5.0-released eslint在2015年增加了一些新功能。希望' - fix'选项在未来变得更好: http ://eslint.org/blog/2015/09/eslint-v1.5.0-released
You can add shortcut to run ESLINT . 您可以添加快捷方式来运行ESLINT。 I have done same setting for phpstrom .Working fine at my end
我为phpstrom做了同样的设置。我的工作很好
Refer: https://medium.com/@jm90mm/adding-prettier-to-webstorm-a218eeec04d2 参考: https : //medium.com/@jm90mm/adding-prettier-to-webstorm-a218eeec04d2
Also for autosave fix ,you can refer this 此外,对于自动保存修复,您可以参考此
https://medium.com/@netczuk/even-faster-code-formatting-using-eslint-22b80d061461 https://medium.com/@netczuk/even-faster-code-formatting-using-eslint-22b80d061461
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.