本文将帶你調整開發姿勢，先來看以下幾點
- 讓公司給你配備三台顯示器，第一台用來看浏覽器效果，第二台用來寫代碼，第三台用來看開發者工具
- 讓公司給你配備電競椅，要可以躺下的那種，友善中午睡午覺
- 讓公司給你配備獨立辦公室，并且可以抽煙
- 要彈性工作時間，前後可彈兩個小時
如果公司都不同意（你不敢說不賴我），那隻好在自己這邊下手了。一些看起來繁瑣的事情，有時反而讓我們輕松。
檔案夾、檔案、變量、函數命名以及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%的人的快速面向業務的能力，加油，前端人。
文章來源：https://www.cnblogs.com/Kay-Larry/p/17010977.html