为了账号安全,请及时绑定邮箱和手机立即绑定

前端开发 eslint 使用

标签:
JavaScript

eslint 是代码规范检查工具,可以辅助开发人员规范代码风格

安装

mpn i eslint -D

在根目录创建 .eslintrc.js 文件用来配置 eslint的文件js的文件不同于json需要

module.exports = {}

注意: eslint查找自己配置文件的优先级如下

  1. .eslintrc.js
  2. .eslintrc.yaml
  3. .eslintrc.yml
  4. .eslintrc.json
  5. .eslintrc
  6. package.json

如果项目中存在多个配置文件则 eslint 先检同级下的 配置文件然后在找别的,选择原则就是就近原则。

*例如:*如果在你的主目录下有一个自定义的配置文件 (~/.eslintrc) ,如果没有其它配置文件时它才会被使用。

开始使用 npm命令启动

首先我不推荐把 eslint 配置到 webpack中,尤其是在 dev 开发模式下使用,虽然执行 webpack就会给我们规范,以及在保存时候自动格式化,但是这样无疑浪费系统性能。所以首先介绍一种推荐模式。

在项目根目录配置文件中增加下面这一条:

//package.json 项目根目录
{ 
    "scripts":{
        "lint": "eslint --fix --ext  .ts,.vue src"
    }
}

–fix 是自动修复功能 --ext 是用来传后面的配置 .ts,.vue src 意思是对 src 下面的 .ts,.vue当我们执行 npm run lint 时候 系统会直接使用我们根目录下的 .eslintrc.js 对当前的目录下的文件进行检查和提示。
这时候我们执行 lint 控制台就会把有问题的代码呈现给我们,同时 eslint 提供了一个格式化配置,可以把有问题的代码按照我们想要的样子给我们具体配置如下

//package.json 项目根目录
{ 
    "scripts":{
        "lint": "eslint --format codeframe --fix --ext  .ts,.vue src"
    }
}

–format 后面可以跟下面的值

  • checkstyle
  • codeframe
  • compact
  • html
  • jslint-xml
  • json-with-metadata
  • json
  • junit
  • stylish
  • table
  • tap
  • unix
  • visualstudio

不同的配置会有不同的结果样式,具体大家可以自己试试

配置说明

在开始详细介绍前我把我项目中的配置发到了下面,并删除了很多个性化的配置只留下了比较常用的场景,和不同的配置风格,方便大家理解并自行扩展。

module.exports = {
  "root": true,
  "extends": "eslint:recommended",
  "env": {
    "browser": true,
    "es6": true
  },
  "parserOptions": {
    "ecmaVersion": 7,
    "sourceType": "module",
    "parser": "@typescript-eslint/parser",
    "ecmaFeatures": {
      "legacyDecorators": true
    }
  },
  "parser":  "vue-eslint-parser",
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": [ 1, {
        "printWidth": 80,
        "tabWidth": 4,
        "useTabs": false,
      "singleQuote": false,
        "semi": true,
        "trailingComma": "none",
        "bracketSpacing": true,
    }],
    "no-debugger":[1],
    "arrow-spacing": [
        1,
        {
            "before": true,
            "after": true
        }
    ],
    "no-dupe-args":[1]
  }
}
  1. root默认情况下,ESLint将在所有父文件夹中查找根目录中的配置文件。如果您希望所有项目都遵循特定惯例,但有时会导致意想不到的结果,这会非常有用。要将ESLint限制为特定项目,请将其"root": true放在文件的eslintConfig字段内package.json或.eslintrc.*项目根目录下的文件中。一旦找到配置,ESLint将停止在父文件夹中查找"root": true。
module.exports = {
    "root": true
}
  1. extends 属性我们在很多场景下都会见到,意思就是扩展。但是在 eslint 中它还有别的用途,
module.exports = {
    "extends": "eslint:recommended" || "eslint:all",
}

"eslint:all" 用于启用当前安装的ESLint版本中的所有核心规则。核心规则集可以在任何次要或主要版本的ESLint中更改。
注意: 不建议将此配置用于生产用途,因为它随ESLint的每个次要版本和主要版本而变化。使用风险自负。
所以推荐使用 "eslint:recommended"

  1. env ESlint 可以让我们选择支持的 js 语言,我这个项目是浏览器项目,同时使用了很多新的特性,所以我的配置是
module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
}

"es6": true 会启动 es6 语法规则检测,这时候就需要 parserOptions 进行详细的配置

module.exports = {
    "parserOptions": {
        "ecmaVersion": 7,
        "sourceType": "module",
        "parser": "@typescript-eslint/parser",
        "ecmaFeatures": {
        "legacyDecorators": true
        }
    },
    "parser":  "vue-eslint-parser",
}

ecmaVersion - 设置为3,5(默认),6,7或8以指定要使用的ECMAScript语法的版本。您也可以设置为2015年(与6)相同,2016年(与7相同)或2017(与8相同)使用年份命名。

sourceType- 设置为"script"(默认)或者"module"您的代码位于ECMAScript模块中。

parser 解析器,例如我的项目是 vue+ts版 我用的就是 @typescript-eslint/parser 如果是普通的可以写成 babel-eslint

而在外面还有一个 parser 我的项目是vue1项目于是选择解析器 "vue-eslint-parser"

注意:npm 下载这些解析器的时候要匹配好相应的 eslint 版本。

  1. 在 eslint 中使用插件 例如 prettier

我们只要下载好插件 然后在 rules 里面配置好就可以用了,具体配置如下

module.exports = {
    "plugins": ["prettier"],
    "rules": {
    "prettier/prettier": ["error", {
        "printWidth": 80,
        "tabWidth": 4,
        "useTabs": false,
        "singleQuote": false,
        "semi": true,
        "trailingComma": "none",
        "bracketSpacing": true
    }]
}
  1. rules配置规则。

这个配置方案挺简单,规则比较简单 例如:

    "no-debugger":[1],
    "arrow-spacing": [
        'error',
        {
            "before": true,
            "after": true
        }
    ],

elint 所有的 rules 配置都是一样的 ,它接收一个数组对象 ary

ary[0] 代表规则级别,可以理解为规则的严重程度,具体如下:

"off"或者0- 关闭规则
"warn"或者1- 将规则打开为警告(不影响退出代码)
"error"或者2- 将规则打开为错误(触发时退出代码为1)
可以是 string 也可以是 number

ary[1] 配置该规则的具体描述,每个规则都有独特的描述如果不清楚就不要配置了。

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消