项目工程化中ESLint的使用

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情

一次 vue-cli3 创建项目并启动后发生了报错问题，看控制台输出的 problems 数量真是把人吓一跳：

遇到这种问题不要慌，仔细看看原来是严格开发模式下语法检查的问题，Eslint 抛出了错误提示。这么多的报错每个文件修改一遍显然工作量太大，想快速解决这个问题，还是要从 eslint 的配置着手修改。

ESLint

ESLint 在官方的介绍中是：组装的JavaScript和JSX检查工具。它是前端的一种规范和约束，也是自动格式化代码的一种方式，便于我们控制代码的质量。

在项目中可以手动创建，也可以在创建项目的时候执行相关指令自动添加。

安装：

npm i eslint -D

Eslint 安装成功后，在项目根目录下执行以下指令，进行 Eslint 配置：

npx eslint --init

选择完成后，会自动生成配置文件。

注意：如果同一个目录下有多个配置文件，最终只会使用一个。优先级如下：

配置及使用：

在项目中会生成一个公共文件 eslintrc.js，在这个文件中配置代码规范的各个属性。

配置文件结构如下：

• root // 前配置文件不能往父级查找
• parser // 指定eslint解析器
• env // 定环境的全局变量
• rules // 配置代码规范，主要是这部分
• ......

完整配置可参考：eslint中文文档

报错问题的解决方案

对于本文一开始的问题，有如下的解决方案：

1. 关闭Eslint语法规范（关闭严格模式）

   操作：在eslintrc.js文件中去掉’@vue/standard’，重启项目。

   注：如果文件中没有 @vue/standard 这一项可以接着向进行操作：

2. eslintrc.js文件中修改 prettier/prettier 字段

'prettier/prettier': 'off'

3. package.json 文件中注释 lint 选项

// "lint": "vue-cli-service lint"