本文主要讲述对命名规范、工具、插件的一些建议，具体内容参见【参见】字样的超链接
本文将带你调整开发姿势，先来看以下几点
- 让公司给你配备三台显示器，第一台用来看浏览器效果，第二台用来写代码，第三台用来看开发者工具
- 让公司给你配备电竞椅，要可以躺下的那种，方便中午睡午觉
- 让公司给你配备独立办公室，并且可以抽烟
- 要弹性工作时间，前后可弹两个小时
如果公司都不同意（你不敢说不赖我），那只好在自己这边下手了。一些看起来繁琐的事情，有时反而让我们轻松。
文件夹、文件、变量、函数命名以及CSS选择器命名
如果你说这个不重要我不会反驳你的，因为每个人有自己的想法。但是有一套自己的命名规范，对在一段时间以后回头来看代码有很大的帮助。
文件夹
在vscode中下载 vscode-icons插件后，一些关键词文件夹图标会被替换成特殊图标，例如：
利用好关键词文件夹命名（注意不要滥用），会提升你找文件的速度
不要重复文件夹功能，意思就是，如果你有这么一个文件夹 src\assets\imgs，就不要再创建src\assets\images了。
如果有图片没有放在 src\assets\imgs 而放在了另外的文件夹，也是不可取的，这样会导致图片的路径难以追踪，如果想对图片进一步分类，可以 src\assets\imgs\icons，以此类推，其他类型的文件也是如此。
如果你想做一个第三方小工具的 js 文件夹，那么可以 src\plugins ,自己写的公共方法，可以创建成src\utils或者src\tools等
注意：
- 如果你已经创建了 src\tools ,就不要再创建 src\xxx\tools 了，这样在列表中看起来很混乱，并且难以追踪
- 不要创建框架中自带的关键词文件夹，比如 vue 项目中，不要创建 src\views\home\components ,因为已经有了src\components ，如果想创建home页专属的components ，可以创建src\components\home
- 避免用文件格式命名文件夹，时间长了可能就忘了这个文件夹的功能，例如 src\utils\json 、src\utils\script
- 避免使用短横线，可以使用下划线，下划线不推荐用在开头或结束
- 统一使用大驼峰、小驼峰下划线命名，不要混用，下划线命名是兼容性比较高的，小驼峰命名是识别性比较强的，大驼峰是比较美观的
- 拼音和英文不要混用，要么全用英文，要么全用拼音
文件
一个文件夹中的主文件最好和文件夹同名，如 src\views\remoteBD\remoteBD.vue ，不要使用 src\views\remoteBD\index.vue 或者 src\views\remoteBD\main.vue
- 避免使用短横线，可以使用下划线，下划线不推荐用在开头或结束
- 统一使用大驼峰、小驼峰下划线命名，不要混用，下划线命名是兼容性比较高的，小驼峰命名是识别性比较强的，大驼峰是比较美观的
- 拼音和英文不要混用，要么全用英文，要么全用拼音
- 不要以框架项目的关键字命名 如 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，看起来长了一些，但是意义更加明确了
做到以上两个方面，你将拥有一个干净整洁、分类明确的文件树，恭喜。
变量和函数
见名知意是唯一的要求，千万不要怕名字长，还有一件事，动词名词的前后顺序一定要固定，比如：sendMsgToServer，是动词在前，名词在后，serverMsgSender就是名词在前，动词在后。
这个虽然无伤大雅，但是在日常的阅读中会稍微增加一点负担。
变量的命名也不能以简单的、无意义的字符命名，比如：let data = {}、let str1 = "" 、let newArr = []。改成 let originalData= {}、let msg= "" 、let recArr= [] 更好一点
CSS选择器
推荐使用less作为预处理器，你可以完全不用学习less，而只使用它的嵌套功能，更多的功能还需要你在实际开发中探索。
css选择器命名只需要见名知意即可，不推荐使用短横线（"-"）分类，推荐使用更多的class名来分类，很多人可能习惯
&-xxx这种写法，但是这种写法可读性极差，如果想为某些元素加同样的样式，可以令起一个类，比如
.flex{
display:flex;
}
这样，把flex类加到任何元素即可。摒弃了短横线后，还可以便捷的双击选中并搜索。这里推荐一个vscode插件：CSS Navigation
使用ES6
很多人只知道es6新语法有 let const、箭头函数、数组对象解构什么的，很多小的实用功能却很少有人用过。
可选链操作符
//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??'') !== ''){
//...
}
更多实用语法，参见：你会用ES6，那倒是用啊！ 、ES6基本全部语法
使用工具（powerToys）
powerToys是微软开发的一款小工具合集，功能如图所示
简直是前端开发必备工具
使用浏览器插件
浏览器插件可以帮你完成很多工作，比如接口测试、管理cookie和本地缓存，甚至可以做到自动化流水线，如果你还不会开发浏览器插件，参见：一文学会浏览器插件 不要重复造轮子！
另外
学习node.js（或任何一个后端语言）和mysql（或任何一个数据库）都对前端开发有帮助，至少你应该知道应该把锅甩给谁，而不是唯唯诺诺不敢说话，个人推荐学习后端语言从node.js（好上手）学起，数据库从mysql（好上手）学起。这里推荐一个学习全栈开发的开源项目：Vue-Admin-Xmw-Pro ，后端使用的egg.js（node.js框架）也是好上手的一款，钻透这个项目，就可以独立开发一个全栈项目了
学习强类型的语言可能会给你带来一些好处，但是在前端开发中的效率提升不明显。比如，一些小型项目如果使用TS开发，只会徒增负担和降低效率。所以不用担心不会TS会影响你的仕途，大部分项目是用不到的。如果希望学一款强类型语言，也不推荐学习TS（TS不能称之为一门语言，它只是js的类型检查工具），可以考虑从java入手，更完整的体验强类型的语言。
当你掌握了上述内容，你就拥有了打败80%的人的快速面向业务的能力，加油，召唤师 前端人