二、为uniapp项目配置基于airbnb风格的Eslint代码检查规则

上一节我们一起创建了基于Vue3 + TS + Vite的uniapp项目并配置了自动导入，接下来让我们一起来为项目配置基于基于airbnb规范的Eslint代码检查规则。

1、为什么要为项目配置Eslint
Eslint 可以约束团队的代码风格统一，有过协同开发的小伙伴们应该深有体会，团队中开发者代码风格迥异，有时甚至可以称作 “五彩缤纷”，我用小驼峰，你用下划线，他用大驼峰，更有甚者，拼音、拼音简写、拼音加英语单词，简直不堪入目、不知所云；你负责的功能模块开发到一半，我来接手，于是代码中有了我的风格，下次他再接手，又有了他的风格，最终的结果，项目完美的变成了一座屎山。有了Eslint，规定了代码风格，代码质量有保障！

2、初始化 Eslint 配置
本次配置主要使用到下列依赖模块，但无需我们一个个手动安装：

"@typescript-eslint/eslint-plugin": "^5.30.7",
"@typescript-eslint/parser": "^5.30.7",
"eslint": "^8.2.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-plugin-import": "^2.25.2",
"eslint-plugin-vue": "^9.2.0",

我们使用 @eslint/config 来初始化 Eslint 配置，在项目根目录打开终端，运行以下命令：

 pnpm init @eslint/config

根据提示一步步完成操作：

首先会提示需要安装 @eslint/create-config 软件包，终端输入 y 后确定

Need to install the following packages: 
	@eslint/create-config 
Ok to proceed? (y) 

然后回询问：您希望如何使用ESLint？，此处选择最后一项；

? How would you like to use ESLint? ... 
    To check syntax only
    To check syntax and find problems
> To check syntax, find problems, and enforce code style

您的项目使用什么类型的模块？选择 JavaScript modules (import/export)；

? What type of modules does your project use? ... 
> JavaScript modules (import/export)
   CommonJS (require/exports)
   None of these

您的项目使用哪种框架？选择 Vue.js;

? Which framework does your project use? ... 
  React
> Vue.js
  None of these

你的项目使用TypeScript吗？因为我们的项目是基于Ts创建的，所以选择 Yes；

? Does your project use TypeScript? » No / Yes 

代码运行环境？

? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
  Browser
> Node 

希望如何定义项目的样式？选择第一项；

? How would you like to define a style for your project? ... 
> Use a popular style guide
    Answer questions about your style

遵循哪种风格指南？选择 Airbnb；

? Which style guide do you want to follow? ... 
> Airbnb: https://github.com/airbnb/javascript
  Standard: https://github.com/standard/standard
  Google: https://github.com/google/eslint-config-google
  XO: https://github.com/xojs/eslint-config-xo

配置文件采用什么格式？选择 JavaScript；

? What format do you want your config file to be in? ... 
> JavaScript
  YAML
  JSON

最后需要选择一种package管理工具，因为项目是使用 pnpm 创建的，我们就选择 pnpm ;

? Which package manager do you want to use? ... 
  npm
  yarn
> pnpm

接下来等待依赖包安装完成，完成安装后会在项目根目录下生成一个 .eslintrc.js 文件。

3、配置
使用webstorm的小伙伴，需要在设置中开启一下Eslint

webstorm开启Eslint

开启之后，再次打开App.vue文件，发现Eslint已经检查出来问题

因为我们在上一节中配置了自动导入，此处就没有导入 ref 和 onLaunch，现在我们来解决这个问题；

首先打开 vite.config.ts 文件，在 AutoImport 里面加入下列代码：

eslintrc: {
  enabled: true,
  filepath: '.eslintrc-auto-import.json',
  globalsPropValue: true,
},

完整代码如图所示：

为uniapp项目配置基于airbnb风格的Eslint代码检查规则
我们发现 vite.config.ts 里面也出现了问题，我们先不管他，终端运行 pnpm dev:mp-weixin，之后会发现，项目根目录生成了一个.eslintrc-auto-import.json 文件：

现在将这个文件路径加入到 .eslintrc.js 的 extends 配置项里面，同时把 extends 中其它几个配置替换成如下所示的代码；

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    // 'plugin:vue/essential',
    'plugin:@typescript-eslint/recommended',
    'plugin:vue/vue3-recommended',
    'airbnb-base',
    '.eslintrc-auto-import.json', // 此处加入
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  plugins: [
    'vue',
    '@typescript-eslint',
  ],
  rules: {},
};

再次打开 App.vue 文件，发现之前的错误已经被修复了：

为uniapp项目配置基于airbnb风格的Eslint代码检查规则
我们在里面写上一个 uni.showToast()，uni 这个对象又提示了没有导入：

在 .eslintrc.js 中加入下面的配置即可

module.exports = {
  // 加入 globals 配置
  globals: {
    uni: 'readonly',
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly',
  },
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:vue/vue3-recommended',
    'airbnb-base',
    '.eslintrc-auto-import.json',
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  plugins: [
    'vue',
    '@typescript-eslint',
  ],
  rules: {},
};

配置好之后，vite.config.ts 里面已经显示正常，下面是完整的 .eslintrc.js 配置，加入了一些规则(rules配置项)，这里可以根据自己喜好并结合 Eslint 官网文档进行配置；

module.exports = {
  globals: {
    uni: 'readonly',
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly',
  },
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:vue/vue3-recommended',
    'airbnb-base',
    '.eslintrc-auto-import.json',
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  plugins: [
    'vue',
    '@typescript-eslint',
  ],
  rules: {
    camelcase: 'off',
    '@typescript-eslint/no-var-requires': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/no-empty-function': 'off',
    'import/extensions': 'off',
    'import/no-unresolved': 'off',
    'import/no-extraneous-dependencies': 'off',
    'import/no-cycle': 'off',
    'import/prefer-default-export': 'off',
    'no-unused-expressions': 'off',
    'no-return-assign': 'off',
    'no-eval': 'off',
    'no-new': 'off',
    'no-shadow': 'off',
    'no-param-reassign': 'off',
    'no-plusplus': 'off',
    'no-unsafe-optional-chaining': 'off',
    'prefer-promise-reject-errors': 'off',
    semi: ['error', 'never'],
    'vue/multi-word-component-names': 'off',
    'vue/max-attributes-per-line': [2, { singleline: 10, multiline: 1 }],
    'vue/html-closing-bracket-newline': ['error', {
      singleline: 'never',
      multiline: 'never',
    }],
    'vue/html-closing-bracket-spacing': ['error', {
      startTag: 'never',
      endTag: 'never',
      selfClosingTag: 'always',
    }],
  },
}

在项目根目录创建一个 .eslintignore 文件，忽略掉一些不需要语法检查的目录或文件，如：

/node_modules
/src/uni_modules

好了，本篇关于uniapp项目配置 Eslint 到这里就结束了，个人观点：如果小伙伴们习惯使用HbuilderX开发的话，是不建议配置自动导入和Eslint的，HbuilderX 的 Eslint 检查目前还不是十分友好。