ESLint-的基本介绍[通俗易懂]

ESLint-的基本介绍[通俗易懂]什么是eslintESLint是一个代码检查工具,用来检查你的代码是否符合指定的规范(例如:=的前后必须有一个空格)。规范行业推荐的规范;在创建项目时,我们使用的是JavaScriptStandardStyle代码风格的规则自定义的规范。你和你的团队可以自行约定一套规范使用ESLint的好处在于:多人协作时代码风格统一eslint是法官,Standard是法律vue-cli工具在创建项目时提供选项,我们前面在创建项目时选中了它,所以它在本项目中是直接生效

大家好,又见面了,我是你们的朋友全栈君。

什么是eslint

ESLint 是一个代码检查工具,用来检查你的代码是否符合指定的规范(例如: = 的前后必须有一个空格)。

  • 规范

    • 行业推荐的规范; 在创建项目时,我们使用的是 JavaScript Standard Style 代码风格的规则
    • 自定义的规范。你和你的团队可以自行约定一套规范
  • 使用ESLint的好处在于:多人协作时代码风格统一

eslint是法官,Standard 是法律

vue-cli工具在创建项目时提供选项,我们前面在创建项目时选中了它,所以它在本项目中是直接生效的 。

JavaScript Standard Style 规范说明

在项目创建之初我们就选中了这个规范,也就是说,我们后续所有的代码都必须要遵守这个要求,否则ESLint就会报错。

下面是这份规则中的一小部分:

代码规范错误

如果你的代码不符合standard的要求,eslint会跳出来刀子嘴,豆腐心地提示你。下面我们在main.js中随意做一些改动:添加一行let a= 10;

import Vue from 'vue'
import App from './App.vue'
import router from './router'
​
Vue.config.productionTip = false
let a = 10 // 这行代码是新添加的
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

按下保存代码之后:将会看在控制台中输出如下错误:

1.png

改正错误的四种方式

有四种方法来修正错误:

  • 手动修正: 人肉修改
  • 命令修正:npm run lint
  • 修改规则:让代码符合修改之后的规则,当然也就不报错了
  • 插件修正: 配合vscode 中的eslint插件

手动修正

根据错误提示来一项一项手动修正。

如果你不认识命令行中的语法报错是什么意思,你可以根据错误规则名字(func-call-spacing, space-in-parens,…)去 ESLint 规则列表网站中查找其具体含义。

建议大家手动去修改错误,帮助养成良好的编码习惯,更加专业

命令修正

vuecli创建项目时 提供了自动修复功能(有些复杂的错误还是要手动来改正),具体做法是运行:

npm run lint

小结

eslint错误修正有四种方式: 我们这里介绍了前面两种,后面两种再来分别介绍。

ESLint-自定义规则

目标

了解eslint的自定义规则,能看懂.eslintrc.js的配置

自定义校验

在项目根目录下面,有一个.eslintrc.js文件,它是对eslint进行配置的,其中有一个属性是专门用来设置自定义代码规则的:rules


module.exports = {
  root: true, // 当前项目使用这个配置文件, 不会往父级目录找.eslintrc.js文件
  env: { // 指定eslint启动环境(vuecli底层是node支持), browser: true也可以在浏览器设置
    node: true
  },
  extends: [ // 扩展配置
    'plugin:vue/essential', // vue里必须的规则
    '@vue/standard' // 使eslint继承@vue/cli脚手架里的 - standard标准
  ],
  parserOptions: { // 对新语法使用eslint
    parser: 'babel-eslint' // 使用babel-eslint 来解析新语法ES6
  },
  // 这里可以进行自定义规则配置
  // key:规则代号
  // value:具体的限定方式
  //   "off" or 0 - 关闭规则
  //   "warn" or 1 - 将规则视为一个警告(不会影响退出码),只警告,不会退出程序
  //   "error" or 2 - 将规则视为一个错误 (退出码为1),报错并退出程序
  rules: { // 自定义规则 - 其实上面集成后有很多内置的规则, 这里可以进行规则的一些修改
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 上线环境用打印就报警告, 开发环境关闭此规则
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // debugger可以终止代码执行
    'no-multiple-empty-lines': 'off' // 不允许有连续多行空行(关闭规则)
  }
}

rules是一个对象,以键值对的格式来约定规则:

  • 键名是规则名(可在报错信息和eslint官网查看)
  • 值是这条规则的具体说明, 最常见的有off,warn,error。

示例 – 关闭多行空格

在配置文件中补充一条配置:


  rules: { // 自定义规则 - 其实上面集成后有很多内置的规则, 这里可以进行规则的一些修改
    // 省略其他
+   'no-multiple-empty-lines': 'off' // 不允许有连续多行空行(关闭规则)
  }

修改了配置文件,一定要重启项目,验收效果

ESLint-在vscode中使用插件

目标

掌握配合vscode中的eslint插件一起工作的方法:

  1. 有错误立即提示(显示波浪线)
  2. ctrl+s保存时立即自动修正错误

改正错误的方式

有三种方法来修正错误:

  • 手动修正: 人肉修改
  • 命令修正:npm run lint
  • 插件修正: 配合vscode 中的eslint插件

安装eslint插件

我们还可以安装eslint插件, 让vscode实时告诉我, 我哪里错了

2.png

非常非常非常重要: 用vscode打开项目时,将脚手架工程作为vscode根目录, 因为eslint要使用配置文件.eslintrc

