认识 ESLint 和 Prettier

时间: 2020-06-02阅读: 295标签: eslint

ESLint

先说是什么:ESLint 是一个检查代码质量与风格的工具,配置一套规则,他就能检查出你代码中不符合规则的地方,部分问题支持自动修复。

使用这么一套规则有什么用呢?如果单人开发的话倒是没什么了,但是一个团队若是存在两种风格,那格式化之后处理代码冲突就真的要命了,统一的代码风格真的很重要!

(其实以前自己做一个项目的时候,公司电脑和家庭电脑的代码风格配置不一样,在家加班的时候也经常顺手格式化了,这么循环了几次不同的风格,导致 diff 极其混乱 )


如何配置

用脚手架生产的配置可能会在 package.json 里面,个人建议拆成单独的 .eslintrc.json 文件,另外也可以使用 js 文件 export 或者 yaml 格式。

默认 ESLint 不会有任何规则,不过你可以直接用 "eslint:recommended" 套用一些常用规则(包括上面 rules 页面打了勾的选项)。

我之前用 vue cli 创建的工程规则是 "@vue/standard":

{
  "root": true,
  "env": {
    "node": true
  },
  "extends": ["plugin:vue/essential", "@vue/standard"],
  "rules": {
    "semi": ["error", "never"],
    "quotes": ["error", "single"],
    "comma-dangle": ["error", "only-multiline"],
    "space-before-function-paren": ["error", "never"]
  },
  "parserOptions": {
    "parser": "babel-eslint"
  }
}

rules 部分是我按平时的风格自己加的,rules 中的定义会覆盖 extends 里配置组合中的设定。对于那些使用脚手架搭建的项目,遇到不符合团队或自己代码风格的地方可以另外在 rules 里配置。


实用提示

在 vscode 安装 ESLint 插件之后,鼠标悬停于错误语句,就会看到错误原因,点击链接可以直达该设定的详情页面,页面内包括:

  • 对该风格的描述
  • 错误与正确的使用事例
  • 配置可选项

通过这些信息可以快速调整 rules 中的配置。

顺带一提,实例中多用数组举例,其实简单的开关配置用数字即可:

"off" or 0 - turn the rule off
"warn" or 1 - turn the rule on as a warning (doesn't affect exit code)
"error" or 2 - turn the rule on as an error (exit code is 1 when triggered)

另一个问题是 ESLint 格式化很麻烦,怎么办?

早就有人提出为什么右键格式化里面不能选 ESLint 这个issue,里面有很多可选方案,我比较喜欢下面这种:

修改 keybindings.json 文件,绑定一个快捷键到 eslint.executeAutofix 即可,再也看不到那些恼人的 error 啦!


Prettier

因为估计大部分人都不会编程式地使用 Prettier,所以下面讲的都是 vscode 的 Prettier 插件。

Prettier专注于代码排版,但不会关心你的代码质量。

说到这里,既然 ESLint 已经包含了排版相关的校验,为什么还需要 Prettier 呢?

我想到这么三个原因:一是 ESLint 安装和配置比较麻烦,而且 lint 的速度并不快;二是使用 Prettier 并不只针对 JavaScript,也就是安装 Prettier 插件,就可以格式化各种流行语言;三是配置没那么眼花缭乱。

毕竟是只管代码格式,Prettier 的选项本来就比 ESLint 少多了,而且即使只在样式上,prettier 也不倾向于乱加选项,这一点还专门在选项的哲学里说明了 Prettier 选项精简的原因。

说回配置方式,Prettier 与 ESLint 同样可用 jsjson、yaml 格式,下面举例依然使用惯用的 .prettierrc.json。

最常用的配置也就这四项:tab 宽度、尾逗号、是否使用分号和是否使用单引号:

{
  "tabWidth": 2,
  "trailingComma": "es5", // comma-dangle
  "semi": false, // semi
  "singleQuote": true // quotes
}

除了缩进没有管之外,另外三个选项对应的 ESLint 选项已经写在注释里。Prettier 格式化的结果和 ESLint 冲突是常有的问题,官网 Integrating with Linters 部分也有提供了让 Prettier 继承 ESLint 配置的方法,需要另外安装依赖。不过我看实在不必,按我的实际风格习惯自己配一下也就几分钟的事情。

关于这两个工具就先写到这了,希望大家能正确区分这两个工具啦~


时代的眼泪

—— 下面一些不知道有没有用的信息,可以选择不看 ——

下面两个片段都是 vscode 的 settings.json 文件

{
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "semi": false,
      "trailingComma": "es5",
      "singleQuote": true
    }
  }
}

很久以前依稀记得 vetur 需要像上面的配置一样嵌套在 vetur 里,现在查了资料才发现配置了 .prettierrc.json 的话一切以配置文件为准,直接无视这里的配置。还记得当年用 vetur 不知道要在里面套 prettier 属性,还折腾了一些时间呢。

{
  "prettier.semi": true,
  "prettier.trailingComma": "es5",
  "prettier.singleQuote": true
}

又像上面的配置一样配置整个 vscode 的风格,实测现在是不能用的,即使没有 .prettierrc.json 这样配置也不生效,官网现在也没有提到这种配置方法。

上面两个配置不是本文主要内容,只是突然想起来好像有这回事,而现在,可能已经成为了时代眼泪吧。

原文链接:https://ssshooter.com/ 

 

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9228

关闭

ESLint规则配置说明

有的时候多人开发,代码的风格,用的代码编辑器都各不相同,所以为了大家能保持一种统一的风格,ESLint就可以帮我们检查代码的格式,和风格。

vue-cli3 取消eslint 校验代码

vue create hello-world创建项目的时候选择了Linter / Formatter,所以写代码的时候会有代码规范检查,怎么才能关闭这个校验呢?

你不知道的Vuejs - 使用ESLint检查代码质量

Javascript 是一门弱类型语言,所以语法检查变得尤为重要。因此对 Javascript 进行语法检查的工具应运而生,目前 ESLint 使用最为广泛。这篇将讲解如何将 ESLint 集成到我们的项目中。

vue中关于eslint,以及如何在vue项目中关闭或使用ESLint

ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具,使用它可以避免低级错误和统一代码的风格。 由于每个人写代码的习惯都会有所不同,所以统一代码风格在团队协作中尤为重要。 这篇文章主要讲解如何在vue项目中关闭或使用ESLint

什么是ESLint?

官网上告诉我们,ESLint 是一个用来识别 ECMAScript/JavaScript 并且按照规则给出报告的代码检测工具,哦,所以我们可以知道,ESLint 就是一个工具,而且是一个用来检查代码的工具。代码检查是一种静态的分析,常用于寻找有问题的模式或者代码

项目常用eslint配置(Vue/React/TypeScript)

Vue项目常用eslint配置需要安装依赖(Vue这里使用standard扩展和vue插件,所以需要安装);React项目常用eslint配置同样安装依赖,React这里使用的airbnb扩展。安装eslint-import-resolver-webpack用来解决webpack中设置的别名eslint无法识别报错的问题。

Eslint规则_ESLint常见命令

详解 ESLint 规则,规范你的代码,ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误。

vue开发之代码规范eslint

ESLint不管是多人合作还是个人项目,代码规范都是很重要的。这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。

ESLint_JS代码检查工具

ESLint是一个JavaScript代码静态检查工具,可以检查JavaScript的语法错误,提示潜在的bug,可以有效提高代码质量,维持前端团队高度一致的编码风格。ESLint不但提供一些默认的规则,也提供用户自定义规则来约束所写的JavaScript代码。本文将详细介绍ESLint

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广