热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

WebStorm、IDE、VSCode集成Eslint

VSCode插件大法好。简单可执行的方案,直接安装VSCodeESlint插件,提示、修复不合规代码。下面内容都是过时的。忽略忽略~目的自动检测语法错

VSCode插件大法好。
简单可执行的方案,直接安装 VSCode ESlint 插件,提示、修复不合规代码。
下面内容都是过时的。忽略忽略~


目的
  1. 自动检测语法错误,提升代码质量的同时也是的代码风格统一,较少交接成本。
  2. 结合IDE自动解决低级语法错误,提高开发效率。

前言
  1. ESLint是什么?
    ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的Javascript代码检测工具。

  2. 为什么要用ESlint?
    保证团队内代码风格统一、提高代码质量、减少低级错误等

  3. 使用ESLint的成本?
    对于各方和团队都有需要一定的事件适应。适应之后对团队和个人的收益远大于成本

  4. 如何使用ESLint?
    npm i -g eslint => eslint index.js => eslint --fix index.js
    http://eslint.cn/docs/user-guide/command-line-interface

  5. 安装
    在这里插入图片描述

    ESLint中文文档: http://eslint.cn/docs/user-guide/getting-started


集成

项目集成:

由于我们项目已经集成了ESLint。接下来我们看一下该项目中是如何集成ESLint。

  1. 在项目内安装ESLint。
    在这里插入图片描述
  2. 设置ESLint规则。
    在这里插入图片描述
  3. 在webpack中调用ESLint
    在这里插入图片描述
  4. eslint-loader 与 ESLint之间的关系
    在这里插入图片描述

开发工具集成

集成后,开发工具可以可视化的提示代码不规范的地方,并且自动fix不规范的地方。

序号工具进度备注
1WebStorm100%
2IDE100%
3VSCode100%
3Sublime Text0%

WebStorm、IDE

  1. 开启开发工具ESLint工具,并修改配置路径
    Preferences > 搜索:ESLint
    在这里插入图片描述
  2. 配置项目Code Style
    Prederences > Editor > Code Style > Javascript
    在这里插入图片描述

VSCode

集成前,默认您的VSCode已经安装完vue相关插件,能正常开发项目。

  1. 安装VSCode相关插件
    ESLint、Vetur、Prettier。
    Tip:图中为我个人的已安装的插件,并不要求全部安装,对插件感兴趣的了解一下用途。
    在这里插入图片描述

  2. 修改插件设置
    将以下参数填入VSCode 用户设置 或 工作区设置。两者区别就是字面意思。

{"files.autoSave": "afterDelay","files.autoSaveDelay": 800,"editor.formatOnSave": true,"eslint.autoFixOnSave": true,"Javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,"prettier.singleQuote": true,"prettier.eslintIntegration": true,"eslint.validate": ["Javascript","Javascriptreact",{"language": "html","autoFix": true},{"language": "vue","autoFix": true}],"eslint.alwaysShowStatus": true,"vetur.format.defaultFormatter.html": "prettyhtml","vetur.format.styleInitialIndent": true,"vetur.format.scriptInitialIndent": true,"editor.quickSuggestions": {"other": true,"comments": true,"strings": true},"Javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,"typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false
}

  • 如何启用自动格式化
    快捷键主动触发格式化:
    在这里插入图片描述
    手动保存触发格式化:
    • Mac:Command + S
    • Windows:Ctrl + S

配置介绍
  1. 目前项目采用的rules配置介绍:
    附带中文解释:https://github.com/yuliangGit/blog/blob/master/rules-chinese.js

  2. ESLint rule 规则详解页面
    替换url末尾的 规则名称(no-console),可以查看不同规则的详解
    http://eslint.cn/docs/4.0.0/rules/no-console


拓展
  1. 如何为ESLint贡献一个自定义的rule?
    http://eslint.cn/docs/developer-guide/working-with-rules
    no-console 源码参考:https://github.com/yuliangGit/blog/blob/master/no-console-code.js

  2. 如何编写一个ESLint插件?
    规范文档:http://eslint.cn/docs/developer-guide/working-with-plugins
    示例:https://github.com/standard/eslint-plugin-standard


参考
  • ESLint官网 http://eslint.cn/
  • Airbnb 规则中文文档 https://github.com/yuche/Javascript

推荐阅读
  • 深入解析Android自定义View面试题
    本文探讨了Android Launcher开发中自定义View的重要性,并通过一道经典的面试题,帮助开发者更好地理解自定义View的实现细节。文章不仅涵盖了基础知识,还提供了实际操作建议。 ... [详细]
  • 优化ListView性能
    本文深入探讨了如何通过多种技术手段优化ListView的性能,包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ... [详细]
  • 本文将介绍如何编写一些有趣的VBScript脚本,这些脚本可以在朋友之间进行无害的恶作剧。通过简单的代码示例,帮助您了解VBScript的基本语法和功能。 ... [详细]
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • 本文详细介绍了Java中org.eclipse.ui.forms.widgets.ExpandableComposite类的addExpansionListener()方法,并提供了多个实际代码示例,帮助开发者更好地理解和使用该方法。这些示例来源于多个知名开源项目,具有很高的参考价值。 ... [详细]
  • 在前两篇文章中,我们探讨了 ControllerDescriptor 和 ActionDescriptor 这两个描述对象,分别对应控制器和操作方法。本文将基于 MVC3 源码进一步分析 ParameterDescriptor,即用于描述 Action 方法参数的对象,并详细介绍其工作原理。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 本文详细介绍了Akka中的BackoffSupervisor机制,探讨其在处理持久化失败和Actor重启时的应用。通过具体示例,展示了如何配置和使用BackoffSupervisor以实现更细粒度的异常处理。 ... [详细]
  • Android 渐变圆环加载控件实现
    本文介绍了如何在 Android 中创建一个自定义的渐变圆环加载控件,该控件已在多个知名应用中使用。我们将详细探讨其工作原理和实现方法。 ... [详细]
  • 本文介绍如何在 Android 中通过代码模拟用户的点击和滑动操作,包括参数说明、事件生成及处理逻辑。详细解析了视图(View)对象、坐标偏移量以及不同类型的滑动方式。 ... [详细]
  • Explore how Matterverse is redefining the metaverse experience, creating immersive and meaningful virtual environments that foster genuine connections and economic opportunities. ... [详细]
  • 本文详细介绍如何使用Python进行配置文件的读写操作,涵盖常见的配置文件格式(如INI、JSON、TOML和YAML),并提供具体的代码示例。 ... [详细]
  • 本文介绍了如何利用JavaScript或jQuery来判断网页中的文本框是否处于焦点状态,以及如何检测鼠标是否悬停在指定的HTML元素上。 ... [详细]
  • 导航栏样式练习:项目实例解析
    本文详细介绍了如何创建一个具有动态效果的导航栏,包括HTML、CSS和JavaScript代码的实现,并附有详细的说明和效果图。 ... [详细]
  • 本文详细介绍了如何在Linux系统上安装和配置Smokeping,以实现对网络链路质量的实时监控。通过详细的步骤和必要的依赖包安装,确保用户能够顺利完成部署并优化其网络性能监控。 ... [详细]
author-avatar
haiziqian_486_834
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有