本文主要讲述对命名规范、工具、插件的一些建议，具体内容参见【参见】字样的超链接 。

本文将带你调整开发姿势，先来看以下几点 。

1. 让公司给你配备三台显示器，第一台用来看浏览器效果，第二台用来写代码，第三台用来看开发者工具
2. 让公司给你配备电竞椅，要可以躺下的那种，方便中午睡午觉
3. 让公司给你配备独立办公室，并且可以抽烟
4. 要弹性工作时间，前后可弹两个小时

如果公司都不同意（你不敢说不赖我），那只好在自己这边下手了。一些看起来繁琐的事情，有时反而让我们轻松.

文件夹、文件、变量、函数命名以及CSS选择器命名

如果你说这个不重要我不会反驳你的，因为每个人有自己的想法。但是有一套自己的命名规范，对在一段时间以后回头来看代码有很大的帮助.

文件夹

在vscode中下载 vscode-icons插件后，一些关键词文件夹图标会被替换成特殊图标，例如:

利用好关键词文件夹命名（注意不要滥用），会提升你找文件的速度 。

不要重复文件夹功能，意思就是，如果你有这么一个文件夹 src\assets\imgs，就不要再创建src\assets\images了.

如果有图片 没有 放在 src\assets\imgs 而放在了另外的文件夹，也是不可取的，这样会导致图片的路径难以追踪，如果想对图片进一步分类，可以 src\assets\imgs\icons，以此类推，其他类型的文件也是如此.

如果你想做一个第三方小工具的 js 文件夹，那么可以 src\plugins ,自己写的公共方法，可以创建成src\utils或者src\tools等 。

注意:

1. 如果你已经创建了 src\tools ,就不要再创建 src\xxx\tools 了，这样在列表中看起来很混乱，并且难以追踪
2. 不要创建框架中自带的关键词文件夹，比如 vue 项目中，不要创建 src\views\home\components ,因为已经有了src\components ，如果想创建home页专属的components ，可以创建src\components\home
3. 避免用文件格式命名文件夹，时间长了可能就忘了这个文件夹的功能，例如 src\utils\json 、src\utils\script
4. 避免使用短横线，可以使用下划线，下划线不推荐用在开头或结束
5. 统一使用大驼峰、小驼峰下划线命名，不要混用，下划线命名是兼容性比较高的，小驼峰命名是识别性比较强的，大驼峰是比较美观的
6. 拼音和英文不要混用，要么全用英文，要么全用拼音

文件

一个文件夹中的主文件最好和文件夹同名，如 src\views\remoteBD\remoteBD.vue ，不要使用 src\views\remoteBD\index.vue 或者 src\views\remoteBD\main.vue 。

1. 避免使用短横线，可以使用下划线，下划线不推荐用在开头或结束
2. 统一使用大驼峰、小驼峰下划线命名，不要混用，下划线命名是兼容性比较高的，小驼峰命名是识别性比较强的，大驼峰是比较美观的
3. 拼音和英文不要混用，要么全用英文，要么全用拼音
4. 不要以框架项目的关键字命名 如 vue.config.js
5. 不要以简单的、无意义的字符命名 如：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%的人的快速面向业务的能力，加油， 召唤师 前端人 。

最后此篇关于怎么开发前端才更优雅的文章就讲到这里了,如果你想了解更多关于怎么开发前端才更优雅的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。