I have recently added ESLint-ing into my angular application and soon realised I needed the eslint-plugin-angular plugin in order to get my application to be linted correctly.
Prior to this, I was using the extends property in my .eslintrc file and setting to eslint:recommended to make use of the eslint recommended rule set.
{
"extends": "eslint:recommended"
}
I tested this worked by adding a trailing comma to an object definition in my code to make sure I saw an error appear from eslint.
Now, following the guides for the eslint-plugin-angular, I have also installed eslint-config-angular and I see that the quickest way to get started is using the shareable config.
If I use the extends angular config option in place of my current:
{
"extends": "angular"
}
I no longer get my error thrown for an unexpected trailing comma.
So, is there a way I can use both angular and eslint:recommended in the extends config option?
E.g:
{
"extends": ["angular", "eslint:recommended"]
}
(which I know does not work)
If not, does this mean I have to create a rules config object in my .eslintrc to mimic the recommended ones from eslint?
{
"extends": "angular",
"rules" : {
...
}
}
I can't speak to whether or not there was a code change between the time this SO article was entered but I am using "extends": ["eslint:recommended", "angular"] in my .eslintrc file and it is working fine. I have it at the same level as the "env" property.
My package.json file has eslint and eslint-plugin-angular versions 2.3.0 and 0.5.0, respectively.
If you are using TypeScript (like Angular2 is) you can use tslint.
There are eslint rules for tslint and tslint-microsoft-contrib from Microsoft.
Finally, there's a rule set for Angular2: codelyzer
Related
I have a react monorepo project with a number of aliases (typescript paths) setup which makes importing files easier without the need to use relative paths everywhere.
For example if I have a component in src/components/Sidebar/Toggle.jsx and I want to import that anywhere in the application I can just do import {Toggle} from '#company/components/Sidebar/Toggle' and there’s no need to do any relative path importing like ../../../Toggle.
Company is just an example alias to the src directory setup in tsconfig.json like:
"paths": {
"#company/*": ["./src/*"]
},
This works fine in vscode but in neovim (I’m using nvim-lspconfig with eslint) all exported functions which are imported using the alias have a warning
Exported declaration not used within other modules
even though they are.
If I import them using relative paths it works without warning.
Does anyone have a suggestion as what config I need to change so that neovim can see that these functions are in fact used in other files?
I've tried adding config in .eslintrc.json like this as suggested by https://www.npmjs.com/package/eslint-import-resolver-typescript but this did not solve it.
settings: {
'import/resolver': {
typescript: {
project: ['packages/*/tsconfig.json'],
},
},
}
I should also note that running eslint directly on the file with my current configuration works fine with no errors so this is somehow related to the neovim plugin.
With a bit more debugging I can see that the eslint plugin doesn't seem to be using the correct configuration file as it's root. There is an .eslintrc.js file in a sub folder but the main .eslintrc.js file lives higher up in the directory tree. The plugin seems to find the first .eslintrc.js and use that as the root file.
This seems to have turned out to be related to the eslint plugin in nvim-lsp. More here https://github.com/neovim/nvim-lspconfig/issues/2400
So my vscode keeps on giving me this error when I tried to implement mobx observer into react native.
Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.
I believe that I have followed every instruction in the website below.
https://jamesmargrove.medium.com/setting-up-a-typescript-react-native-project-with-decorators-93eb8a8ffa9
Also I can't find the tsconfig or jsconfig anywhere in my project. Please help
Try adding a jsconfig.json file in the root of the project with the following contents:
{
"compilerOptions": {
"experimentalDecorators": true
}
}
I'm getting an error "Uncaught ReferenceError: regeneratorRuntime is not defined". Please help me to find out the error and how to resolve it.
Install the runtime dependency
npm i --save-dev #babel/plugin-transform-runtime
Add the plugin to your .babelrc file
{
"plugins": ["#babel/plugin-transform-runtime"]
}
More Info:
https://babeljs.io/docs/en/babel-plugin-transform-runtime
TLDR;
Async functions are abstraction on top of generators.
Async functions and generators are now supported in all major browsers and in Node10 and upwards.
If you are using a transpiler (such as babel) for backwards compatibility, you would need an extra "layer" that transforms generators. This implies transforming ES6 into ES5 at runtime since their syntax isn't backwards compatible. See https://cmichel.io/how-are-generators-transpiled-to-es5
Thanks It works when I add an import statement -- import regeneratorRuntime from "regenerator-runtime"; in the component i am using async/await.
just add
"browserslist": [
"last 2 Chrome versions"
]
at the end of your projects package.json file, also see that its plural browsers not browser!
Your file in the end might look something like this ->
},
"dependencies": {
"prop-types": "^15.8.0",
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"browserslist": [
"last 2 Chrome versions"
]
}
ignore the dependency section in the above code view, its just for reference on how your package.json might look.
2022
If you're working with Babel 7 or later version, you don't need to install an extra plugin (neither #babel/plugin-transform-runtime or #babel/plugin-transform-regenerator or other plugins).
Later, you have to include this statement every time you're using async/await syntax.
import regeneratorRuntime from "regenerator-runtime";
Maybe if you have set a linter in your project it will warning you about that statement is declared but its value is never read, but I think is just an error, because if you delete it the code doesn't work.
Ran into this problem (using Babel v7) and even after following the advice and installing relevant packages, I was still unable to get id of this error. following stack overflow posts were checked...
Babel 6 regeneratorRuntime is not defined
Babel 7 - ReferenceError: regeneratorRuntime is not defined
Following actions helped:
Go to package.json & add the following inside 'jest' (screenshot added also):
"moduleNameMapper": {
".+\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$":
"identity-obj-proxy" }
when running a test use the following suffix in the command...
--setupFilesAfterEnv "./src/setupTests.js"
so to run a test, it will be:
$ jest /pathToTest/TestFile.test.js --setupFilesAfterEnv
"./src/setupTests.js"
Hope it helps someone like it helped me...
If it's really necessary for you to use the async function then the solutions above should work. Another way to resolve this is to use regular promises, at least that was in my case.
I've got a sort of weird problem, that I don't see any mention of elsewhere.
Create React App by default seems to log lint warning in the terminal when running yarn start and also in the Chrome console. All good. Makes sense, and I've seen discussions of whether this functionality should exist, and how it should work.
My issue is that those warnings seem not to match my .eslintrc settings at all!
As in, if I run yarn lint, which runs eslint using my settings, I see none of the warnings that show up in the console and terminal when I start my app.
For example, I have this rule turned off in my .eslintrc file:
"radix": 0,
And, consequently, there's no radix warning when I run yarn lint.
(Just in response to the answer below. I've tried a variety of options for this particular rule, including "as-needed". But I wanted to turn the rule off entirely, which I've evidently accomplished, because running yarn lint shows no errors related to radix at all).
But when I start the app, I see this in yellow warning boxes in the console:
Anybody know why my .eslintrc file is being ignored here, and how to get these warnings to represent the rules I've set?
According to the docs, you should pass either "always" or "as-needed". The latter should disable those warnings.
...
"radix": "as-needed",
...
EDIT: According to this source, you will have to eject your create-react-app to edit the ESLint settings.
It is possible to add EXTEND_ESLINT flag to the .env file.
When set to true, ESLint configs that extend eslint-config-react-app will be used by eslint-loader. Any rules that are set to "error" will stop the application from building.
Source: https://create-react-app.dev/docs/advanced-configuration
Your eslint config may be named .eslintrc.json and put in the root folder of your project.
Its contents should look like the following (note the extends field):
{
"extends": "react-app", //this extends statement is required
"rules": {
"radix": "as-needed"
}
}
And the .env file placed in the root should have the following line:
EXTEND_ESLINT=true
Update
I added a .eslintc file to the root of my client app and, in it, added this JS Object:
{
"extends": "react-app",
"plugins": ["prettier"]
}
That removes the linting problems from displaying in my IDE but still leaves Prettier in a bad state; that is, when I format, Prettier adjusts my code in a way that produces a ton of errors.
I think I need to next adjust the config rules that are guiding how my Prettier plugin functions. Any help with that would be appreciated. My ultimate goal is to get Prettier/ESLint to function as they do originally when shipped with Create React App. Thanks for the help so far!
End Update
I've been building a project that is using React and Material-UI on the front-end. I'm using VSCode as my IDE with ESlint and Prettier. I had originally initiated the front-end of the project with Create React App.
All had been going well until I did something - and I have no idea what - to make my ESLint become super stringent. It's now presenting problems all over, whereas the same code previously had zero linting problems, and no changes to the code have been made.
I've also been using Prettier and now, because of these linting problems, when I format with Prettier, the code adjusts to address the Linting problems. Which causes actual errors.
I've been searching all over. I installed ESlint Plugins, been digging around, looking for (and creating .eslintrc.json) files. Nothing seems to work. It is making work on this project much more difficult.
What did I do? How do I fix it?
Thank you.
Add or Update your .eslintrc.js file
set indent off
set globals false if it (definition not found)
Hope it helps
module.exports = {
rules: {
indent: 'off',
'new-cap': [0]
},
globals: {
db: false,
mongoose: false,
response: false,
offline: false
}
};