Vite+Vue3+Ts配置ESllint_vite+vue3+ts 配置eslint

前言

        TypeScript 引入了静态类型检查，可以帮助企业在编码阶段就发现潜在的问题，提高代码的质量和可维护性。ESLint 则可以帮助团队保持一致的代码风格，减少代码维护成本。例如：在大型团队中，采用 TypeScript 和 ESLint 可以帮助团队成员更好地协作。静态类型检查可以减少代码集成时的冲突，ESLint 则可以确保代码风格的一致性，减少不必要的代码审查时间。

一、ESlint和TS？

        ESLint 是一个静态代码分析工具，它能够帮助开发者在编写代码时遵循一定的编码规范，比如命名一致性、代码格式、潜在的语法错误等，从而提高代码的可读性和一致性。同时，它也可以在代码保存时即时检查错误和潜在问题，节省了在运行阶段才发现错误的时间。
而TypeScript 是 JavaScript 的超集，它引入了静态类型检查，这有助于减少运行时错误，提高代码的健壮性。通过声明变量类型、函数参数和返回类型，编译器可以在编译阶段捕获潜在的类型错误。不仅如此，TypeScript 支持更严格的面向对象编程和模块系统，使得大型项目更容易组织和管理。

        引入TS和ESlint为了进一步提升代码质量，同时保持代码风格的一致性和可维护性。

二、使用步骤

1.创建项目

略

2.安装相关配置

在终端中输入

yarn add eslint eslint-plugin-vue eslint-config-airbnb-base eslint-plugin-import @typescript-eslint/parser eslint-import-resolver-typescript 
//or
npm install eslint eslint-plugin-vue eslint-config-airbnb-base eslint-plugin-import @typescript-eslint/parser eslint-import-resolver-typescript
/**
*eslint-config-airbnb-base 为js提供了标准的规则集。(可以不要)
*eslint-plugin-import 一个用于检查代码中导入的模块的规则
*@typescript-eslint/parser 安装 TypeScript 版本的 ESLint 解析器，允许 ESLint 支持 TypeScript 代码。
*eslint-import-resolver-typescript：安装一个 TypeScript 兼容的导入解析器.
*/
1
2
3
4
5
6
7
8
9

3.更改配置文件

        删除原有配置文件，在根目录下增加配置文件.eslintrc.cjs，并添加如下内容:

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/typescript/recommended",
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
    //off（或者0） 忽略
    //warn （或者1）警告
    //error （或者2）报错
    // eslint（https://eslint.bootcss.com/docs/rules/）
    'no-var': 'error', // 不能使用var
    "no-irregular-whitespace": ["off"], 
    "no-unused-vars": "warn", // 警告定义未使用的变量
    'no-multiple-empty-lines': ['warn', { max: 1 }], // 不允许多个空行
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',//根据环境禁用debug和console
    'no-unexpected-multiline': 'error', // 禁止空余的多行
    'no-useless-escape': 'off', // 禁止不必要的转义字符
    // typeScript (https://typescript-eslint.io/rules)
    '@typescript-eslint/strict-boolean-expressions': 1,
    '@typescript-eslint/no-empty-function': 1,
    '@typescript-eslint/dot-notation': 2,
    '@typescript-eslint/array-type': 1,
    '@typescript-eslint/no-unused-vars': 1, // 禁止定义未使用的变量
    '@typescript-eslint/prefer-nullish-coalescing': 0,
    '@typescript-eslint/prefer-ts-expect-error': 0, //警告 @ts-ignore
    '@typescript-eslint/no-explicit-any': 1, // 禁止使用 any 类型
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/no-namespace': 'off', // 允许使用自定义 TypeScript 模块和命名空间。
    '@typescript-eslint/semi': 2,
    // eslint-plugin-vue (https://eslint.vuejs.org/rules/)
    'vue/multi-word-component-names': 'off', // 不要求组件名称始终为 “-” 链接的单词
    'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的变量<template>被标记为未使用
    'vue/no-mutating-props': 'off', // 不允许组件 prop的改变
    'vue/attribute-hyphenation': 'off' // 对模板中的自定义组件强制执行属性命名样式
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

        配置完成后，在webstrom或者vscode里下载ESlint插件，在每次更改相关配置文件就重启ESlint就完成了。