How to Detect Duplicate Code in a Project?

In many projects, you may encounter a situation where similar implementations are required in many components.

in many cases, functions or components with the same functions are directly copied and used, especially if the development time is very tight.

as duplicating code accumulated in the long-term makes issues and maintenance tasks complex, you may need to apply the same patches to many components in different places.

it also bloats your project with unnecessary many lines of code.

and makes a bad user experience when the user encounters different behaviors for similar components in your app.

in short, duplication of code affects the overall quality of the project

solution

we discussed the problem, now let's dip into the solution to solve it efficiency.

personally, I use an open-source project called jscpd

from the root of your project apply the following command

npx jscpd -p "src/**/*.js,ts,html"        

let's understand this command

first, I use `npx` so I don't need to install the package to use it, alternatively you can install the package globally `npm I -g jscpd` and the use it directly without npx `jscpd ...`

the argument `-p` or `--pattern` indicates the glob pattern to files where they potentially have duplications.

I suppose your code base is inside `src`, that way we avoid including node_modules folder in the process.

alternatively, you can exclude it from the pattern.

as you can see, I only interested in detecting duplication issues in js, ts, and HTML files,

but you can include all files like that `**/*.*`

you can control how jscpd perform the operation by extra arguments like

• “-k” refers to the minimum number of repetitions of tokens in the code tag
• “-l” refers to the minimum number of lines of code to be detected.

to make the code snipped only detected if it contains at least 20 tokens in 5 or more lines we can adjust or command a little bit

jscpd -p "src/**/*.js" -k 20 -l 5        

the execution result looks like this:

follow me and subscribe to developers talk newsletter to know more