热门标签 | 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

推荐阅读
  • 本文详细介绍了Akka中的BackoffSupervisor机制,探讨其在处理持久化失败和Actor重启时的应用。通过具体示例,展示了如何配置和使用BackoffSupervisor以实现更细粒度的异常处理。 ... [详细]
  • 本文详细介绍了如何在Linux系统上安装和配置Smokeping,以实现对网络链路质量的实时监控。通过详细的步骤和必要的依赖包安装,确保用户能够顺利完成部署并优化其网络性能监控。 ... [详细]
  • 本文详细介绍了 Dockerfile 的编写方法及其在网络配置中的应用,涵盖基础指令、镜像构建与发布流程,并深入探讨了 Docker 的默认网络、容器互联及自定义网络的实现。 ... [详细]
  • 本文详细介绍了Java中org.eclipse.ui.forms.widgets.ExpandableComposite类的addExpansionListener()方法,并提供了多个实际代码示例,帮助开发者更好地理解和使用该方法。这些示例来源于多个知名开源项目,具有很高的参考价值。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • Android 渐变圆环加载控件实现
    本文介绍了如何在 Android 中创建一个自定义的渐变圆环加载控件,该控件已在多个知名应用中使用。我们将详细探讨其工作原理和实现方法。 ... [详细]
  • golang常用库:配置文件解析库/管理工具viper使用
    golang常用库:配置文件解析库管理工具-viper使用-一、viper简介viper配置管理解析库,是由大神SteveFrancia开发,他在google领导着golang的 ... [详细]
  • 本文详细介绍了Java中org.neo4j.helpers.collection.Iterators.single()方法的功能、使用场景及代码示例,帮助开发者更好地理解和应用该方法。 ... [详细]
  • 优化ListView性能
    本文深入探讨了如何通过多种技术手段优化ListView的性能,包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ... [详细]
  • 本文将介绍如何编写一些有趣的VBScript脚本,这些脚本可以在朋友之间进行无害的恶作剧。通过简单的代码示例,帮助您了解VBScript的基本语法和功能。 ... [详细]
  • Explore a common issue encountered when implementing an OAuth 1.0a API, specifically the inability to encode null objects and how to resolve it. ... [详细]
  • 本文介绍了如何使用 Spring Boot DevTools 实现应用程序在开发过程中自动重启。这一特性显著提高了开发效率,特别是在集成开发环境(IDE)中工作时,能够提供快速的反馈循环。默认情况下,DevTools 会监控类路径上的文件变化,并根据需要触发应用重启。 ... [详细]
  • 本文介绍了如何使用JQuery实现省市二级联动和表单验证。首先,通过change事件监听用户选择的省份,并动态加载对应的城市列表。其次,详细讲解了使用Validation插件进行表单验证的方法,包括内置规则、自定义规则及实时验证功能。 ... [详细]
  • 深入解析Spring Cloud Ribbon负载均衡机制
    本文详细介绍了Spring Cloud中的Ribbon组件如何实现服务调用的负载均衡。通过分析其工作原理、源码结构及配置方式,帮助读者理解Ribbon在分布式系统中的重要作用。 ... [详细]
  • 本文深入探讨了 Java 中的 Serializable 接口,解释了其实现机制、用途及注意事项,帮助开发者更好地理解和使用序列化功能。 ... [详细]
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社区 版权所有