DEV Community

Boris Shulyak
Boris Shulyak

Posted on

1

๐Ÿค–CMD+C๐Ÿค–CMD+V? ๐Ÿ›‘ Never More!

๐Ÿ‘จโ€๐Ÿ’ป If you are a FullStackOverflow engineer, this article is for you!
๐Ÿš€ If you are the โ€œI will implement this feature for 10 minutesโ€, this article is for you!
๐Ÿงน If you are a Software Engineer that loves refactoring and clean code, this article is especially for you!
This article is about one stage of code refactoring!

Letโ€™s imagine you have started code refactoring โ€ฆ

You have covered your code with eslint, isolated the bad code, logged it, written the wrapper with your clean code, and covered it with tests. Nicely done!

You have merged it - everything works fine! After that, You removed the bad code, and looks like your refactoring has successfully finished.

But โ€ฆ after a few weeks, you open another part of your project, or even another project (in case of monorepo), and Surprise - you have met your old friend, Mr. The Same Bad Code. ๐Ÿ˜ตโ€๐Ÿ’ซ A terrible story, isn't it?

In such a situation, there is no need to despair and slam the lid of the laptop! Justโ€ฆ

Integrate the copy-paste analyzer in your CI/CD process

Have you ever heard about such tools? No? Okay, Iโ€™m going to introduce the one.

๐Ÿ”Ž Introducing jscpd! Let's dive in and start using it!

You could just write the following commands and get the profit:

npm install -g jscpd
npx jscpd /path/to/source
Enter fullscreen mode Exit fullscreen mode

What about the abilities?

Available reporters:

  • console - report about clones to console;
  • consoleFull - report about clones to console with blocks of code;
  • json - output jscpd-report.json file with clones report in json format;
  • xml - output jscpd-report.xml file with clones report in xml format;
  • csv - output jscpd-report.csv file with clones report in csv format;
  • markdown - output jscpd-report.md file with clones report in markdown format;
  • html - generate html report to html/ folder;
  • verbose - output a lot of debug information to console;

You could easily integrate it in your CI/CD tool and be happy to remove the copy-paste in your project!

You could event generate badge for your project to let your colleagues not forget about the terrible copy-paste numbers in your code base. Just use the badge reporter!

Wanna to integrate it as a code? No problems, the jscpd also provide an JS API to use it.
See an example:

import {IClone} from '@jscpd/core';
import {jscpd} from 'jscpd';
(async () => {
  const clones: IClone[] = await jscpd(['', '', __dirname + '/../fixtures', '-m', 'weak', '--silent']);
  console.log(clones);
})();
Enter fullscreen mode Exit fullscreen mode

What will you get as a result

HTML Reports

HTML Reports description

Console Reports

Console Reports description

Markdown Reports

Markdown Reports description

Badge Reports

Badge Reports description

Conclusion

๐ŸŽ‰ In conclusion, code refactoring is a crucial part of software development, and it's essential to ensure that the bad code that was removed in the process doesn't creep back into the codebase. Integrating the copy-paste analyzer tool, jscpd, in your CI/CD process is an effective way to prevent this from happening. With jscpd, you can easily generate reports in various formats, including HTML, console, markdown, and even a badge report to keep track of your project's copy-paste numbers. So, don't let copy-paste errors ruin your project's code quality, and start using jscpd today! ๐Ÿš€

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

Cloudinary image

Video API: manage, encode, and optimize for any device, channel or network condition. Deliver branded video experiences in minutes and get deep engagement insights.

Learn more

๐Ÿ‘‹ Kindness is contagious

Please leave a โค๏ธ or a friendly comment on this post if you found it helpful!

Okay