How to find dead code in a large react project?
In order to refactor a client-side project, i'm looking for a safe way to find (and delete) unused code.
What tools do you use to find unused/dead code in large react projects? Our product has been in development for some years, and it is getting very hard to manually detect code that is no longer in use. We do however try to delete as much unused code as possible.
Suggestions for general strategies/techniques (other than specific tools) are also appreciated.
Thank you
javascript reactjs refactoring dead-code
asked Jan 11 at 14:47
SIn SimSIn Sim
112
add a comment |
In order to refactor a client-side project, i'm looking for a safe way to find (and delete) unused code.
What tools do you use to find unused/dead code in large react projects? Our product has been in development for some years, and it is getting very hard to manually detect code that is no longer in use. We do however try to delete as much unused code as possible.
Suggestions for general strategies/techniques (other than specific tools) are also appreciated.
Thank you
javascript reactjs refactoring dead-code
asked Jan 11 at 14:47
SIn SimSIn Sim
112
No, im looking for a way to find unused and non-imported code. Thank you for your answer.
– SIn Sim
Jan 11 at 14:58
add a comment |
In order to refactor a client-side project, i'm looking for a safe way to find (and delete) unused code.
What tools do you use to find unused/dead code in large react projects? Our product has been in development for some years, and it is getting very hard to manually detect code that is no longer in use. We do however try to delete as much unused code as possible.
Suggestions for general strategies/techniques (other than specific tools) are also appreciated.
Thank you
javascript reactjs refactoring dead-code
asked Jan 11 at 14:47
SIn SimSIn Sim
112
In order to refactor a client-side project, i'm looking for a safe way to find (and delete) unused code.
What tools do you use to find unused/dead code in large react projects? Our product has been in development for some years, and it is getting very hard to manually detect code that is no longer in use. We do however try to delete as much unused code as possible.
Suggestions for general strategies/techniques (other than specific tools) are also appreciated.
Thank you
javascript reactjs refactoring dead-code
javascript reactjs refactoring dead-code
asked Jan 11 at 14:47
SIn SimSIn Sim
112
asked Jan 11 at 14:47
SIn SimSIn Sim
112
edited Jan 11 at 14:55
SIn Sim
asked Jan 11 at 14:47
SIn SimSIn Sim
112
asked Jan 11 at 14:47
SIn SimSIn Sim
112
asked Jan 11 at 14:47
SIn SimSIn Sim
112
112
No, im looking for a way to find unused and non-imported code. Thank you for your answer.
– SIn Sim
Jan 11 at 14:58
add a comment |
No, im looking for a way to find unused and non-imported code. Thank you for your answer.
– SIn Sim
Jan 11 at 14:58
No, im looking for a way to find unused and non-imported code. Thank you for your answer.
– SIn Sim
Jan 11 at 14:58
No, im looking for a way to find unused and non-imported code. Thank you for your answer.
– SIn Sim
Jan 11 at 14:58
add a comment |
2 Answers
2
active
oldest
votes
First of all,
very good question, in large project coders usually try many lines of code test and at the end of result, hard to find the unused code.
There is two possible that must be work for you - i usually do whenever i need to remove and reduce the unused code into my project.
1st way WebStorm IDE:
If you're using the web-storm IDE for JS development or React JS / React Native or Vue js etc it's tell us and indicate us alote of mention with different color or red warning as unused code inside the editor
but it's not works in your particular scenario there is another way to remove the unused code .
2nd Way unrequited Library:
The second way to remove the unused code inside the project is Unrequited library you can visit here : unrequited github
another library called depcheck under NPM & github here
Just follow their appropriate method - how to use them you will fix this unused issue easily
Hopefully that helps you
answered Jan 11 at 15:29
Muhammad Umair GhufranMuhammad Umair Ghufran
916
add a comment |
My approach is an intensive use of ESlint and make it run both on IDE ad before every push.
It points out unused variables, methods, imports and so on.
Webpack (which has too nice plugins for dead code detection) take care about avoiding to bundle unimported code.
answered Jan 11 at 15:44
Mosè RaguzziniMosè Raguzzini
3,8771122
Eslint cannot point out files are not being imported I think
– duc mai
Jan 11 at 22:01
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54148788%2fhow-to-find-dead-code-in-a-large-react-project%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
First of all,
very good question, in large project coders usually try many lines of code test and at the end of result, hard to find the unused code.
There is two possible that must be work for you - i usually do whenever i need to remove and reduce the unused code into my project.
1st way WebStorm IDE:
If you're using the web-storm IDE for JS development or React JS / React Native or Vue js etc it's tell us and indicate us alote of mention with different color or red warning as unused code inside the editor
but it's not works in your particular scenario there is another way to remove the unused code .
2nd Way unrequited Library:
The second way to remove the unused code inside the project is Unrequited library you can visit here : unrequited github
another library called depcheck under NPM & github here
Just follow their appropriate method - how to use them you will fix this unused issue easily
Hopefully that helps you
answered Jan 11 at 15:29
Muhammad Umair GhufranMuhammad Umair Ghufran
916
add a comment |
First of all,
very good question, in large project coders usually try many lines of code test and at the end of result, hard to find the unused code.
There is two possible that must be work for you - i usually do whenever i need to remove and reduce the unused code into my project.
1st way WebStorm IDE:
If you're using the web-storm IDE for JS development or React JS / React Native or Vue js etc it's tell us and indicate us alote of mention with different color or red warning as unused code inside the editor
but it's not works in your particular scenario there is another way to remove the unused code .
2nd Way unrequited Library:
The second way to remove the unused code inside the project is Unrequited library you can visit here : unrequited github
another library called depcheck under NPM & github here
Just follow their appropriate method - how to use them you will fix this unused issue easily
Hopefully that helps you
answered Jan 11 at 15:29
Muhammad Umair GhufranMuhammad Umair Ghufran
916
add a comment |
First of all,
very good question, in large project coders usually try many lines of code test and at the end of result, hard to find the unused code.
There is two possible that must be work for you - i usually do whenever i need to remove and reduce the unused code into my project.
1st way WebStorm IDE:
If you're using the web-storm IDE for JS development or React JS / React Native or Vue js etc it's tell us and indicate us alote of mention with different color or red warning as unused code inside the editor
but it's not works in your particular scenario there is another way to remove the unused code .
2nd Way unrequited Library:
The second way to remove the unused code inside the project is Unrequited library you can visit here : unrequited github
another library called depcheck under NPM & github here
Just follow their appropriate method - how to use them you will fix this unused issue easily
Hopefully that helps you
answered Jan 11 at 15:29
Muhammad Umair GhufranMuhammad Umair Ghufran
916
First of all,
very good question, in large project coders usually try many lines of code test and at the end of result, hard to find the unused code.
There is two possible that must be work for you - i usually do whenever i need to remove and reduce the unused code into my project.
1st way WebStorm IDE:
If you're using the web-storm IDE for JS development or React JS / React Native or Vue js etc it's tell us and indicate us alote of mention with different color or red warning as unused code inside the editor
but it's not works in your particular scenario there is another way to remove the unused code .
2nd Way unrequited Library:
The second way to remove the unused code inside the project is Unrequited library you can visit here : unrequited github
another library called depcheck under NPM & github here
Just follow their appropriate method - how to use them you will fix this unused issue easily
Hopefully that helps you
answered Jan 11 at 15:29
Muhammad Umair GhufranMuhammad Umair Ghufran
916
answered Jan 11 at 15:29
Muhammad Umair GhufranMuhammad Umair Ghufran
916
answered Jan 11 at 15:29
Muhammad Umair GhufranMuhammad Umair Ghufran
916
answered Jan 11 at 15:29
Muhammad Umair GhufranMuhammad Umair Ghufran
916
916
add a comment |
add a comment |
My approach is an intensive use of ESlint and make it run both on IDE ad before every push.
It points out unused variables, methods, imports and so on.
Webpack (which has too nice plugins for dead code detection) take care about avoiding to bundle unimported code.
answered Jan 11 at 15:44
Mosè RaguzziniMosè Raguzzini
3,8771122
Eslint cannot point out files are not being imported I think
– duc mai
Jan 11 at 22:01
add a comment |
My approach is an intensive use of ESlint and make it run both on IDE ad before every push.
It points out unused variables, methods, imports and so on.
Webpack (which has too nice plugins for dead code detection) take care about avoiding to bundle unimported code.
answered Jan 11 at 15:44
Mosè RaguzziniMosè Raguzzini
3,8771122
Eslint cannot point out files are not being imported I think
– duc mai
Jan 11 at 22:01
add a comment |
My approach is an intensive use of ESlint and make it run both on IDE ad before every push.
It points out unused variables, methods, imports and so on.
Webpack (which has too nice plugins for dead code detection) take care about avoiding to bundle unimported code.
answered Jan 11 at 15:44
Mosè RaguzziniMosè Raguzzini
3,8771122
My approach is an intensive use of ESlint and make it run both on IDE ad before every push.
It points out unused variables, methods, imports and so on.
Webpack (which has too nice plugins for dead code detection) take care about avoiding to bundle unimported code.
answered Jan 11 at 15:44
Mosè RaguzziniMosè Raguzzini
3,8771122
answered Jan 11 at 15:44
Mosè RaguzziniMosè Raguzzini
3,8771122
answered Jan 11 at 15:44
Mosè RaguzziniMosè Raguzzini
3,8771122
answered Jan 11 at 15:44
Mosè RaguzziniMosè Raguzzini
3,8771122
3,8771122
Eslint cannot point out files are not being imported I think
– duc mai
Jan 11 at 22:01
add a comment |
Eslint cannot point out files are not being imported I think
– duc mai
Jan 11 at 22:01
Eslint cannot point out files are not being imported I think
– duc mai
Jan 11 at 22:01
Eslint cannot point out files are not being imported I think
– duc mai
Jan 11 at 22:01
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54148788%2fhow-to-find-dead-code-in-a-large-react-project%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
No, im looking for a way to find unused and non-imported code. Thank you for your answer.
– SIn Sim
Jan 11 at 14:58