前言
本人在一家小公司任职,作为赶鸭子上架的前端负责人,一年的开发经历让我痛不欲生,今年受疫情影响公司业务开发停滞,痛定思痛要规范化一个前端开发规则以及流程,开贴记录一下自己的优化方案!后续我的相关代码配置都会开源,地址放在文章结尾.
本人就是一个菜鸡前端,如果有问题可以指出,我也会虚心学习,但是不要语言攻击哦
座右铭:"技术无优劣,适合才是真理"
技术选型
首先一个项目开发肯定首先要选择适合自己团队人员,规模,场景的技术方案
前端构建工具----vite
1.首选vite,因为他就一个字"快",就不过多解释了;
2.其次vue-cli,官方配置还是很耐打的;
3.还有webpack,我没配过就不多BB了;
话不多说直接贴代码,我不解释的代码说明非常非常非常简单,如果看不懂说明基础课程没有看过7结课,可以尝试先学习基础
yarn create vite
1. Project name: » 项目名称
2. Select a framework: » - Use arrow-keys. Return to submit.
vanilla
> vue 选择 vue
react
preact
lit
svelte
3. Select a variant: » - Use arrow-keys. Return to submit.
vue
> vue-ts 选择 ts的
搞定配置文件
先搞个最简单的配置,适自己项目再去diy 报错呢先不管,后面走完流程安装完之后就正常了
vite.config.ts
// vite.config.ts
import { defineConfig, loadEnv } from 'vite'
import path from 'path'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import eslintPlugin from 'vite-plugin-eslint'
const resolve = (dir: string) => path.resolve(__dirname, dir)
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
// 检查process.cwd()路径下.env.development.local、.env.development、.env.local、.env这四个环境文件
loadEnv(mode, process.cwd())
// 返回vite配置
return {
plugins: [
// 加载 eslint 插件
eslintPlugin({
cache: false
}),
vue(),
vueJsx()
],
resolve: {
alias: {
'@': resolve('./src')
},
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']
}
}
})
.env.development
ENV = 'development'
VITE_APP_BASE_API = 'http://127.0.0.1:8000'
.env.production
ENV = 'production'
VITE_APP_BASE_API = '线上API地址'
packgae.json 增加两项命令行
"scripts": {
"build:dev": "vite build --mode development",
"build:pro": "vite build --mode production",
}
tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"strict": false,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"],
"types": ["vite/client", "node"],
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
},
"allowJs": true
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"exclude": ["node_modules"]
}
安装@vitejs/plugin-vue-jsx
Provides Vue 3 JSX & TSX support with HMR.
通过HMR使得Vue3支持JSX和TSX.
yarn add path @vitejs/plugin-vue-jsx -D
集成 Prettier 配置
因为我自己使用的是WebStorm内置了Prettier
VSCode 编辑器使用 Prettier 配置需要下载插件 Prettier - Code formatter
yarn add prettier eslint-plugin-prettier eslint-config-prettier -D
根目录下创建 .prettierrc 文件
这是我自己的设置大家也可以去官网配置一套适合自己风格的规则
官网prettier.io 操作方法可以在B站上搜索,非常简单就不多做介绍了!如果不懂就直接用我的就完事儿了
{
"useTabs": false,
"tabWidth": 2,
"printWidth": 100,
"singleQuote": true,
"trailingComma": "none",
"bracketSpacing": true,
"semi": false
}
集成 ESLint 配置
VSCode 使用 ESLint 配置文件需要去插件市场下载插件 ESLint.
然后安装需要的包
yarn add eslint vite-plugin-eslint eslint-import-resolver-typescript eslint-plugin-import eslint-plugin-vue eslint-config-airbnb-base eslint-plugin-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser -D
执行 npx eslint --init
选择 **To check syntax, find problems, and enforce code style**
选择 **JavaScript modules (import/export)**
选择 **Vue.js**
选择 **Yes** 使用 **ts**
选择 **Browser**
选择 **Use a popular style guide**
选择 ******Airbnb:** [**https://github.com/airbnb/javascript**](https://github.com/airbnb/javascript)
选择 **Javascript**
选择 **Yes 安装（报错也不管他无所谓）**
根目录覆盖.eslintrc.js,这个也是可以自己改配置不懂就抄我的
// .eslintrc.js
module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
extends: [
'airbnb-base',
'eslint:recommended',
'plugin:vue/vue3-recommended',
'plugin:@typescript-eslint/recommended',
'plugin:vue/vue3-strongly-recommended',
'plugin:prettier/recommended',
'prettier'
],
parserOptions: {
ecmaVersion: 13,
parser: '@typescript-eslint/parser',
sourceType: 'module',
ecmaFeatures: {
jsx: true
}
},
plugins: ['vue', '@typescript-eslint', 'prettier'],
rules: {
'import/no-cycle': 'off',
'import/extensions': 'off',
'import/no-extraneous-dependencies': 'off',
'vue/multi-word-component-names': 'off'
},
settings: {
'import/parsers': {
'@typescript-eslint/parser': ['.ts', '.tsx']
},
'import/resolver': {
typescript: {}
}
}
}
解决 Prettier 和 ESLint 的冲突
prettier是对代码格式化的插件,他不会判断我们的代码是不是对的只会让代码格式化成一个我们预定的标准格式 eslint呢是检测我们代码对错的插件,他的作用呢更偏向于找出我们代码中错误的部分或者不合理的代码部分
安装eslint-plugin-prettier和slint-config-prettier
yarn add eslint-plugin-prettier eslint-config-prettier -D
集成 EditorConfig 配置
EditorConfig 官网解释:
EditorConfig帮助开发人员在不同的编辑器和IDE之间定义和维护一致的编码样式。EditorConfig项目由用于定义编码样式的文件格式和一组文本编辑器插件组成，这些插件使编辑器能够读取文件格式并遵循定义的样式。EditorConfig文件易于阅读，并且与版本控制系统配合使用。
不同的开发人员，不同的编辑器，有不同的编码风格，而EditorConfig就是用来协同团队开发人员之间的代码的风格及样式规范化的一个工具，而.editorconfig正是它的默认配置文件。
VSCode 使用 EditorConfig 需要去插件市场下载插件 EditorConfig for VS Code 。
项目根目录创建 .editorconfig
# Editor configuration, see http://editorconfig.org
# 表示是最顶层的 EditorConfig 配置文件
root = true
[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行
[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false
一阶段完成
到这一步呢开发环境就已经搞定了,统一了代码的格式化以及规则
下一步呢我们会处理git提交规则,让我们团队在代码提交合并上面更加规范
好了,下一期再见!
