关于项目中ESLint的集成

小猪欧巴哟
2,221 阅读5分钟

前言

  • 在团队协作中，为了产出风格统一的代码，会预先制定编码规范。 使用Lint工具和代码风格检测工具，可以辅助编码规范执行，有效地控制代码质量以及避免低级的Bug。

ESLint是什么

  • 语法规则和代码风格的检查工具

ESLint带来的好处

  • 统一代码风格
  • 减少review成本和低级错误的出现
  • 支持插件扩展、自定义规则

ESLint的使用

** 假设你已经安装了命令行工具 **

  • 本地安装
npm install eslint --save-dev

  • 方式1：自行生成配置文件

    • 官方提供生成配置文件的方式
      在根目录执行 eslint --init，，接下来有好多选项供你选择，至于选择什么视具体情况而定。选择完后会生成eslintrc文件。选项如图所示：

    这里边包含了常用的规则，更具体的参考文档自行配置，点击前往

  • 方式2：项目(Vue)中快速上手（推荐）

    1. 安装ESLint基本的依赖
      • 先看图（以vue项目为例）： 
    安装上述依赖，执行 npm i eslint eslint-config-standard eslint-friendly-formatter eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard --save-dev
（这些都是eslint-config-standard这个npm包里推荐我们去安装的，因为它的校验规则要依赖于这些plugins进行去验证的）
命令仅供参考~
    1. 安装预处理依赖 如果你希望在项目开发过程中，每次修改代码就能自动进行ESLint的检查，那么你需要安装【eslint-loader】，这样做的好处是
      • 快速发现问题并定位问题
      • 迅速修复
      • 养成规范写代码的习惯
          要达到上述效果，你需要做：
    npm install eslint-loader babel-eslint --save-dev
    
    extra： 为什么需要配置parser？
    因为项目是基于webpack的，项目里的代码需要经过babel去处理。
    babel处理这种语法可能对ESLint不是特别的支持，然后我们使用loader处理ESLint的时候就会出现一些问题。所以一般来说，我们用webpack和babel来进行开发的项目，都会指定它的parser使用babel-eslint。
    2. 执行完上边步骤后，我们在build目录下找到webpack.config.base.js,在module下面的rules里添加一个对象。
    rules: [
    {
          test: /\.(js|vue)$/,
          loader: "eslint-loader",
          enforce: "pre",
          include: [resolve('src'), resolve('test'),
          options: {
            formatter: require("eslint-friendly-formatter")
          }
    }
    ...
]
extra: enforce: 'pre', 为预处理。在vue-loader处理.vue文件之前，先让eslint-loader进行一次代码检查。检查如果过不了，就不需要vue-loader处理了，直接抛错。。

    贴上目前项目中的代码块：

    此时的你会想 【config.dev.useEslint】从哪里来，它位于config → index.js

    如果不想使用ESLint，关掉即可。

    • 这样做的好处是更加灵活，可以根据自己的意愿选择开启或关掉。
    • 如果你要写formatter，那么你需要安装【eslint-friendly-formatter】 它的作用是-可以让eslint的错误信息出现在终端上
    1. 在项目的根目录手动创建【.eslintrc.js】
      • 在Vue项目中，.vue文件写的是类似于html的格式，不是标准的JavaScript文件，ESLint是无法直接识别.vue文件里的JavaScript代码的
      • 所以我们需要安装一个工具【npm i eslint-plugin-vue --save-dev】（推荐）或 【 npm i eslint-plugin-html --save-dev】
      • 因为在Vue文件里面写JavaScript代码也是在script标签里写的，这个插件的作用就是识别一个文件里面script标签里面的代码，官方也是这么推荐的
    输入以下配置内容
module.exports = {
    1. // 自定义配置。可参考http://eslint.cn/docs/user-guide/configuring
    2. // 可快速使用的配置【ESLint的配置方式】的第一条
}
    • 可在项目中直接使用的配置，参考下边【ESLint的配置方式】的第一条，可直接使用。若想配置其他的，请点击这里
  1. 新增文件【.eslintignore 用来配置不需要检查的文件】
/build/
/config/
/dist/
/*.js
  • 现在你可以愉快的使用ESLint检测项目代码了。

ESLint的配置方式

可以通过三种方式配置ESlint：

  • 使用【.eslintrc】 文件，最常见。例如 .eslintrc.js

    • 注意：放到项目根目录，则应用到整个项目。 如果子目录中也有该文件，则会忽略根目录的配置文件，应用该目录的配置文件。
    // https://eslint.org/docs/user-guide/configuring

{
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
  },
  extends: [
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/essential',
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    'standard'
  ],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  // add your custom rules here
  rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

  • 在 【package.json】中添加配置块

 "eslintConfig":{
      "name": "mypackage",
      "version": "0.0.1",
      "eslintConfig": {
        "env": {
          "browser": true,
          "node": true
        }
      }
    }
  • 直接在代码中定义
    • 注意：代码文件内的配置会覆盖配置文件里的规则
    禁用ESLint
/* eslint-disable */
let obj = { key: 'value', }
/* eslint-enable */

ESLint检测代码规范性的方式

  • 你可以使用一条命令去检测本项目中所以不符合eslint规范的文件
  • 具体方法如下：
    • 打开package.json文件
    在【scripts】里添加一行
"scripts": {
  "lint": "eslint --ext .js,.vue src",
}
对应的指令表示用 eslint 检查 src 目录下扩展名为 js 和 vue 的文件。
    • 打开webstorm，打开Setting窗口
    • 在Setting → Editor → Code Style → HTML → Other → “Do not indent children of:” 中添加 script，并保存。因为webstorm 的缩进规则和 eslint-vue 是冲突的。
    • 执行 npm run lint
    • 此时的你会看到所以不符合eslint规范的文件

ESLint提供的自动修复

  • Eslint 提供自动修复基础错误的功能。
    以下几种情况不能自动修复（举常见）需手动修改
    • 变量【a】定义了，但是从未使用
    • 判断使用【==】，应使用【===】
    • 变量重名
    • 表达式写成赋值
  • 操作步骤
    • 打开package.json文件
    在【scripts】里添加一行
"scripts": {
    "lint-fix": "eslint --fix --ext .js,.vue src"
}
lint-fix 对应的指令表示直接修复 eslint 的检查错误。
    • 执行 npm run lint-fix

编辑器集成ESLint

  • 假设全局安装了ESLint或项目中依赖添加了ESLint
  • 以Webstorm为例，在File → settings → Languages & Frameworks → JavaScript → Code Quality Tools → ESLint
    如果设置不了，请检查eslint版本。
  • 接下来如果在开发工程中你的代码不符合规范，编辑器就会报红，你就可以及时修正了~
avatar
文章
阅读
粉丝