When you're learning to code, it can be easy to pick up some nasty habits along the way. Here are some tips to avoid common bad habits, and the good habits to keep in mind.

當您學習編碼時，很容易在此過程中養成一些討厭的習慣。 這里有一些技巧，可以避免常見的不良習慣和要記住的良好習慣。

好習慣 (The good habits)

Let's start with the positive shall we? These are the best habits that often impress me when working with Junior Developers (and all developers for that matter).

讓我們從積極開始吧？ 這些是與初級開發人員(以及與此相關的所有開發人員)合作時經常給我留下深刻印象的最佳習慣。

經常提交/推送代碼 (Commit/Push code often )

Chances are you'll have come across terms like "Git", and "GitHub", "source control" whilst on your coding journey. If you haven't:

在編碼過程中，您很可能會遇到諸如“ Git”，“ GitHub”，“源代碼控制”之類的術語。 如果您還沒有：

1) Where have you been?!?

1)你去哪兒了？！？

2) You can learn about it here: https://www.freecodecamp.org/news/how-you-can-learn-git-and-github-while-youre-learning-to-code-7a592ea287ba/

2)您可以在這里了解它： https : //www.freecodecamp.org/news/how-you-can-learn-git-and-github-while-youre-learning-to-code-7a592ea287ba/

Source control is a marvellous thing. It's a backup of your code, allows you to track changes, and let's you quickly roll back when you have that "oh s***! everything is broken!" moment whilst coding.

源代碼管理是一件了不起的事情。 它是代碼的備份，可讓您跟蹤更改，讓您在遇到“哦，s ***！一切都壞了！”的情況下快速回滾。 編碼時。

Not to mention it makes life much, much easier when working as part of a team. I can't imagine working on code collaboratively without it - sharing code over email and slack?! *Quivers*.

更不用說它使工作變得更輕松，成為團隊成員。 如果沒有它，我無法想象協同工作代碼-通過電子郵件和閑暇共享代碼？ * 顫抖 *。

A good habit to have is to commit code often, even for your own side projects as practice. Personally I like to "check in" my code when I have a completed a small part of my project. For example, if I were creating a TODO list app, I would commit and push my code when I have added the 'new todo button', or when I've completed the 'checkbox functionality'.

一個好的習慣是經常提交代碼，即使是自己實踐的項目也是如此。 就個人而言，當我完成一小部分項目時，我喜歡“ 簽入 ”我的代碼。 例如，如果我正在創建TODO列表應用程序，則在添加“ 新的待辦事項按鈕”或完成“ 復選框功能”后 ，將提交并推送代碼。

There are no hard and fast rules as to when to check in code. Other good times to commit code are:

關于何時檢入代碼沒有嚴格的規定。 提交代碼的其他好時機是：

• If you are about to finish up for the day (see a very important rule below)
  如果您要完成一天的工作(請參閱以下非常重要的規則)
• Before you do a major refactor or code change
  在進行重大重構或代碼更改之前
• If there is a fire in the building (Just kidding, safety first)
  如果建筑物著火(開玩笑，安全第一)

There is only 1 important rule to follow when committing code.

提交代碼時，僅遵循1條重要規則。

The code must build successfully and the tests must pass

代碼必須成功構建并且測試必須通過

Does that count as 2 rules? Anyways, this is important. Something that is guaranteed to bring any development team to a halt is broken code. So before you commit your code, make sure the code builds and the tests pass!

那算作2條規則嗎？ 無論如何，這很重要。 可以保證使任何開發團隊停下來的都是斷碼。 因此，在提交代碼之前，請確保代碼已構建并且測試通過！

Lastly, make sure to use good commit messages. "Fixed bug" isn't as clear as "Fixed issue with 'save todo' button not calling onClick function correctly". This will not only be helpful for yourself but your teammates as well.

