前端面试必备eslint篇

32次阅读

共计 3929 个字符，预计需要花费 10 分钟才能阅读完成。

引言

多人共同开发一个项目，如果没有统一代码风格，其他人的代码在你的 IDE 就会是一片红，更可怕的是你不小心格式化了代码，格式化的记录也会被加入到 git 记录中，极不利于协作开发。因此我认为对于多人项目，应该在一开始的时候就开启 eslint 强检测，然后配合 git 钩子，保证提交代码的风格统一！
由于我们团队直接用的 vue-cli3 搭建的项目，我会以 vue-cli3 为例说一下整体配置流程。
文章上半部分主要介绍 eslint, 下半部分开始介绍 eslint 各类继承，包括与 webpack 集成，git 集成，vue-cli 集成等等。

eslint 简介

1. 是什么

eslint 目标是提供一个插件化的 javascript 代码检测工具。

2. 为什么

avaScript 是一个动态的弱类型语言，在开发中比较容易出错。因为没有编译程序，为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。像 ESLint 这样的可以让程序员在编码的过程中发现问题而不是在执行的过程中。

3. 初始化

// 安装模块
npm install eslint --save-dev

安装模块后需要设置 lint 规则

可以配置一个独立的 .eslintrc.* 文件，或者直接在 package.json 文件里的 eslintConfig 字段指定配置，ESLint 会查找和自动读取它们，再者，你可以在命令行运行时指定一个任意的配置文件。

这里我们可以输入 init 命令，再选择选择相关配置项后自动生成配置文件

// 选择若干条件，生成.eslintrc.js 文件
./node_modules/.bin/eslint --init

当然我们可以直接新建一个.eslintrc 文件，然后手写配置项

4. 启动

如果只是在项目里安装了 eslint（本地安装）

$ ./node_modules/.bin/eslint yourfile.js

./node_modules/.bin/ 目录里面放置了整个项目可执行的二进制文件
如果是全局安装了 eslint，我们可以直接

$ eslint yourfile.js

我本来以为执行文件应该在～/node_modules/.bin/eslint 里，不过很遗憾没找到，不过...

fyy:node_modules fyy$ which eslint
/Users/fengyangyang/.nvm/versions/node/v12.4.0/bin/eslint
fyy:node_modules fyy$ cd /Users/fengyangyang/.nvm/versions/node/v12.4.0/bin
fyy:bin fyy$ ls
eslint   node     nodemon  npm      npx      nrm      vue      vue-init vue-list

原来在 node 模块的 bin 文件里面，同时像其他 node 全局命令也在里面 比如 vue-init

核心配置

这里也按官网的模块分为两类，配置和命令行参数，只讲我认为重要的，详情希望大家能看官网 eslint

1. 配置文件配置设置

之前我们说过执行 ./node_modules/.bin/eslint --init会让你选择配置项，我们这里具体列出来

