I'm working on a React project that does not yet use a linter as part of the project. I want to avoid checking in eslint as part of the project so I'm considering installing eslint globally on my laptop. Here's the npm page for eslint:
https://www.npmjs.com/package/eslint-plugin-react
Per the documentation on this page:
"Install ESLint either locally or globally. (Note that locally, per project, is strongly preferred)"
Are there any downsides to installing eslint globally? As a matter of practice, a local project install is better practice. But I wasn't sure if there were any practical downsides that I should be aware of for installing ESLint globally.
Related
Is it possible to mark a project dependency as deprecated without removing it from the project.
So other developers don't use it in future
I have a project that was built on Material-UI V4 and have recently added Mui-V5 with the intention that all new work is built on V5. I'd like developers to see an IDE warning when they import components from the old dependency.
One thought I had is to use patch-package to modify Mui-V4 and set it as deprecated in package.json but this warning only shows on npm install.
I installed eslint in my react project to fix all the eslint errors. I fixed all the errors, however, I can't npm start the project. When I do that, I get this error, and some steps to uninstall all the eslint dependencies. I want to run the project with eslint dependencies.
Please let me know how to do this?
Error Message:
There might be a problem with the project dependency tree. It is
likely not a bug in Create React App, but something you need to fix
locally.
The react-scripts package provided by Create React App requires a
dependency:
"eslint": "^7.11.0"
Don't try to install it manually: your package manager does it
automatically. However, a different version of eslint was detected
higher up in the tree:
My guess would be that you installed eslint#v8 and since create-react-app doesn't support it yet (reference) it causes this error.
Downgrading to eslint v7 should fix it.
Create react app already comes bundled with eslint and by installing it in the project dependencies, you are in effect try to load in conflicting versions, you shouldn't need eslint inside of your own package.json.
HOWEVER
If you want to override eslint and start customising your react install you are more than welcome to eject (npm run eject), but bear in mind that ejecting your application will mean you will need to maintain dependencies going forwards.
You can read more about ejecting here - https://create-react-app.dev/docs/available-scripts/
I created a react project using npx create-react-app my-app --template typescript. And I found that somehow typescript-eslint is already enabled by default.
I checked the eslint config inside of the package.json
"eslintConfig": {
"extends": "react-app"
},
I thought in order for typescript-eslint to be enabled you would need either "extends": ["plugin:#typescript-eslint/recommended" in your package.json or .eslintrc. But in this case I cannot find either one of these in the codebase. I wonder how the eslint for typescript got enabled?
CRA is intended to be a one-stop shop for setting up your react app. This includes build configs, folder structures, and everything required to develop a react app with the best practices.
Whilst not really explicitly listed anywhere, CRA comes with a preconfigured linting experience using the eslint-config-react-app config.
On their main page, they mention:
Under the hood, we use webpack, Babel, ESLint, and other amazing projects to power your app. (emphasis mine)
It's also mentioned in places like the IDE experience, but in a "you should already know this is a thing" kind of way:
https://create-react-app.dev/docs/setting-up-your-editor/#displaying-lint-output-in-the-editor
For typescript projects, the CRA config ofc includes tooling from the #typescript-eslint project, as it is the standard for linting typescript code.
Without using this project, they would run into many issues attempting to lint typescript codebases (the biggest being that it wouldn't work at all).
The above docs contain information about how you can further configure your linting experience if you want.
Bootstrapped CRA 3.0 app and then ejected.
Inspecting my package.json.
Found multiple packages usages of which are not really clear to me.
"semver": "6.0.0"
Why do I need this? No usages found in config/* nor scripts/*. It seems like an artifact of react-scripts validation-like logic for related packages, so it looks like a piece of bloat in my application dependencies.
"react-app-polyfill": "^1.0.0"
Polyfills for IEs and etc.? OK, but why a separate package? It's frightening to me to use some unknown package on top of core-js or babel-polyfill. And again, no usages found in an initial code base.
P.S. I'm not asking what these packages are, I'm asking why do I see them being unused in ejected scripts
Update: react-app-polyfill/jsdom is used in Jest setup files
create-react-app uses a package named react-scripts which hides all the different packages it uses underneath.
When you eject an application, the dependencies used by react-scripts are copied over to your own package.json. But for some scripts like the eject, various sections are removed using babel annotation like #remove-on-eject-begin. The dependencies used in these sections persist even after you eject.
This is how you find packages like semver that are not used anywhere in your application code. In an unejected create react app, that package would be used for verifying the semantic versions before ejecting.
These are safe to remove now. But they would not be factored into the static bundle you are creating anyhow.
In variaous React documentation I see it being added as a prod dependency but I'm not understanding why. Shouldn't it be a devDependecy since SASS only gets compiled during development and when pushed to prod you are actually pushing the compiled CSS files?
Since it's required to do a production build, it should be in the production dependencies list imho.
In my experience, most of the time the project gets build afresh for production, so needs all the packages required to build from scratch.
A dev dependency might something like webpack-dev-server which isn't needed for a prod build, but clearly is used in development (assuming one is using it).
On the official NPM site of sass (linked also here: " Sould SASS be installed as a 'dependency' or as a 'devDependency? ") it is suggested to install it as development dependency (aside from installing it globally) so I believe that's the way to go.
Also, as it's suggested on official Node website, Babel should be installed as a development dependency and that's the package that, I believe, may be required to create a production build. Considering that I think that all packages that are not required during runtime of an application should be installed as development dependencies.