背景
入职新公司，接手一个管理后台项目，发现项目虽然能用，但是可优化的点太多了
- axios没有设置请求和响应拦截，对服务器的状态只是单一抛网络错误处理
- 没有设置全局错误处理器，没有404等页面，没有错误上报后台，发生错误往往需要使用者告知
- 本地开发热更新很慢，大文件没有抽dll
- 线上静态资源没有gzip压缩，直接让页面请求1M的资源
- eslint的prettier规则与vetur的规则冲突，导致格式化的时候经常出问题
- 代码风格不统一，不语义化，例如：currentLang，不点进具体方法都不知道原来返回的是当前是否是中文环境
- 前后端项目不分离，dist目录居然要上传git仓库，导致每次协作开发必然会文件冲突，并且review代码也是个灾难
- 注释很少，变量语义化十分不明确，很多magic number
- 接口文档很混乱，新入职的很难去查某个接口的字段表示的意义
- utils方法基本没有，每次用到都要自己去写或者网上去找
- 公用组件抽象很少，mixin也很少
- README.md 对于项目的介绍过于粗略，新入职的很难快速上手
- css处理器使用的是postcss，虽然是下一代css语法，但是感觉比起sass等预处理器，postcss还是不好用
- 权限处理，不是根据当前登录的用户去请求接口分配准入菜单的方式，而通过配置关键key的方式，前端和服务器都要同时保存一份key（前端没必要去保存）
吐槽一句，不知道之前的人是怎么忍受得了的。
世上本没有项目优化，团队协作开发的人多了，便有了项目优化。 --- 沃滋基-硕德
其实对于上面的项目，已经有一部分必须先优化的已经优化了。例如
- 前后端分离，不提交dist目录，只提交业务文件，用gitlab走ci部署
- 大文件走CDN（其实我是想走dll的，但是领导觉得cdn比较好）
- utils文件内容丰富
- 变量加注释，至少vuex里面的全局属性维护者得知道什么意思吧
最近修改了eslint配置，然后顺便跟大伙儿分享一下eslint+prettier配置
由于项目之前是直接配置vscode的settings.json，并没有把这份配置公用，所以此次修改直接增加如下文件：
- .editorconfig
- .eslintignore
- .pretterrc.js
以此让所有拉下这份项目的人代码的统一
show the code
.prettierrc.js
module.exports = {
eslintIntegration: true,
tabWidth: 2,
printWidth: 80,
singleQuote: true, // 用单引号
semi: true // 句末加分号
};
eslintrc.js 贴关键代码
extends: [
'plugin:vue/recommended', // vue语法校验
'eslint:recommended' // js语法校验
],
env: {
browser: true,
commonjs: true,
node: true,
es6: true
},
具体的规则可查看：
然后rules的话是根据现有的规则然后再根据项目使用符合自己公司风格的额外规则。
最后的话还要在项目根目录增加.vscode/settings.json
{
"vetur.format.defaultFormatter.html": "js-beautify-html", // 格式化 vue 项目中的 html 代码
// 根据文件后缀名定义vue文件类型
"files.associations": {
"*.vue": "vue"
},
// 配置 ESLint 检查的文件类型
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
// 保存时eslint自动修复错误
"eslint.autoFixOnSave": true,
// 保存自动格式化
"editor.formatOnSave": true
}
至此，配置完成。
Tips 发现部门的前端er居然没安装Project Manager管理项目，强烈推荐他们安装了一波，因为他们习惯在一个窗口打开多个项目，但是settings.json是根据项目生效的，所以如果在一个窗口多个项目的话，导致settings不生效。
