【原创】Eslint 基础

官网

https://zh-hans.eslint.org/

作用

Eslint 是一个语法检查的工具包，它用于检查 JavaScript 的语法。

为什么使用 Eslint

• 统一团队编码规范
• 统一语法
• 减少 git 不必要的提交（如果文件格式不一样，也会被 git 提交）
• 避免低级错误
• 在编译时检查语法，而不是等 JS 运行时再检查

安装

Vue 脚手架创建项目会自动安装配置好 Eslint

vue create 创建项目时选择 eslint。

手动下载配置

• 初始化项目
  npm init -y

• 通过 npm 或 yarn 进行全局安装或项目安装
  npm i eslint -D
  

显示错误提示

代码编辑过程中产生错误提示

这个是安装 Eslint 插件产生的效果。

编译时（运行 yarn build）报错

Eslint 产生的效果。

Eslint 配置文件

Eslint 可以创建独立的配置文件 .eslintrc.js，也可以在 package.json 中配置。

eslint 加载优先级是 js 文件> yaml > json，所以一般都选择 js 文件作为配置文件。

创建 eslint 配置文件

• 完整脚本路径 ./node_modules/.bin/eslint --init
• 使用 npx eslint --init 命令创建
  

JS 使用模式

推荐使用 CommonJS，因为开发时一般使用 Vue 脚手架，内部 Webpack 打包默认使用的就是 CommonJS，所以 Eslint 配置文件尽量与其保持一致。

使用

使用 eslint 命令检查语法

npx eslint 文件名
例如 npx eslint ./src/index.js
如果有错误，就会将错误信息输出到控制台。