从零开始搭建前端项目一（Vue3+Vite+TS+Eslint+Airbnb+prettier）
从零开始一步一步搭建一个精简的前端项目。
技术栈：Vue3.0 + Vite + TypeScript + Element Plus + Vue Router + axios + Pinia
规范化：Eslint + Airbnb JavaScript Style + husky + lint-staged
包管理：yarn
本章内容
新建一个Vue3+Ts的项目，并使用Eslint和prettier进行代码约束和风格统一。
初始化项目
Vite支持使用vue-ts模板，所以直接使用下面命令即可创建Vue3.0 + Vite + TypeScript的项目。
yarn create vite vue3-ts-demo --template vue-ts
创建完成后根据提示运行项目。
cd vue3-ts-demo
yarn
yarn dev
项目运行在3000端口，如果有端口冲突，需要配置vite.config.ts文件中server字段。
Eslint
安装
Eslint只有开发阶段需要，因此添加到开发阶段的依赖中即可。
# eslint 安装
yarn add eslint --dev
配置
创建.eslintrc.js文件，添加基础配置
module.exports = {
root: true,
env: {
browser: true, // browser global variables
es2021: true, // adds all ECMAScript 2021 globals and automatically sets the ecmaVersion parser option to 12.
},
parserOptions: {
ecmaVersion: 12,
},
}
添加Vue语法校验
ESLint官方提供的Vue插件，可以检查 .vue文件中的语法错误。
# eslint 插件安装
yarn add eslint-plugin-vue --dev
添加配置
// .eslintrc.js
..
parser: "vue-eslint-parser", // ++
extends: [
'plugin:vue/vue3-recommended' // ++
]
...
添加TypeScript支持
安装TS插件和解析器
yarn add @typescript-eslint/eslint-plugin --dev
# typescript parser
yarn add @typescript-eslint/parser --dev
添加配置
// .eslintrc.js
...
extends: [
"plugin:@typescript-eslint/recommended", // ++
]
plugins: ['@typescript-eslint'], // ++
parserOptions: {
parser: '@typescript-eslint/parser', // ++
},
...
Airbnb JavaScript Style
安装Airbnb基础规则的eslint插件eslint-config-airbnb-base。
yarn add eslint-config-airbnb-base --dev
添加配置
// .eslintrc.js
...
extends: [
'plugin:vue/vue3-recommended',
'airbnb-base', // ++
],
...
测试Eslint
在package.json中增加命令
// package.json
...
"scripts": {
"lint": "eslint src --fix --ext .ts,.tsx,.vue,.js,.jsx" // ++
}
...
运行
yarn lint
报错如下：
显示没有安装eslint-plugin-import。
yarn add eslint-plugin-import --dev
重新运行yarn lint, 报错如下
--- 2022.02.28 更新 ---
这个是因为在HelloWorld.vue组件中使用了defineProps，但是没有引用，在.eslintrc.js添加配置即可。
// .eslintrc.js
module.exports = {
globals: {
defineProps: 'readonly',
},
}
改完运行成功。
prettier
安装
安装prettier
# 安装 prettier
yarn add prettier --dev
# 安装 eslint-plugin-prettier
yarn add eslint-plugin-prettier --dev
配置
添加配置
// .eslintrc.js
...
plugins:'@typescript-eslint', 'prettier'], // ++
rules: {
'prettier/prettier': 'error', // ++
},
...
新建.prettierrc.js
// .prettierrc.js
module.exports = {
singleQuote: true, // 使用单引号
}
测试prettier
在package.json中增加命令
// package.json
...
"scripts": {
"prettier": "prettier --write .", // ++
}
...
先运行yarn lint，发现eslint规则和prettier规则冲突，报错。
# 安装插件 eslint-config-prettier
yarn add eslint-config-prettier --dev
添加配置，plugin:prettier/recommended的配置，一定要放在最后。因为extends中后引入的规则会覆盖前面的规则。
// .eslintrc.js
...
extends: [
'plugin:prettier/recommended', // ++ 放置在extends数组的最后
],
...
上面配置完成后，可以运行以下命令测试下代码检查个格式化效果:
# eslint 检查
yarn lint
# prettier 自动格式化
yarn prettier
小结
到目前为止项目还在我们本地开发环境，增加了本地开发环境的代码约束和风格。但是项目一般都是多人协作开发，上传Git的时候怎么保证所有人的代码约束和风格都是一致的？这个需求可以通过Git hooks技术实现，下一篇一步一步实现在提交代码前进行ESLint二次校验，从而保证提交到Git的代码都是统一的代码约束和风格。
