以cmswing为例,说明webstrom如何配置eslint

发布于
如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种形式采集行为。请尊重原创文章内容,转载请保留链接信息。

eslint是一个用于用户编码格式检查的工具,可以使团队的编码习惯保持一致。比如:空格的写法啦,{}的位置了,逗号后面必须添加空格,参数必须使用单引号,不能使用双引号等等。

苏南大叔认为:这款软件非常适合偏执症重度人员使用,可以随时纠正"不规范"的代码写法。因为一般来说,这些"不规范"的代码运行起来是绝对没有问题的,但是就是不符合eslint的规则,所以会被标红显示。

下面苏南大叔以cmswing这款基于thinkjs的开源代码为例,演示一下eslintwebstorm中的使用。如果您对cmswing感兴趣,可以点击查看更多经验文章:https://newsn.net/tag/cmswing/

安装eslint

随便打开一个被标红的js文件,webstrom就会提示安装eslint。当然,如果没有显示的话,可能是没有启用eslint,可以到这里去启用eslint,如下图所示。当然,如果你觉得这个eslint很令人崩溃的话,也可以在这个地方,点击最上方的enable的单选框,关闭这个功能。

以cmswing为例,说明webstrom如何配置eslint - eslint.png

以cmswing为例,说明webstrom如何配置eslint - 000.png

点击npm install之后,就会自动安装eslint

以cmswing为例,说明webstrom如何配置eslint - 001.png

当然,你在终端里面执行下面的代码,效果也是一样的。

npm install eslint --save-dev

配置.eslintrc

安装好eslint之后,就到了设置环境环节,也就是设置当前项目的.eslintrc文件。这个文件,一般放置在根目录下,就可以被eslint自动加载了。当然,如果没有自动加载的话,也可以点击setting来自定义一个.eslintrc文件的位置。

以cmswing为例,说明webstrom如何配置eslint - 002.png

下图是cmswing中的.eslintrc文件的内容,比较简单。事实上,正常的.eslintrc 是非常复杂的,里面定义了很多各种规则。在本文中,苏南大叔不做过多相关描述,请期待苏南大叔的后续文章。

以cmswing为例,说明webstrom如何配置eslint - 003.png

格式化代码

把当前代码格式化为符合eslint格式的代码,就要寻找webstorm中的橙色电灯图标了(注意:是橙色图标,而不是黄色的,黄色的是另外的一个功能)。找到橙色电灯图标后,选择下拉菜单中的fix current file即可。瞬间,你的代码就符合规定了。不过可能就不符合你的代码习惯了。这里,苏南大叔给出点建议:兄弟,忍忍吧,给钱的。

以cmswing为例,说明webstrom如何配置eslint - esmenu.png

配置javascript语法解释

关于javascript的语法解释,webstorm给出了很多选项,一般选择为es6或者jsx。就能识别一些高级的语法了。大家可以自己根据自己的实际情况试试。

以cmswing为例,说明webstrom如何配置eslint - 004.png

小结

本文讲述了在webstrom中,如何使用eslint。关于eslint的更多内容,请关注苏南大叔的后续文章。https://newsn.net/tag/eslint/

尊重原创内容,转载请保留链接信息,感谢您的阅读。
模拟人工批量抓取盗版行为,保留版权法律诉讼权利。

关注互联网发展,关注苏南大叔的《程序如此灵动~》博客
本文章来自:程序如此灵动~
博客地址为:https://newsn.net/
原文地址为:https://newsn.net/say/eslint-webstorm-cmswing.html
上一篇好文:electron的asar的具体用法,asar解密加密
下一篇好文:如何初始化一个thinkjs项目

本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。
如果本文对您有帮助,或者节约了您的时间,欢迎您打赏瓶饮料,建立一下友谊关系。
想要获取完整源码或相关软件?点击这里获取相关内容

可能喜欢

欢迎关注微信公众号“苏布斯看世界”:


万水千山总是情,赏个评论行不行,点赞评论显真情~