【vue-进阶】什么?公司竟不让我提交代码!!!(记一次 Vue2.0 项目配置 ESLint)

协同开发过程中,不同的编码习惯写出的代码,差异很大。日常维护代码或者修复bug的时候时候,看各种风格的代码,影响效率不说,还有可能改出低级问题。目前我们的项目还没有代码规范,我决定要做点改变,于是考虑使用 ESlint 来做代码规范检查。

考察了ESlint的官方网站和一些技术贴,决定先给我们其中的一个 Vue2.0 项目配置 ESLint。在配置 ESLint 过程中走了一些弯路,把配置过程记录下来,方便日后查看。

预测获得的收益:

  • 项目编码风格统一,师出一人;
  • 开发过程中修复语法错误,减少潜在 bug
  • 规定规范编码,减少代码冗余,提高代码质量;

预期风险:

担心整个项目添加了 ESLint,其他同事冒火,因为是多页面应用,提供配置方法,自行配置、修复不规范报错和警告。

配置ESLint

咳咳,配置流程来了。

1. 安装 eslint

既然要用 ESLint ,就要安装它,通过命令: cnpm I eslint -D 安装。

2. 初始配置 eslint

eslint 安装好之后,运行 eslint —init命令做些简单配置,我们可以选择我们需要的检测的环境、文件类型等等。这步完成,在项目根目录下会生成一个 eslintrc.js 文件。

3. 安装 eslint-loader

我们的项目需要webpack来编译,需要对应的loader,安装 eslint-loader,运行命令 cnpm I eslint-loader -D

4. 配置 webpack

打开 webpackconfig 配置文件配置:

obj.module = {
    rules: [
        // ...
        { 
            test: /\.(js|vue)$/,
            loader: 'eslint-loader',
            enforce: 'pre',
            include: [ path.resolve(commonDir, '../index.js'), resolve('./pages'), resolve('./components')], // 
            options: {
                formatter: require('eslint-friendly-formatter')
            }
        }
    ]
};

5. 安装 eslint-friendly-formatter

eslint-friendly-formatter 这个模块是为了方便本地规范检查代码。记得运行 cnpm i eslint-friendly-formatter -D 安装上。

6. 安装 babel-eslint

操作到这里关于 eslint 的基本配置就完成了,把项目跑起来,咿竟然有 parset 的报错,说最新的eslint解析有问题。查询资料是说需要 babel-eslint,按依赖安装的方式安装上。

7. 安装 eslint-plugin-vue

Vue官方eslint推荐 eslint-plugin-vue ,再把这个插件安装上。
最终的 .eslintrc.js:

module.exports = {
    "root": true,
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "parser": 'babel-eslint',
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
};

配置参数:

  • root 为true根配置文件,否则会按照目录树向上搜索
  • env 执行环境
  • extends 对基础配置进行扩展,可以配置共享配置包 eslint-config-airbnb等。配置包需要安装。
  • globals 指定全局变量,无视 no-undef 规则
  • parserOptions 语法解析器选项
  • plugins 插件 ,插件命名规范是 eslint-plugin- 为前缀
  • rules 校验规则

8. 配置小结

  • 需要安装的依赖有
cnpm eslint eslint-loader eslint-friendly-formatter babel-eslint  eslint-plugin-vue  -D
  • webpack 配置
  • .eslintrc.js 配置

配置完事,项目跑起来一堆的报错,来来来,💃开始自我折磨吧。经历磨练才能写出更优雅更规范的代码。看着页面不多,花了几个小时来处理 ESLint 的警告和报错。😓

配置问题

Use the latest vue-eslint-parser

解决办法:把 "parser": "babel-eslint", 移入到 parserOptions 内。

- "parser": "babel-eslint",
+ "parser": "vue-eslint-parser",
  "parserOptions": {
+     "parser": "babel-eslint",
      "sourceType": "module"
  }

有人说问题的原因是:babel-eslinteslint-plugin-vue有冲突,真实情况呢,咱也不敢说,咱也不敢问。

疑问

这次配置ESLint,留下了一些疑惑,得空扒源码吧。

  • eslint 是如何检查代码的
  • eslint-loader 干了啥
  • eslint-friendly-formatter 用途和实现原理
  • babel-eslint 为什么需要它,实现原理
  • eslint-plugin-vue 专门对Vue项目检查,内部实现

https://juejin.im/post/5e15af4ef265da5d12565241

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论