二、为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 onlyTo 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.jsNone 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 guideAnswer questions about your style

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

? Which style guide do you want to follow? ...
> Airbnb: https://github.com/airbnb/javascriptStandard: https://github.com/standard/standardGoogle: https://github.com/google/eslint-config-googleXO: https://github.com/xojs/eslint-config-xo

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

? What format do you want your config file to be in? ...
> JavaScriptYAMLJSON

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

? Which package manager do you want to use? ... npmyarn
> 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 检查目前还不是十分友好。

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

【Uniapp】二、UniAPP项目全局文件配置
前言上一篇我们了解了Uniapp的优势等基本信息,这里我们将进入正题:小程序项目搭建的项目配置. 1 工程目录结构 ┌─components uni-app组件目录 │ └─comp-a.vue 可 ...
uni-app项目配置手机端底部的tab栏（一）
一般我们在开发手机应用的时候都会有手机底部的tab导航栏,然而我们在使用uni-app开发的时候,我们可以直接在项目中配置tab即可,非常的方便. 1.创建项目我们用uni-app官方提供的HBui ...
uni-app项目配置UrlSchemes在外部打开APP
已经安装跳转应用的情况 1.对于IOS配置打包配置路径manifest->app-plus->distribute->ios 注意不要使用大写及中文以及特殊字符等,示例代码如下 & ...
二、uniapp项目（分段器的使用、scroll-view、视频下载、转发）
一.分段器组件的使用 uniapp官方文档 <template><view class="category"><view class="ca ...
MCADEx开发 ProE二次开发 Creo二次开发项目配置
请关注MCADEx官方网站:www.mcadex.com QQ: 910361522 启动VS2010 文件->新建->项目选择VC++->MFC->MFC DLL创建名称 ...
Unity 之 Post Processing后处理不同项目配置（URP项目配置）
Unity 之 Post Processing后处理不同项目配置(URP项目配置) 一,Post Processing介绍二,正常项目配置 2.1 场景配置 2.2 集成步骤小结三,URP项目配置 ...
基于git hooks的前端代码质量控制解决方案
基于git hooks的前端代码质量控制解决方案原文:https://github.com/kuitos/kuitos.github.io/issues/28 国际惯例先说下故事背景通常情况下,如 ...
基于 git hooks 的前端代码质量控制解决方案
原文看这里:https://github.com/kuitos/kui... 全部文章看这里 https://github.com/kuitos/kui... 国际惯例先说下故事背景通常情况下,如果 ...
网络云存储技术Windows server 2012 （项目十基于NTFS权限（ADLP原则）的文件共享服务的配置与管理）
网络云存储技术Windows server 2012 (项目十基于NTFS权限(ADLP原则)的文件共享服务的配置与管理) 目录前言一.项目背景二.项目实训题三.环境准备四.操作步骤 1. ...

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

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

最新文章

热门文章