I've just tried updating to create-react-app 4, and have a ton of typescript eslint warnings, particularly
Missing return type on function #typescript-eslint/explicit-module-boundary-types
Is there any way to override these in a .eslintrc.json file for runtime?
I've currently got overrides that work there for my project when I explicitly execute
npm run lint
But when I use npm run start I get a ton of lint warnings that I can't seem to control.
Is there any way to do this?
It turns out there is a way to override the .eslint rules.
Create a .env file in your root, if you don't have one.
Add the following to it as a new line: EXTEND_ESLINT=true
Extend the lint rules in your favorite way. I use .eslintrc.json but other mechanisms exist
Now with that in place, have a look at the included rules from react, which live in
node_modules\eslint-config-react-app\index.js and copy the rules you like into your rules section.
You may also want to pay careful attention to the overrides section, examples of which you can see in the above file, and if you have js in your project, you may want to remove the default parser,
parser: 'babel-eslint'
and then only override for typescript files.
Related
When i try to npm start, error:
No configuration provided for .../main.scss, Error in plugin
"gulp-stylelint".
Someone help me!
The quickest way to add a configuration to stylelint is to extend one of the official shared configs:
stylelint-config-recommended
stylelint-config-standard
You should extend the standard config if you want stylelint to enforce stylistic conventions like spaces after colons in declarations and use the recommended config if you don't.
To use the standard config you should first install it as a devDependency:
npm install stylelint-config-standard --save-dev
Then create a configuration file, e.g. .stylelintrc.json, in the root of your project and add the following content to it:
{
"extends": "stylelint-config-standard"
}
I've tried for hours to set up ESLint using the Airbnb linter in Visual Studio Code. I ran the commands found here: https://www.npmjs.com/package/eslint-config-airbnb and set the peer dependencies to the correct versions, but still no luck. I always get this error:
Unexpected top-level property "“extends”". . Please see the 'ESLint'
output channel for details.
Does anyone know of a fix for this? I've read so many blogs and threads to no avail and am at the point where it seems like it's just more hassle than it's worth, though everyone says the Airbnb style guide is best for React.
Install the ESLint extension for VS Code. This will cause lint errors to show up inline, directly in the code editor (as opposed to just showing in the terminal when you use the command line).
Install eslint-config-airbnb and all of the dependencies (follow the instructions in the documentation). If you're using npm 5+, simply run this command in your terminal while inside of the project directory: npx install-peerdeps --dev eslint-config-airbnb.
Setup your ESLint configuration. You can add a basic config in your package.json file under the eslintConfig property, like so: "eslintConfig": { "extends": "airbnb" }
If you've done all of the above steps and are still getting the error you mentioned, see this thread, where a number of potential solutions are mentioned in the comments.
Specifically, in your case it sounds like your configuration is not getting read properly, for whatever reason. I would try adding it to your package.json as mentioned above to see if that solves it.
This is my babelrc file. installed module-resolver and declared root and aliases.
actually this do works!! but underline annoying me... please click images below I cannot post images cause I'm new here.
[https://i.stack.imgur.com/ZzN5O.png]
warning like this - module is not installed i think intelliJ recognize it as module..
[https://i.stack.imgur.com/GTcWx.png]
I changed my root "./" -> "./src" but it didn't work.
I also installed eslint but don't know about that well I think that won't help this problem
has anyone solved this kind of issue before?
IDEA provides no special support for babel-resolver; please follow WEB-28241 for updates.
The problem is that there are dozens of plugins defining their own ways to resolve modules, we can't afford providing special support for all them... You can try using webpack aliases instead, or try a workaround from https://youtrack.jetbrains.com/issue/WEB-22717#focus=streamItem-27-1558931-0-0:
create a file config.js (you can use a different name if you like) in your project root dir
define your aliases there using the following syntax:
System.config({
"paths": {
"components/*": "./src/components/*"
}
});
components here is the alias you have defined in .babelrc
Now you can use imports like
import MyComponent from 'components/core/MyComponent';
in your code
My project has a node dependency which depends on a environment variable to be set, the code is something simple as const KEY = process.env.SOME_KEY.
I understand that react-native has no support for traditional environment variables.
What are de options to fulfill this need and make this code work? Supposing I don't have control over the dependency's code.
The solution is pretty straight forward here, you should go with a custom babel transformer that will replace all process.env. calls within your code with real env values during transpilation step (during that phase there's an access to environmental variables). Transforms are also applied to the dependencies of your app which means you can apply neccessary modifications to the 3rd party code w/o actually changing it.
In order to do it, you should first create a .babelrc file like the one below and place it in the root of your project:
{
"presets": ["react-native"],
"plugins": [
"transform-inline-environment-variables"
]
}
Once that's done, go and npm install babel-preset-react-native and babel-plugin-transform-inline-environment-variables.
Finally, rerun react-native start (basically restart the packager) and all your process.env calls will be replaced.
I'm putting together a streamlined development process with react and react-native that:
encourages packages,
uses babel to transform es6 to js (it compiles before publishing/installing),
has a playground that let's you play with both native and web components.
The web part of it is perfectly fine. It's the native one that's causing issues and it has to do with react-native's packager.
The bottom line is: if the package is either linked through npm link or required directly from the playground as in require('../../') react-native's dependency resolver will go forever trying to identify dependencies inside my package's node_modules, most times it never finishes doing it.
The temporary solution I've found is to install the package in playground but this involves re-installing it every time I do an update, which isn't great because you can't see your changes right away (even if it would be automated, it would take time).
I believe that a better solution would be to ask the dependency resolver to ignore those specific modules I don't need (those in devDependencies mainly!). I tried mangling react-native/packager/blacklist.js by adding paths to that list and even putting checks against the dependency resolver but none of that would work.
Can someone with more experience with the packager give me a hint as to how I'd go about making the dependency resolver pass? Alternatively, it would be great if the packager could be separated and the transform process left to choice but I don't know if that would be doable either.
I found out the following solution, based on the comment in default.config.js:
* If you need to override any of this functions do so by defining the file
* `rn-cli.config.js` on the root of your project with the functions you need
* to tweak.
Create a rn-cli.config.js in the root of your project with the following contents:
var blacklist = require('react-native/packager/blacklist');
var config = {
getBlacklistRE(platform) {
return blacklist([
/node_modules\/my-package\/excluded-dir\/.*/
]);
}
};
module.exports = config;
The second argument to the blacklist function is an additional list of blacklisted paths, which can be regular expressions. See react-native/packager/blacklist.js for more examples.