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

推荐阅读
  • 本文将介绍如何编写一些有趣的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. ... [详细]
  • MongoDB集群配置:副本集与分片详解
    本文详细介绍了如何在MongoDB中配置副本集(Replica Sets)和分片(Sharding),并提供了具体的步骤和命令,帮助读者理解并实现高可用性和水平扩展的MongoDB集群。 ... [详细]
  • 在维护公司项目时,发现按下手机的某个物理按键后会激活相应的服务,并在屏幕上模拟点击特定坐标点。本文详细介绍了如何使用ADB Shell Input命令来模拟各种输入事件,包括滑动、按键和点击等。 ... [详细]
  • dotnet 通过 Elmish.WPF 使用 F# 编写 WPF 应用
    本文来安利大家一个有趣而且强大的库,通过F#和C#混合编程编写WPF应用,可以在WPF中使用到F#强大的数据处理能力在GitHub上完全开源Elmis ... [详细]
  • 本文探讨了使用C#在SQL Server和Access数据库中批量插入多条数据的性能差异。通过具体代码示例,详细分析了两种数据库的执行效率,并提供了优化建议。 ... [详细]
  • 本文深入探讨了SQL数据库中常见的面试问题,包括如何获取自增字段的当前值、防止SQL注入的方法、游标的作用与使用、索引的形式及其优缺点,以及事务和存储过程的概念。通过详细的解答和示例,帮助读者更好地理解和应对这些技术问题。 ... [详细]
  • 优化ListView性能
    本文深入探讨了如何通过多种技术手段优化ListView的性能,包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ... [详细]
  • 本文详细介绍如何使用arm-eabi-gdb调试Android平台上的C/C++程序。通过具体步骤和实用技巧,帮助开发者更高效地进行调试工作。 ... [详细]
  • 本文详细介绍了如何在BackTrack 5中配置和启动SSH服务,确保其正常运行,并通过Windows系统成功连接。涵盖了必要的密钥生成步骤及常见问题解决方法。 ... [详细]
  • 本文介绍了如何使用JQuery实现省市二级联动和表单验证。首先,通过change事件监听用户选择的省份,并动态加载对应的城市列表。其次,详细讲解了使用Validation插件进行表单验证的方法,包括内置规则、自定义规则及实时验证功能。 ... [详细]
  • 作为一名新手,您可能会在初次尝试使用Eclipse进行Struts开发时遇到一些挑战。本文将为您提供详细的指导和解决方案,帮助您克服常见的配置和操作难题。 ... [详细]
  • 本文详细介绍了macOS系统的核心组件,包括如何管理其安全特性——系统完整性保护(SIP),并探讨了不同版本的更新亮点。对于使用macOS系统的用户来说,了解这些信息有助于更好地管理和优化系统性能。 ... [详细]
  • MySQL 数据库迁移指南:从本地到远程及磁盘间迁移
    本文详细介绍了如何在不同场景下进行 MySQL 数据库的迁移,包括从一个硬盘迁移到另一个硬盘、从一台计算机迁移到另一台计算机,以及解决迁移过程中可能遇到的问题。 ... [详细]
  • 黑马头条项目:Vue 文章详情模块与交互功能实现
    本文详细介绍了如何在黑马头条项目中配置文章详情模块的路由、获取和展示文章详情数据,以及实现关注、点赞、不喜欢和评论功能。通过这些步骤,您可以全面了解如何开发一个完整的前端文章详情页面。 ... [详细]
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社区 版权所有