{"id":1190,"date":"2016-07-29T11:48:50","date_gmt":"2016-07-29T09:48:50","guid":{"rendered":"https:\/\/blog.mi.hdm-stuttgart.de\/?p=1190"},"modified":"2023-06-07T15:16:30","modified_gmt":"2023-06-07T13:16:30","slug":"test-driven-development-part-iv","status":"publish","type":"post","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2016\/07\/29\/test-driven-development-part-iv\/","title":{"rendered":"Test Driven Development Part IV"},"content":{"rendered":"

\"head\"
\n[written by Roman Kollatschny and Matthias Schmidt]<\/em><\/p>\n

Welcome back to our fourth and final post in our series. This time we want to deal with code style and code quality to optimize coding on additional ways.<\/p>\n

<\/p>\n

You\u2019re new? Hop to the first<\/a>, second<\/a> or third<\/a> post so you don\u2019t miss anything. \ud83d\ude42<\/p>\n

General<\/h1>\n

After three articles about test driven development, we want to have a look at code style and code quality tools for node.js. There are various tools that can help you keep your code quality up, today we want to have a closer look at one of this tools, ESLint<\/a>.<\/p>\n

ESLint is an open source linter. In general, a linter is a tool, that analyses your code for potential errors without executing it. ESLint is also able to check your code against predefined code style guidelines and report you the errors and problems.<\/p>\n

How to use<\/h1>\n

It\u2019s surprisingly easy to use ESLint.<\/p>\n

To setup a default configuration file for ESLint it\u2019s only necessary to execute eslint --init<\/code> inside the root of your project structure. After that, the created configuration file can be edited to check for desired rules<\/a>. Rules define what\u2019s being checked and which code constructs lead to errors.<\/p>\n

\"eslint-init\"<\/p>\n

When configuring ESLint, you can choose between three different methods to create the configuration file.
\nYou can either choose the simplest way and answer some questions about your code so that ESLint chooses the right rules for you. It\u2019s also possible to simply load a shared guideline from large companies like Google or airbnb which provide some of their rules. The third method automatically inspects your files to choose the right and most fitting rules for you.<\/p>\n

\"eslint-init2\"<\/p>\n

Running the application is as easy as doing the configuration. Simply run eslint <path\/to\/files><\/code> to check a whole directory or eslint <filename.js><\/code> to test a single file. This will result in something like this:<\/p>\n

\"eslint-scan\"<\/p>\n

ESLint now shows us a bunch of potentional errors that it detected in our code. The errors are always displayed with their line number and character position where they appear. Besides a lot of system specific line breaking errors, there are also some errors that would let crash our application if executed.<\/p>\n

It shows us e.g. that we defined a variable named \u2018Hello\u2019 in line 4 but it\u2019s never used in our code, or that we want to access a variable \u2018hello\u2019 in line 15, which isn\u2019t defined. We get also informed of missing semicolons, spaces and other errors.<\/p>\n

To fix these errors, we normally have to go back to our code and fix the errors one by one. Fortunately ESLint allows us to fix errors automatically. Various simple and clear problems can be fixed by executing eslint <path\/to\/files> --fix<\/code>. It fixes a lot of errors and shows all remaining errors that couldn\u2019t be fixed.<\/p>\n

\"eslint-fix\"<\/p>\n

The remaining errors which ESLint can\u2019t handle itself have to be solved manually. After they\u2019re fixed ESLint prints no further warnings or errors when linting our code again.<\/p>\n

\"eslint-scan2\"<\/p>\n

At last we want to look at the code we used for this example. It is from our second<\/a> article. (For demonstration purposes, we added some more errors \ud83d\ude09 )<\/p>\n

\"eslint-compare\"<\/p>\n

The code on the left is our inital code that contains 25 errors. They\u2019re reported by ESLint. After using the –fix<\/em> parameter the code is changed so it\u2019s like the middle code snippet. 22 errors could be fixed automatically. The remaining 3 errors were fixed manually to obtain the code on the right side – without any error.
\nThree easy steps to improve the visual and code quality.<\/p>\n

Conclusion<\/h1>\n

As we come to an end with this series we want to give you some final words about what we did, what we liked and what\u2019s problematic.<\/p>\n

We think that test driven development is a really nice approach on developing code but it has its downside. Since it differs fundamental from normal<\/em> coding it\u2019s a challenge to force yourself to code that way. In the beginning it may need more time to code the same things by using tdd so it\u2019s necessary to take your time to get cool with it. One of the biggest problems is that it personally feels so much slower than coding normal. This may be only a feeling and you may code much faster after some time of working that way and so we finally recommend to test tdd to everyone. It shows another way of developing that can revolutionize your dealing with errors.<\/p>\n

Linting tools like ESLint are an easy way to improve your code quality and style. We recommend using tools for that because it\u2019s easy to use, it can help you a lot and it doesn\u2019t really have any downsides. You can install and configure it within a few minutes and don’t have to fear it will break your code.<\/p>\n

We hope you\u2019ve enjoyed our small guides and introductions and would be happy if you tried some things by yourself.<\/p>\n","protected":false},"excerpt":{"rendered":"

[written by Roman Kollatschny and Matthias Schmidt] Welcome back to our fourth and final post in our series. This time we want to deal with code style and code quality to optimize coding on additional ways.<\/p>\n","protected":false},"author":21,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1,651,2,657],"tags":[25,23],"ppma_author":[666],"class_list":["post-1190","post","type-post","status-publish","format-standard","hentry","category-allgemein","category-system-designs","category-system-engineering","category-teaching-and-learning","tag-nodejs","tag-tdd"],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":556,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2016\/05\/27\/test-driven-development-with-node-js\/","url_meta":{"origin":1190,"position":0},"title":"Test Driven Development with Node.js","author":"Roman Kollatschny","date":"27. May 2016","format":false,"excerpt":"Test-Driven Development with Mocha and Chai in Node.js","rel":"","context":"In "Rich Media Systems"","block_context":{"text":"Rich Media Systems","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/category\/interactive-media\/rich-media-systems\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":632,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2016\/07\/26\/test-driven-development-part-iii\/","url_meta":{"origin":1190,"position":1},"title":"Test Driven Development Part III","author":"Matthias Schmidt","date":"26. July 2016","format":false,"excerpt":"[written by Roman Kollatschny and Matthias Schmidt] Uhwe, hello and welcome back to the third of our posts in this series. Today we want to show you additional features and tipps on developing a node.js web application test driven. As stated in the last article we use Mocha.js and Chai.js\u2026","rel":"","context":"In "System Designs"","block_context":{"text":"System Designs","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/category\/system-designs\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1876,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2017\/03\/03\/building-an-hdm-alexa-skill-part-3\/","url_meta":{"origin":1190,"position":2},"title":"Building an HdM Alexa Skill \u2013 Part 3","author":"je052","date":"3. March 2017","format":false,"excerpt":"We present our own HdM Alexa Skill and share the experience we gained throughout this project. This time: Developing the skill using Test-driven Development.","rel":"","context":"In "Student Projects"","block_context":{"text":"Student Projects","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/category\/student-projects\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2017\/02\/test_coverage.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2017\/02\/test_coverage.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2017\/02\/test_coverage.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2017\/02\/test_coverage.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2017\/02\/test_coverage.png?resize=1050%2C600&ssl=1 3x"},"classes":[]},{"id":623,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2016\/06\/10\/test-driven-development-part-ii\/","url_meta":{"origin":1190,"position":3},"title":"Test Driven Development Part II","author":"Matthias Schmidt","date":"10. June 2016","format":false,"excerpt":"[written by Roman Kollatschny and Matthias Schmidt] Welcome back to the second article in our Node.js development series. Today, we are going to adapt the TDD cycle in an helloWorld example application. If you missed our first article about the principles of TDD, you can find it here. In the\u2026","rel":"","context":"In "System Designs"","block_context":{"text":"System Designs","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/category\/system-designs\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":28408,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2026\/02\/18\/evaluation-of-ai-driven-software-testing-methods-applied-to-a-microservice\/","url_meta":{"origin":1190,"position":4},"title":"Evaluation of AI-Driven Software Testing Methods Applied to a Microservice","author":"Paula Schl\u00f6termann","date":"18. February 2026","format":false,"excerpt":"Abstract- In traditional Software Development Lifecycles, testing is often performed in its final phases, increasing defect resolution costs and project risks. Recent advances in Artificial Intelligence (AI) have the potential to accelerate development workflows and reduce manual effort. However, the actual capabilities of AI-driven testing tools remain unclear, particularly in\u2026","rel":"","context":"In "Allgemein"","block_context":{"text":"Allgemein","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/category\/allgemein\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2026\/02\/grafik.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2026\/02\/grafik.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2026\/02\/grafik.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2026\/02\/grafik.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2026\/02\/grafik.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2026\/02\/grafik.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":1807,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2017\/02\/16\/building-a-hdm-alexa-skill-part-1\/","url_meta":{"origin":1190,"position":5},"title":"Building a HdM Alexa Skill – Part 1","author":"Eric Schmidt","date":"16. February 2017","format":false,"excerpt":"We present our own HdM Alexa Skill and share the experience we gained throughout this project.","rel":"","context":"In "Cloud Technologies"","block_context":{"text":"Cloud Technologies","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/category\/scalable-systems\/cloud-technologies\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2017\/02\/chatbot.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2017\/02\/chatbot.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2017\/02\/chatbot.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2017\/02\/chatbot.jpg?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2017\/02\/chatbot.jpg?resize=1050%2C600&ssl=1 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"authors":[{"term_id":666,"user_id":21,"is_guest":0,"slug":"ms435","display_name":"Matthias Schmidt","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/06dcaaca4cf8e3dca153ac8a8454e5a5b76fb2a980d15e094b9b11bf5639ce53?s=96&d=mm&r=g","0":null,"1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":""}],"_links":{"self":[{"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/posts\/1190","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/comments?post=1190"}],"version-history":[{"count":6,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/posts\/1190\/revisions"}],"predecessor-version":[{"id":24696,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/posts\/1190\/revisions\/24696"}],"wp:attachment":[{"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/media?parent=1190"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/categories?post=1190"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/tags?post=1190"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/ppma_author?post=1190"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}