I am using create-react-app to start a new react project, and I want to use my own eslint configuration file, extending from the react-app one.
It seems like my .eslintrc file is not used at all, even though I placed it in the root folder. In my output terminal I can see the file is loaded from the node_modules folder:
.../node_modules/eslint/lib/api.js
Am I missing something, or should I save the file somewhere else?
Thanks.
True, those files are not used by create-react-app.
It is still possible to disable ESLint rules using comments in the JavaScript files:
// eslint-disable-next-line react/style-prop-object
For more information see: http://eslint.org/docs/user-guide/configuring.html#configuring-rules
According to the documentation, now it is available by setting the EXTEND_ESLINT env variable. But the feature is experimental right now.
See the Experimental: Extending the ESLint config section.
Related
I've a react app created using create-react-app. I recently saw some article saying to add few loaders to webpack config file. But I've no idea where to find the webpack.config.js file inside a react project.
Really appreciate any ideas or suggestions.
Webpack config is not available in CRA. If you want to get one, you have to do an eject (https://create-react-app.dev/docs/available-scripts/), but if you don't need to make eject, or you don't wanna do this, you can use the library which is the wrapper of CRA, for example: CRACO or rewrite
I have a an .eslintrc.json file whose rules my code is obeying. Except the "no-unused-vars" rule.
It works in my editor, that is, the unused vars are no longer highlighted red, but when I run the app in the console the console throws the warning. It's like they're using two separate configs or something. It's a create-react-app.
Stop your app, run rm -rf node_modules/.cache/eslint-loader, then start it again. If that doesn't work then your editor is probably using a different eslint config than your app, but it's hard to say without looking at your setup.
Either way, check out CRA's official documentation on extending ESLint rules, or even better, use something like craco, react-app-rewired or customize-cra to get complete control over your ESLint config without having to eject from CRA.
As it turned out, the only thing I needed to do was add a .env file in my project root with this:
EXTEND_ESLINT=true
Then everything worked fine. I love simple solutions but my lord was that tedious! :)
I started to use React Native recently and, following the oficial docs, I initialized a project using npx react-native init ProjectName.
I'm not sure if the tools versions matters (probably yes), but i'm using npm version 6.13.7, react-native-cli version 2.0.1 and react-native 0.62.2. With that config, the file architecture i that get is the following:
I seached about it, but i not found an answer. So, can someone please explain to me what is the purpose of each file in this file architecture and which of these files can i remove?
Thank you in advance :D
Package.json
This file holds all of the dependencies of modules that your app is using and needed to install for running your app.
yarn.lock files yarn and package-lock.json
These two files hold the version of your dependencies yarn.lock package-lock.json is automatically generated for any operations where npm or yarn modifies either the node_modules tree or package.json. It describes the exact tree that was generated, such that subsequent installs are able to generate identical trees, regardless of intermediate dependency updates.
app.json
This file holds your application name etc.
babel.config.js
This file holds configs related to babel, Babels is a transpiler that transpile ES6 to ES5.
index.js
This is the entry point of your application form where your react-native code start executing.
EsLint and Prettier
These file related to maintaining the code indentation, Unused imports, extra, spacing, these files holds configs related to these things(EsLint and prettier are used to avoid above-mentioned things).
.watchMan
watchman watches the code changes when the packager is running, so this file have configs about this.
.Flow
Flow is been used for type checking so it holds the configs related to this.
node_modules
This folder holds all of the modules that your app is been using also lited down in your package.json.
And then there is Android(which holds native android code), IOS(which holds native ios code), and other JS files which holds code react-native js code.
I created an app with react-create-app, I just dev it using npm start, that seems to do react-scripts start according to my package.json
Whenever I add a proxy to my package.json, I get this error message :
Invalid Host header
I get the idea, it's a security issue. What I don't get is how to fix it. I read several issues on github and QA here on the subject, the fix is easy enough, but I still don't get where to put it
in the end, I will add a whitelist of hosts. I think I saw it's possible.
but where do I put this config to start :
devServer: {
disableHostCheck: true
}
Another way to disable the host check would be to set the following environment variable: DANGEROUSLY_DISABLE_HOST_CHECK=true
That can be done by e.g. adding that line to .env file in the root of the project. Note that this is not a secure solution and should not be used in production.
You can manage it without changing stuff inside node_modules or by ejecting your project by using an npm package called react-app-rewired.
It basically has an option to override your default hardcoded settings for webpack that are inside a create-react-app boilerplate setup.
You put a config-overrides.js inside your root folder and change the scripts inside your package.json to match react-app-rewired instead of the react-scripts. This way you can override all the webpack config that's hard coded inside a react project by writing it down inside a config-overrides.js file.
The syntax is inside this link. There's also an article about it which can be found here.
I never found out where to put the webpack.config.js. It didn't work in the app root directory where I suppose it should go, it didn't do anything for me, I just ended up modifying where react-scripts invokes webpack-dev-server and then put the disableHostCheck to true directly before invoking.
Basically I changed the following line :
const serverConfig = createDevServerConfig(
proxyConfig,
urls.lanUrlForConfig
);
to :
var serverConfig = createDevServerConfig(
proxyConfig,
urls.lanUrlForConfig
);
serverConfig.disableHostCheck = true;
that's really not good practice (modify the code and disableHostCheck), but now I know I can actually modify settings, I'll just go for a whitelist, may be one day I'll understand why it doesn't care about my webpack.config.js ^^
Install react-app-rewired:
npm install react-app-rewired --save-dev
change package.json script to
"start": "set PORT=80&&react-app-rewired start",
then add a file named .env.development, add this line:
HOST=buzzbuzzenglish.com
then add config-overrides.js file (you can override some webpack settings there but don't have to - still, file have to be created)
finally you type npm start, then browser will open and navigate to buzzbuzzenglish.com and renders normally without the Invalid Host Header error.
I use facebook's create-react-app, which intentionally hide all the configuration setup, and leave us with a lovely simple file structure
That's great! but there's one really annoying thing that come up:
SublimeLinter is no longer works
because the .eslintrc configuration file is not longer at the root of the project.
Key points
I know I can put another .eslintrc file at the root,
but I would like to be able to set my rules in one place
I know it is possible to npm eject to get the entire project structure out in front, but I would like to keep things simple. otherwise it becomes just another boilerplate
I noticed that in the package.json
What I already tried?
a direction I thought about is to change:
"eslintConfig": {
"extends": "./node_modules/react-scripts/config/eslint.js"
}
to:
"eslintConfig": {
"extends": "./.eslintrc.js"
}
but it seems to require all the eslint-plugins (which are magically hidden from node_modules) so I'm not sure it's the right way.
Any insights?
SublimeLinter is no longer works because the .eslintrc configuration file is not longer at the root of the project.
This is not correct.
SublimeLinter will work just fine but you currently have to install a few things globally. The generated project’s README includes the instructions to get linter IDE integration working:
Finally, you will need to install some packages globally:
npm install -g eslint babel-eslint eslint-plugin-react eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-flowtype
We recognize that this is suboptimal, but it is currently required due to the way we hide the ESLint dependency. The ESLint team is already working on a solution to this so this may become unnecessary in a couple of months.
This is, of course, assuming that you’re fine with the ESLint configuration we picked for you.