>? How would you like to use ESLint? To check syntax, find problems, and enforce code style
>? What type of modules does your project use? JavaScript modules (import/export)
>? Which framework does your project use? Vue.js
>? Does your project use TypeScript? No
>? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert selection)Browser
>? How would you like to define a style for your project? Use a popular style guide
?? Which style guide do you want to follow? Airbnb (https://github.com/airbnb/javascript)
>? What format do you want your config file to be in? JavaScript

相信有一定英语基本的同学肯定能看懂上面是配置什么的，然后 eslint 会自动生成一个配置文件.eslintrc.js。我们不妨看一下

module.exports = {
  env: { // 一个环境定义了一组预定义的全局变量
    browser: true,
    es6: true,
  },
  extends: [ // 继承一种或者多种规则 这里是刚选择的 airbnb 还有我们的 vue 里面的相关规则
    'plugin:vue/essential',
    'airbnb-base',
    // 也可以用标准规则  '@vue/standard'
  ],
  globals: { // 没卵用
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parserOptions: { 
  // 解析规则：ESLint 允许你指定你想要支持的 JavaScript 语言选项。默认情况下，ESLint 支持 ECMAScript 5 语法。你可以覆盖该设置，以启用对 ECMAScript 其它版本和 JSX 的支持。// 这里我一般用  parser: 'babel-eslint'
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  plugins: [ // 在 vue 里面用的插件，省略了 eslint-plugin- 前缀。'vue',
  ],
  rules: { // 最关键的，相关规则制定
  'no-mixed-operators': 'off'，'eqeqeq': 'warn',
  }
};

聪明的你估计一眼就可以看出，生成的配置和我们选择的配置完全是息息相关的。
这里只讲两个配置，其他的看文档

  • extends：规则继承

    • eslint:all：全体规则
    • airbnb-base：airbnb 的规则（需要安装）
    • eslint:recommended：推荐规则，也就是最最基本的规则

  • rules：详细某条规则配置

    • “off” 或 0 – 关闭规则
    • “warn” 或 1 – 开启规则，使用警告级别的错误：warn (不会导致程序退出)
    • “error” 或 2 – 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

2. 命令行设置

命令行参数也可以分为好多类，具体可以用 eslint - h 查看

  • Basic configuration:
    –ext: 指明检测文件扩展名，默认.js 像我们写 vue 肯定会这么写 –ext: .js .vue .jsx
  • Fixing problems:
    –fix: 自动修复能修复的，然后显示未能修复的。
    怎么理解 能修复的呢 ？官网这么说的 This option has no effect on code that uses a processor，也就是使用处理器代码不能修复
    比如缩进能修复，== 转 === 不能自动修复
  • handle warnings
    –quiet: 只显示 error

工程化

我觉得 eslint 工程化首先要解决的问题就是 lint 的范围。还有文档有指出

eslint [options] [file|dir|glob]*

eslint 每次可以指定一个范围进行批量检测
同时我们可以生成.eslintignore 来指定不检测的文件

/dist/        // 不检测 dist 目录

1. 与 npm script 结合

假设全局安装了 eslint, 那我们可以集合 npm script 来设置 eslint 命令

"scripts": {"lint": "eslint --ext .js .vue .jsx src", // 对 src 里面的 js,vue，jsx 文件进行检测}

2. 与 webpack 结合（gulp 类似）

这里我们需要使用 eslint-loader, 在 webpack 里面进行配置
这里需要注意的点还是范围问题，由于没有命令行参数，怎么设置 lint 的范围呢，其实这里不是通过 lint 参数设置的，而是通过 webpack rule 参数设置的

module.exports = {
  // ...
  module: {
    rules: [
      {test: /\.(js|vue|jsx)$/,
        exclude: /node_modules/,   // 作用类似.eslintignore
        include: [resolve('src'), resolve('test')],   // 指定执行 eslint-loader 的目录
        loader: 'eslint-loader',
        options: {// eslint options (if necessary)
        },
      },
    ],
  },
  // ...
};

这里顺序应该是先 webpack 筛选出文件，在给 eslint-loader. 所以，应该 exclude 肯定是在.eslintignore 文件之前生效！

3. 在 vue-cli 里面使用 git 钩子添加 eslint

先写个配置，后面有时间再写篇文章详细说一下
在每次提交的时候会先对 提交的文件 进行 eslint，不通过则提交不成功

"script":{
"pre-commit": "lint-staged",
  "lint-staged": {
    "*.js": [
      "npm run lint",
      "git add"
    ],
    "*.vue": [
      "npm run lint",
      "git add"
    ]
  },}

总结

本文对 eslint 产生的原因，配置，使用以及工程化做了详细的介绍，希望给大家带来帮助。
由于篇幅原因，估计会在下一篇中会详细介绍下 git 钩子，以及 vue-cli 设置 git 钩子，eslint 的一些坑。敬请期待！

正文完
eslint vue.js 前端工程化
发表至：无分类
2019-10-24
 0