天天看點

JavaScript:05 開發者技能與編輯器設定1

作者:學習資源

053 Section Intro

現在你已經熟悉了JavaScript的基礎知識,是時候稍微休息一下,看一下一些你也需要發展的其他技能,為了成為一名出色的JavaScript程式員。

是以,在本節中,你将學習,如何真正學會編碼,如何作為一個開發者思考,如何調試你的代碼,以防你遇到問題以及如何設定你自己的計算機上的專業開發環境。

視訊加載中...

054 Section Roadmap

課程提供了視訊中出現的代碼檔案。

https://github.com/jonasschmedtmann/complete-javascript-course

055 Setting up Prettier and VS Code

本講學習VS Code的配置,通過這些配置,讓我們編碼自動規範和便捷。

視訊加載中...

在代碼中要啟用嚴格模式。

JavaScript:05 開發者技能與編輯器設定1

配置VS Code,添加Prettier代碼格式化工具。

在VS Code擴充中搜尋prettier。

JavaScript:05 開發者技能與編輯器設定1

選中第一個Prettier-Code formatter進行安裝。

JavaScript:05 開發者技能與編輯器設定1

在VS Code的Setting中搜尋default fomatter項。

JavaScript:05 開發者技能與編輯器設定1

在下拉菜單中選擇帶有prettier的名字即可。

JavaScript:05 開發者技能與編輯器設定1

在Setting中搜尋formatt on save項。

確定此項打開。

JavaScript:05 開發者技能與編輯器設定1

測試驗證一下Prettier自動格式化的效果。

JavaScript:05 開發者技能與編輯器設定1

儲存目前内容。多行空行自動更新為一行空行。等号兩邊也自動補了空格。類似這樣的格式化處理,在編碼過程中都可以看到。

JavaScript:05 開發者技能與編輯器設定1

Prettier會把代碼中的單引号更改為雙引号。如果不希望改動,也可以通過設定來調整這些變化。

在目前目錄下建立檔案名稱“.prettierrc”,在檔案中輸入:

{
    "singleQuote": true
}           

儲存檔案。

再次檢視代碼檔案内的雙引号變成單引号。

JavaScript:05 開發者技能與編輯器設定1

Prettier針對箭頭函數也可以自動補全。

JavaScript:05 開發者技能與編輯器設定1

儲存目前檔案。可以看到有哪些變化。單一參數給添加了括号。

JavaScript:05 開發者技能與編輯器設定1

當然,也可以設定不添加括号。

在“.prettierrc”檔案中輸入:

{
    "singleQuote": true,
  "arrowParens": "avoid"
}           

console.log經常會在代碼中使用,如何簡化console.log輸入呢?

先進入User Snippets頁面。

JavaScript:05 開發者技能與編輯器設定1

建立新的全局Snippets檔案。

JavaScript:05 開發者技能與編輯器設定1

輸入javascript,然後回車。

JavaScript:05 開發者技能與編輯器設定1

修改示例内容。

JavaScript:05 開發者技能與編輯器設定1

在代碼頁面輸入cl,則直接得到console.log();内容。

在console.log()中添加$1,在代碼也輸入cl,則得到console.log(),光标會停留在括号内。

JavaScript:05 開發者技能與編輯器設定1

056 Installing Node.js and Setting Up a Dev Environment

本将主要學習node.js安裝和設定。

視訊加載中...

修改代碼後,自動重新加載浏覽器,如何設定?

在VS Code擴充中安裝Live Server。

JavaScript:05 開發者技能與編輯器設定1

在VS Code最底部執行Go Live,彈出浏覽器預覽。

JavaScript:05 開發者技能與編輯器設定1

在VS Code代碼頁面使用console.log記錄資訊輸出到控制台。無需手動重新整理浏覽器頁面,自動輸出資料。

JavaScript:05 開發者技能與編輯器設定1

還可以通過安裝node.js和live server的npm包來實作。

在node.js官方網站上下載下傳安裝包。

JavaScript:05 開發者技能與編輯器設定1

node.js是在浏覽器之外運作JavaScript的一種工具。

在VS Code的終端視窗檢視node.js的版本。

JavaScript:05 開發者技能與編輯器設定1

在VS Code的終端視窗安裝live server。

JavaScript:05 開發者技能與編輯器設定1

在VS Code的終端視窗運作live-server。彈出浏覽器視窗。

JavaScript:05 開發者技能與編輯器設定1
JavaScript:05 開發者技能與編輯器設定1

057 Learning How to Code

本講學習如何正确學習編碼。

視訊加載中...

先看一些導緻沒有學好的原因。

JavaScript:05 開發者技能與編輯器設定1

1、學習沒有明确的目标。

2、隻是通過視訊學習,複制代碼,沒有思考這些代碼是如何工作的。

3、沒有通過做一些代碼挑戰或者記錄筆記來強化學習的内容。

4、沒有多練習編碼。

5、面對代碼的低效和不夠簡潔,很容易氣餒。

6、面對未知的東西,很快失去動力。

7、獨自悶頭學習,沒有交流。

8、完成課程後沒有自己獨立做些什麼。

如何正确的學習編碼,需要注意以下這些事情。

JavaScript:05 開發者技能與編輯器設定1

1、學習要明确目标。為了目标,要做出可行的時間計劃。

為什麼學習程式設計?為了換更好的工作還是為了改行?

可以想象學習是為了完成一個大項目為目标。

把需要學習的技能都羅列出來,按照順序一步一步去學習。

2、學習程式設計,不建議拷貝已有的代碼,要弄明白代碼的含義。

自己動手去輸入所有代碼,讓代碼文法加深印象。

3、多去做一些編碼挑戰和練習,來加強學習内容。

通過記筆記來學習和複習程式設計知識。

不要急于完成課程,確定學習内容掌握牢固。

JavaScript:05 開發者技能與編輯器設定1

4、課後,也要多練習編碼,找一些練習去實作,或者去看一些代碼是如何實作,嘗試着自己去實作。

5、一開始嘗試編碼,優先去實作基本功能,不要去追求完美簡潔的代碼編寫。

6、面對未知的領域不要害怕,要分析識别你所要編碼用到的知識,去補充學習或者去搜尋别人的經驗分享來快速了解。不要讓自己因為困難而卡住學習的進度,進而失去學習動力。

JavaScript:05 開發者技能與編輯器設定1

7、學習新知識也要分享,講給同樣感興趣的人,多交流經驗和心得體會。

8、讓自己去做一些項目,熟練編碼,遇到問題解決問題。

058 How to Think Like a Developer_ Become a Problem Solver!

本講主要學習如何像開發者那樣思考,成為解決問題的專家。

視訊加載中...

解決問題,不是修複編碼遇到的代碼問題或者代碼bug。

解決問題,需要靜下心來,運用邏輯思維來分析問題。

本講提供四步法來解決。

1、理清問題。針對要解決的需求,要問正确的問題,來理清需求。明确需求的細節,哪些是要考慮,哪些是要忽略。

JavaScript:05 開發者技能與編輯器設定1

2、拆分問題。實作全部的需求,先分解需求,把大問題分解成多個小問題來一個一個解決。這樣就有了一個要實作的任務清單。

JavaScript:05 開發者技能與編輯器設定1

3、研究實作。針對任務清單去依次研究如何實作每個小任務。當然,如果遇到困難,也要求助搜尋或其他網站去尋求解決方法。

JavaScript:05 開發者技能與編輯器設定1

4、寫僞代碼。使用程式設計語言的一些結構,将問題實作流程梳理出來。

JavaScript:05 開發者技能與編輯器設定1