[JavaScript知识库]09-ESLint配置

Vite2+Vue3+TypeScript+Element-plus脚手架搭建系列

?01-创建项目???????02-环境变量???????03-Vite配置???????04-引入scss???????05-路由初试???????06-TS配置???????07-axios初试???????08-axios封装???????09-ESLint配置

源码地址：GitHub / 码云

ESLint配置

🎯 目标

配置并启用 ESLint 。

😴 功课

ESLint 是个什么东西？该怎么用？配置项是什么意思？我相信很多同学有这些疑问，so am I。

这次我不想随便找个粘贴过来完事，尽管这可能并不影响我们项目的运行，但这不是学习时该有的态度。所以带着这几个疑问一起来做下功课吧。

先贴上 官方文档 ，它永远是最好的学习资料。

ESLint什么是

ESLint 是适用于 ECMAScript/JavaScript 中的插件化代码检测工具，它的目标是保证代码的一致性和避免错误。

ESLint怎么用

怎么读取配置

使用 JavaScript、JSON 或者 YAML 文件为整个目录和它的子目录指定配置信息。可以配置一个的 .eslintrc.* 文件，或者直接在 package.json 文件里的 eslintConfig 字段指定配置，ESLint 会查找并读取配置。

ESLint 支持几种格式的配置文件（按优先级顺序排列）：

• .eslintrc.js
• .eslintrc.yaml
• .eslintrc.yml
• .eslintrc.json
• .eslintrc
• package.json

默认情况下，ESLint 会在所有目录里寻找配置文件，一直到根目录。

怎么忽略被检测文件

你可以通过在项目根目录创建一个 .eslintignore 文件告诉 ESLint 去忽略特定的文件和目录。.eslintignore 文件是一个纯文本文件，其中的每一行表示一个配置，表明哪些路径应该忽略检测。

.eslintignore 配置规则如下：

• 以 # 开头的行被当作注释。
• 路径是相对于 .eslintignore 的位置。
• 忽略模式同Git的 .gitignore 规范 。

怎么在 VS Code 启用

1. 在 VS Code 安装 ESLint 和 Vetur（vue项目） 扩展。

2. 在 VS Code 中按 F1，输入 open settings json 打开首选项配置。输入或添加以下配置：

   "editor.codeActionsOnSave": {
   	"source.fixAll": true,
   }
   

3. 保存文件时将自动修复代码。

也可以使用 ESLint 命令行的方式来启用，参见 官方命令行文档

配置项说明

• root：为 true 时，ESLint 会停止再向父级目录中寻找配置文件。
• env：环境变量，可以定义多个，一个环境提供一组预定义的全局变量。
• extends：扩展配置，可以继承另一个配置文件（包括规则、插件、语言选项）。
• globals：全局变量，一般很少用，用之前确定自己在干什么。
• parser：解析器，ESLint 默认使用 Espree 作为其解析器。
• parserOptions：解析器选项，默认支持 ECMAScript 5 语法。可以配置成其它 ECMAScript 版本和启动对 JSX 的支持。
• plugins：第三方插件，提供一套基础规则，然后使用 extends 属性来继承某个规则集。
• rules：规则，可修改已有规则。
• overrides：指定某些文件覆盖已配置的规则。
• settings：提供共享配置。

🍸 准备

安装依赖

npm install -D eslint eslint-plugin-vue @vue/eslint-config-typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

💡 我们用到的是前面三个，后面两个是前面三个的依赖。

创建 ESLint 文件

在 src 目录下创建 .eslintrc.js 和 .eslintignore 文件。

🌈 Coding

ESLint 配置

.eslintrc.js 代码如下：

module.exports = {
  // ↓环境变量
  env: {
    // ↓启用浏览器全局变量
    browser: true,
    // ↓启用ES2020的功能
    es2020: true,
    // ↓启用Node.js全局变量
    node: true
  },
  // ↓扩展配置
  extends: [
    // ↓ESLint的内置基本规则集
    "eslint:recommended",
    // ↓Vue规则集，尚不支持Vue3 CSS变量注入功能
    "plugin:vue/vue3-recommended",
    // ↓Vue-TypeScript规则集
    "@vue/typescript/recommended",
  ],
  // ↓解析器选项
  parserOptions: {
    // ↓ECMAScript 版本：默认 ECMAScript 5
    ecmaVersion: 11,
    // ↓源码类型：如果你的代码在 ECMAScript 模块中,设置为 "module"。默认为 "script"
    sourceType: "module",
  },
}

ESLint 被忽略文件配置

.eslintignore 代码如下：

*.sh
node_modules
*.md
*.woff
*.ttf
*.svg
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
Dockerfile

🎭 结果

打开 Axios.vue ，“get请求” 和 “post请求” 两个按钮出现黄色下划线警告。Ctrl + s 保存文件时自动修复。

本文为博主原创文章，任何个人、团体、机构转载和摘录，请注明出处。