本文将带你调整开发姿势，先来看以下几点：
让公司给你配备三台显示器，第一台用来看浏览器效果，第二台用来写代码，第三台用来看开发者工具；
让公司给你配备电竞椅，要可以躺下的那种，方便中午睡午觉；
让公司给你配备独立办公室，并且可以抽烟；
要弹性工作时间，前后可弹两个小时。
文件夹、文件、变量、函数命名以及CSS选择器命名
如果你说这个不重要我不会反驳你的，因为每个人有自己的想法。但是有一套自己的命名规范，对在一段时间以后回头来看代码有很大的帮助。
文件夹
不要重复文件夹功能，意思就是，如果你有这么一个文件夹 src\assets\imgs，就不要再创建src\assets\images了。
没有放在 src\assets\imgs 而放在了另外的文件夹，也是不可取的，这样会导致图片的路径难以追踪，如果想对图片进一步分类，可以 src\assets\imgs\icons，以此类推，其他类型的文件也是如此。
注意：
如果你已经创建了 src\tools ,就不要再创建 src\xxx\tools 了，这样在列表中看起来很混乱，并且难以追踪
不要创建框架中自带的关键词文件夹，比如 vue 项目中，不要创建 src\views\home\components ,因为已经有了src\components，如果想创建home页专属的components，可以创建src\components\home
避免用文件格式命名文件夹，时间长了可能就忘了这个文件夹的功能，例如 src\utils\json 、src\utils\script
避免使用短横线，可以使用下划线，下划线不推荐用在开头或结束
统一使用大驼峰、小驼峰下划线命名，不要混用，下划线命名是兼容性比较高的，小驼峰命名是识别性比较强的，大驼峰是比较美观的
拼音和英文不要混用，要么全用英文，要么全用拼音
文件
避免使用短横线，可以使用下划线，下划线不推荐用在开头或结束
统一使用大驼峰、小驼峰下划线命名，不要混用，下划线命名是兼容性比较高的，小驼峰命名是识别性比较强的，大驼峰是比较美观的
拼音和英文不要混用，要么全用英文，要么全用拼音
不要以框架项目的关键字命名 如 vue.config.js
不要以简单的、无意义的字符命名 如：a.png、b.png、topBtnBg.png、innerData.json、config.json、tools.js等，正确命名如：meatInAView.png、meatInBView.png、sendMsgBtnInTopBg.png、foodInnerData.json、foodConfig.json、eatTools.js，看起来长了一些，但是意义更加明确了
做到以上两个方面，你将拥有一个干净整洁、分类明确的文件树，恭喜。
变量和函数
这个虽然无伤大雅，但是在日常的阅读中会稍微增加一点负担。
CSS选择器
推荐使用less作为预处理器，你可以完全不用学习less，而只使用它的嵌套功能，更多的功能还需要你在实际开发中探索。
&-xxx这种写法，但是这种写法可读性极差，如果想为某些元素加同样的样式，可以令起一个类，比如
.flex{
display:flex;
}这样，把flex类加到任何元素即可。摒弃了短横线后，还可以便捷的双击选中并搜索。这里推荐一个vscode插件：CSS Navigation
使用ES6
可选链操作符
//const name = obj && obj.name;
const name = obj?.name;字符串模板和对象属性表达式
//let obj = {};
//let index = 1;
//let key = `topic${index}`;
//obj[key] = '话题内容';
let obj = {};
let index = 1;
obj[`topic${index}`] = '话题内容';非空判断
//if(value !== null && value !== undefined && value !== ''{
//...
//}
if((value??'' !== ''{
//...
}使用工具（powerToys）
使用浏览器插件
浏览器插件可以帮你完成很多工作，比如接口测试、管理cookie和本地缓存，甚至可以做到自动化流水线，如果你还不会开发浏览器插件！
另外
Vue-Admin-Xmw-Pro，后端使用的egg.js（node.js框架）也是好上手的一款，钻透这个项目，就可以独立开发一个全栈项目了。
当你掌握了上述内容，你就拥有了打败80%的人的快速面向业务的能力，加油，召唤师 前端人。