上一节我们一起创建了基于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 检查目前还不是十分友好。