最后，請確保使用良好的提交消息 。 “已修復的錯誤”不如“已解決的“保存待辦事項”按鈕未正確調用onClick函數的問題”那么清晰。 這不僅對您自己有幫助，對您的隊友也有幫助。

對變量，函數和文件使用明確的命名 (Use clear naming for variables, functions, and files)

Ah naming. The one thing in web development that we all thought was easy, is sneakily difficult at times. Naming is important though, as it makes our code easier to read and understand.

啊，命名。 我們都認為很簡單的Web開發中的一件事有時很難做到。 但是命名很重要，因為它使我們的代碼更易于閱讀和理解。

When choosing a name for your variables, functions and files, try to make it as descriptive as possible. Why?

為變量，函數和文件選擇名稱時，請盡量使其具有描述性。 為什么？

• It makes it easy to quickly skim over code. If you see a method called getUsers() Without having to look at that method, you can be pretty sure that it's going to return a list of users.

  它使快速瀏覽代碼變得容易。 如果您看到一個名為getUsers()的方法而不必查看該方法，則可以確定它會返回用戶列表。

• Helps enforce separation of concerns. Oooh a fancy new term! Don't worry, this just means keeping related things together. For example in a Node.js app, if you have a /users endpoint and a /products endpoint, you might keep the users logic in the same file ( usersService.js for example ) and keep the products logic in another file. Wouldn't this make it easier to find things?

  幫助強制分離關注點。 哦，新名詞！ 不用擔心，這只是意味著將相關的東西放在一起。 例如，在Node.js應用程序中，如果您具有/users終結點和/products終結點，則可以將users邏輯保留在同一文件(例如usersService.js )中，并將products邏輯保留在另一個文件中。 這樣會不會更容易找到東西？

Here's a simple function which is badly named (as are the parameter names) can you guess what it does?

這是一個命名錯誤的簡單函數(參數名稱也是如此)，您能猜出它的作用嗎？

const function1 = (x, y) => {return x + y
}

This function could either add 2 numbers or concatenate 2 strings, but it's original intent is not clear. Let's say its intention was to add numbers, but another unsuspecting developer comes along and uses it to concatenate 2 strings. It might be ok for now, but later if we refactor this function to validate the numbers, then the code calling this function to concatenate strings will break. Oh no!

此函數可以添加2個數字或連接2個字符串，但是其原始意圖尚不清楚。 假設它的目的是添加數字，但是另一個毫不客氣的開發人員來了，并使用它來連接2個字符串。 現在可能還可以，但是稍后，如果我們重構此函數以驗證數字，則調用此函數連接字符串的代碼將中斷。 不好了！

Here's the function with better naming:

這是命名更好的函數：

const addNumbers = (num1, num2) => {return num1 + num2
}

Now it's a bit clearer on what the function does, and what the parameters are.

現在，您可以更清楚地了解函數的功能以及參數的含義。

練習調試 (Practice debugging )

Would you believe that web developer's spend just as much time (if not more) fixing bugs? Yes, there will be bugs. And the best way to identify and fix a bug is to debug the code. Debugging is the process of "stepping" through your code, line by line, until you discover something you didn't expect.

您是否相信Web開發人員花費相同的時間(如果不是更多的話)來修復錯誤？ 是的，會有錯誤。 識別和修復錯誤的最佳方法是調試代碼。 調試是逐行“逐步”執行代碼的過程，直到發現意料之外的內容。

Luckily for us web developers, many IDE's come with built in debuggers that makes this really easy (here's a VS Code guide to setting up debugging for different languages. For other IDE's you can check out Google https://code.visualstudio.com/docs/editor/debugging)