eslint自动格式化修正代码

按如下五个步骤:

7.png

下面是补充内容:

{
  "eslint.enable": true,
  "eslint.run": "onType",
  "eslint.options": {
      "extensions": [
          ".js",
          ".vue",
          ".jsx",
          ".tsx"
      ]
  },
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
  }
}

eslint.run – 运行eslint检验的时刻 (onSave保存) (onType输入时)

editor.codeActionsOnSave – 控制在保存时运行代码操作时修复哪些问题

  • source.fixAll.eslint – 自所有插件的所有可自动修复的ESLint错误都将在保存时修复

更多的规则可以看这里

备注:可能遇到的问题

ctrl+s保存不自动格式化

打开一个代码文件, 右下角有个ESLint, 如果是图示这样, 点击一下然后弹出来的对话框选择AnyWhere 在任意处生效(启动vscode中的eslint)

变成v就代表启动着呢

8.png

自动缩进1

试着把Beautify插件卸载 – eslint也能美化代码哦
9.png
可能还有JS/CSS Format插件/其他美化插件

不想卸载可以禁用

如果你的vscode中用其它扩展 启用 自动格式化功能,则有可能与eslint的规则冲突!
4.png

解决方案:关闭vscode中的自动格式化

自动缩进2

如果上面不行, 就修改vscode的配置

文件>设置里, 搜索这个, 把下面的勾去掉
5.png

一保存, 单引变双引

原因:vetur插件和eslint冲突, 修改eslint插件配置, 把这里代码覆盖进去


{
    "eslint.run": "onType",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "vetur.validation.template": false, // 把 vetur 扩展的 template 格式化去掉
    "editor.formatOnSave": false, // 去掉 vscode 自带的自动保存 ,vscode 默认也是 false的,如果要用 eslint 格式化,默认的格式化就不能开启
    "eslint.enable": true, // eslint 格式化的配置
    "eslint.autoFixOnSave": true, // eslint保存时候自动解决语法错误
    "eslint.options": { // eslint选项-格式化js和vue文件
        "extensions": [
            ".js",
            ".vue"
        ]
    },
    "eslint.validate": [
        "javascript",
        {
            "language": "vue",
            "autoFix": true,
        },
        "html",
        "vue"
    ],
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/150492.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • Facebook时序预测工具Prophet实战分析

    Facebook时序预测工具Prophet实战分析引言去年Facebook开源了一套时序预测工具叫做Prophet。Prophet是一个预测时间序列数据的模型。它基于一个自加性模型,用来拟合年、周、季节以及假期等非线性趋势。它在至少有一年历史数据的日常周期性数据,效果最好。Prophet对缺失值,趋势的转变和大量的异常值是有极强的鲁棒性。Prophet中文翻译是:“先知”。名字还是挺贴切的。在看完本篇文章后,你将会知道:

  • 示波器的存储深度[通俗易懂]

    示波器的存储深度[通俗易懂]采集时间窗口=存储深度/采样率安捷伦的9000系列示波器在界面左上角上有显示采样率和存储深度,单位为MSa/s或者GSa/s已经Mpts,Mpts代表存储深度,pts是points的缩写,Mpts是指M个点。在每通道的存储深度为1Mpts的设置下,示波器可以10GSa/s采样率捕获1ms的波形。同一示波器,但每通道的存储深度是100Mpts的设置,那么在采样率相同的条件下可以捕获10ms…

  • 群体智能优化算法

    群体智能优化算法群体智能优化算法介绍什么是群体智能优化算法群体智能优化算法的定义群体智能优化算法的原则常见的群体智能优化算法挖坑蚁群算法粒子群优化算法菌群算法蛙跳算法人工蜂群算法总结由于在研究生期间一直研究粒子群优化算法(ParticleSwarmOptimization),所以对其他的一些群体智能优化算法(SwarmIntelligence)也是有一定的了解的,既然自己在这方面还算有一些自己的见解,所以…

  • python logging模块 日志 (详细解析)「建议收藏」

    python logging模块 日志 (详细解析)「建议收藏」目录1基本使用2将日志写入到文件2.3设置消息的等级2.4捕获traceback2.5多模块使用logging3通过JSON或者YAML文件配置logging模块3.1通过JSON文件配置3.2通过YAML文件配置1基本使用转自:Python常用模块大全(整理)-略微抖动-博客园配置logging基本的设置,然后在控制台输出日志,importlogginglogging.basicConfig(level=logg

  • cas单点登录实现原理(用户登录测试用例)

    转载地址http://www.cnblogs.com/lihuidu/p/6495247.html1、基于Cookie的单点登录的回顾    基于Cookie的单点登录核心原理:   将用户名密码加密之后存于Cookie中,之后访问网站时在过滤器(filter)中校验用户权限,如果没有权限则从Cookie中取出用户名密码进行登录,让用户从某种意义上觉得只登录了一次。   该方式缺…

  • initramfs-kernel_ubuntu initramfs

    initramfs-kernel_ubuntu initramfsLinux系统启动时使用initramfs(initramfilesystem),initramfs可以在启动早期提供一个用户态环境,借助它可以完成一些内核在启动阶段不易完成的工作。当然initramfs是可选的,Linux中的内核编译选项默认开启initrd。在下面的示例情况中你可能要考虑用initramfs。加载模块,比如第三方driver定制化启动过程(比如打印welcomeme…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号