幸運的是，對于我們的Web開發人員而言，許多IDE都帶有內置調試器，這使得調試變得非常容易(這是VS Code指南，用于設置不同語言的調試。對于其他IDE，您可以查看Google https://code.visualstudio.com/ docs / editor / debugging )

So how do you effectively debug your code? Here's a few pointers:

那么如何有效地調試代碼？ 這里有一些提示：

• Replicate the issue - replicate the bug a few times so you understand exactly what it is that causes the bug

  復制問題 -復制錯誤幾次，以便您完全了解導致錯誤的原因

• Think - before you dive into the code and start aimlessly scavenging around, stop and think. Why would this be happening? What area's of the code are related to this?

  思考 -在深入研究代碼并開始漫無目的地進行清理之前，請停下來思考。 為什么會這樣呢？ 代碼的哪些區域與此相關？

• Investigate the code - once you've had an idea of what areas of the code this is likely to affect, start digging in. After reading over the code, you might spot the issue. Hurray! If not, time to get out debugger out.

  研究代碼 -一旦您知道這可能影響代碼的哪些區域，就可以開始研究。閱讀完代碼后，您可能會發現問題。 歡呼！ 如果不是，請抽空調試器。

• Debug - Fire up the debugger, and go through the code line-by-line. Keep an eye on variable values (and how they change) and which functions get called (and which don't). Are the correct branches in an if statement being called? Are events being triggered correctly? Are calculations being performed correctly?

  調試 -啟動調試器，然后逐行瀏覽代碼。 密切關注變量值(及其變化方式)以及調用哪些函數(哪些不調用)。 是否在if語句中調用了正確的分支？ 是否正確觸發了事件？ 計算是否正確執行？

編碼前計劃 (Plan before coding )

You have just awoken from a good nights sleep. You're eating breakfast and all of a sudden an awesome new side project idea comes to you. What a fantastic idea it is! A revelation!

您剛剛睡個好覺就醒了。 您正在吃早餐，突然之間出現了一個很棒的新項目計劃。 這是一個多么奇妙的主意！ 一個啟示！

You burst out of your chair towards your laptop, cornflakes flying everywhere, and start frantically coding. (Or is this just me? OK moving swiftly along...)

您從椅子上沖出手提電腦，玉米片四處飛揚，開始瘋狂地編碼。 (或者這就是我嗎？可以快速移動...)

While it is often tempting to jump straight into your IDE and start coding, a bit of planning can go a long way.

雖然通常很想直接進入您的IDE并開始編碼，但是進行一些規劃可能會很長的路要走。

• Reduces the amount of "wasted" code
  減少“浪費”代碼的數量
• Reduces code changes
  減少代碼更改
• Gives you solid goals to work towards
  為您制定堅定的目標
• It's an impressive skill for junior developers to have - it shows your critical thinking!
  對于初級開發人員而言，這是一項令人印象深刻的技能-它顯示了您的批判性思維！

I won't go into too much detail here, as I've written a more comprehensive article on this topic here: How Developers Think: A Walkthrough of the Planning and Design Behind a Simple Web App

我將在這里不再贅述，因為我在這里寫了一個更全面的文章： 開發人員的想法：簡單Web應用程序背后的規劃和設計演練

Here's a quick summary from the above article for now:

這里是上述文章的快速摘要：

• "What does it do?" - write out the features you want your app to have

  “ 它是做什么的？ ”-寫出您希望應用程序具有的功能

• "What does it look like?" - make a quick sketch or wireframe with what your app should look like

  “ 看起來像什么？ ”-用您的應用程序外觀快速繪制草圖或線框

• "How do I position and style the elements?" - once you have your wireframes, start thinking about how you will position everything on the page

  “ 如何定位和設置元素樣式？ ”-一旦有了線框，就開始考慮如何將所有內容放置在頁面上

• "How does it behave?" - next, start thinking about how your app behaves. Thinking about the features, and what happens when the user clicks and action

  “ 它的行為方式？ ”-接下來，開始考慮您的應用程序的行為方式。 考慮功能，以及用戶單擊并執行操作時會發生什么

• "What will my code look like?" - with your behaviours and features in mind, start planning your code. What components will you need? will you need event handlers? state objects?

  “ 我的代碼將是什么樣？ ”-考慮到您的行為和功能，開始計劃代碼。 您需要什么組件？ 您需要事件處理程序嗎？ 狀態對象？

• "What do I need to test? And what can go wrong?" - think about the tests, edge cases and the parts of your code that could go wrong

  “ 我需要測試什么？什么會出錯？ ”-考慮測試，邊緣情況以及代碼中可能出錯的部分

不太好的習慣 (The not so good habits)

Now let's look at some of not so good habits that are easy to pick up. If you do some of these now, don't panic. We all do at some point! With some practice you can overcome them - and I'll give you some pointers on how to do this.

現在，讓我們看看一些不太容易養成的好習慣。 如果您現在執行其中一些操作，請不要驚慌。 我們都在某個時候做！ 通過一些練習，您可以克服它們-我將為您提供一些指導。

盲目復制和粘貼代碼 (Blindly copying and pasting code)

Put your hand up if you've ever encountered an issue or got stuck while coding? *raises hand*. Obviously, we hit problems all the time whilst coding. It's part of the game and it's our job to figure out how to overcome these problems.

如果在編碼時遇到問題或卡住了，請舉起手來嗎？ * 舉手*。 顯然，我們在編碼時總是遇到問題。 這是游戲的一部分，弄清楚如何克服這些問題是我們的工作。

Most of the time we resort to using Google, StackOverflow, or similar in search of answers to our problems. Now, there is nothing wrong with this approach - arguably, it should be encouraged as it's one the best/quickest way for a developer to solve a problem themselves.

大多數時候，我們會使用Google，StackOverflow或類似工具來尋找問題的答案。 現在，這種方法沒有什么問題-可以說，應該鼓勵使用這種方法，因為它是開發人員自己解決問題的最佳/最快方法之一。

The problem is, when we copy/paste code blindly without understanding it.

問題是，當我們盲目地復制/粘貼代碼而不理解它時。

But if it works, what's the problem?!

但是，如果有效，出了什么問題？

A valid point. Here's the reasons why this can cause issues:

一個有效點。 這可能導致問題的原因如下：

• What happens when the code has to be changed? It'll be difficult to change code we don't understand
  當必須更改代碼時會發生什么？ 更改我們不理解的代碼將很困難
• If we don't understand the code, how can we be sure it truly solves the problem?
  如果我們不理解代碼，我們如何確定它真正解決了問題？
• Can we be sure it doesn't affect other parts of the codebase in a negative way?
  我們可以確定它不會以負面方式影響代碼庫的其他部分嗎？

So, how can we avoid this?

那么，如何避免這種情況呢？

• Reading - read through it line by line, and take the time to understand the code

  閱讀 -逐行閱讀，并花一些時間來理解代碼

• Type - type it out instead of copying and pasting. This will force you can read/analyse each line as you type

  鍵入-鍵入而不是復制和粘貼。 這將迫使您在鍵入時可以讀取/分析每一行

There is nothing wrong with copying and pasting, as long as we understand exactly what the code does. If a senior developer is code reviewing our work, and we can't explain what is happening because the code was copy/pasted, that won't look too good.

只要我們完全了解代碼的作用，復制和粘貼就沒有錯。 如果高級開發人員正在代碼審查我們的工作，并且由于代碼已被復制/粘貼而無法解釋正在發生的事情，那么看起來就不會太好。

不寫測試 (Not writing tests)

This is arguably the worst habit that can be picked up when learning to code. A lot of tutorials walk us through the "happy path" of creating an app, which makes it easy to neglect the test writing. Why are test's so important?

可以說，這是學習編碼時最容易養成的最壞習慣。 許多教程為我們提供了創建應用程序的“ 快樂之路 ”，從而可以輕松忽略測試編寫。 為什么測試如此重要？

• Test's prove your code works. Nobody can argue about functionality working if the test passes!

  測試證明您的代碼有效 。 如果測試通過，沒有人會爭論功能是否正常工作！

• Makes it easy to check that new features haven't broken anything. While coding, run your tests regularly. A few tests broken? You know early in the development process where stuff went wrong. As opposed to, finding out tomorrow when you come across it by accident

  輕松檢查新功能是否完好無損 。 編碼時，請定期運行測試。 幾項測試壞了？ 您知道在開發過程的早期哪里出了問題。 與之相反，發現偶然遇到的明天

• A seat belt for refactoring. Write your code. Write your tests. Refactor your code. Run the tests. Tests pass? Everything still works, happy days! Now try changing your code without having a suite of tests to run. How can you prove everything works as it should?

  重構用安全帶。 編寫您的代碼。 編寫測試。 重構您的代碼。 運行測試。 測試通過了嗎？ 一切仍然正常，快樂的日子！ 現在嘗試更改代碼，而無需運行一組測試。 您如何證明一切正常？

So make sure to test your code. You don't have to test things like small side projects all the time, but it's good to practice now an again. When you get a job, you'll be aiming to have test coverage for most of your functionality and features. Practice those tests!

因此，請確保測試您的代碼。 您不必一直測試小型項目，但是現在再次練習是個好習慣。 找工作時，您的目標是要針對大多數功能和特性進行測試。 練習那些測試！

There are many great tutorials on how to test your code, depending on your current projects and tech stack, try Googling "testing with {insert language}" or "How to test {insert language} apps". Heres a good overview of testing JavaScript.

根據您當前的項目和技術堆棧，有很多很棒的教程介紹如何測試代碼，請嘗試使用Google搜索“使用{insert language}測試”或“如何測試{insert language}應用程序”。 這里很好地概述了測試JavaScript的方法 。

遺漏文檔 (Leaving out documentation)

Documentation. The boring "red tape" that comes with all projects. As someone once said:

文檔。 所有項目附帶的無聊的“繁文tape節”。 正如有人曾經說過的：

All developers hate writing it, but all developers want it

所有開發人員都討厭編寫它，但是所有開發人員都希望編寫它

Which is true. Have you ever returned to an old side project and forgotten what it did? How much harder would it be if you were trying to use a third party library and there was no documentation to explain how it worked? This becomes especially more apparent when working in a large product company. What if another team needs to integrate with your code, but is unsure of the API?

沒錯 您是否曾經回到過一個舊的項目并且忘記了它的工作？ 如果您嘗試使用第三方庫，而沒有文檔說明它的工作原理，那么要付出多少努力？ 在大型產品公司工作時，這一點尤其明顯。 如果另一個團隊需要與您的代碼集成，但不確定API怎么辦？

It's important stuff, so here's some tips to practice:

這是很重要的東西，因此這里有一些實踐技巧：

• README's - GitHub lets you add a readme to your project. This is the perfect place to store documentation for the project, as it's easy to find
  自述文件-GitHub允許您向項目添加自述文件。 這是存儲項目文檔的理想場所，因為很容易找到
• Include what the app does and how to run it - This gives the read a good place to start
  包括應用程序的功能以及運行方式-這為閱讀提供了一個很好的起點
• Explain other "important things" - such as complicated logic, third party libraries and API's, or configuration settings
  解釋其他“重要事項”-例如復雜的邏輯，第三方庫和API或配置設置

---

---

謝謝閱讀！ 想要更多類似的文章嗎？ (Thanks for reading! Want more articles like this?)

Hopefully this has given you an insight into one creating good coding habits. If you'd like to be updated when I release more articles like this, feel free to join the mailing list over at chrisblakely.dev! Or reach me over at Twitter if you fancy a chat :)

希望這可以使您深入了解如何養成良好的編碼習慣。 如果您想在我發布更多此類文章時進行更新，請隨時通過chrisblakely.dev加入郵件列表！ 或者，如果您喜歡聊天，請通過Twitter與我聯系:)

翻譯自: https://www.freecodecamp.org/news/good-habits-to-have-as-an-aspiring-junior-developer-and-those-to-avoid/