I see that in https://github.com/Gillespie59/eslint-plugin-angular/blob/master/environments.js subsection mocks eslint-plugin-angular declares the inject global variable.
How do I import these environment settings from my application? I tried "extends": "angular" but eslint still complains:
7:14 error 'inject' is not defined no-undef
I tried adding:
"env": {
"angular/mocks": true
}
to the config, but then I got
Environment key "angular/mocks" is unknown
You are getting this error because ESLint can only use environments exposed by plugins and not configs. You have to register eslint-plugin-angular as plugin in your config file:
"plugins": ["angular"],
"env": {
"angular/mocks": true
}
If that still doesn't work, you should run ESLint with --debug flag to see if your config is correctly loaded and environment is applied. You can also run ESLint with --print-config flag followed by a path to some file in your repository to see all of the rules and global variables that ESLint will use when linting that file.
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
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
I am using this generator to build react application. All the warnings listing in console; Its messing console all and very annoying
how can I turn it off ? I checked webpack.config file but cant see any info about it
The warnings are a result of the generator's eslint configuration. To change the config project-wide look for the .eslintrc file in the project's root directory. To stop reporting unused variables e.g., add a line with "no-unused-vars": 0 to the config.
To read up on the eslint rules and how to configure them it is best to look them up on their website, e.g.
no-unused-vars
quotes
no-undef
comma-dangle
no-console
no-trailing-spaces
I'm writing a web app in TypeScript. The app uses React and Relay from Facebook.
My TypeScript source code gets compiled into ES6 code using the TypeScript compiler TSC. Then, the ES6 code gets transpiled into ES5 code using Babel. In order for Relay to work in the browser, a Babel plugin needs to transform the Relay GraphQL queries: https://facebook.github.io/relay/docs/guides-babel-plugin.html. The problem is, because TSC first transpiles these queries, the Babel Relay plugin doesn't recognize them anymore so they don't get transpiled into something the browser understands, so the browser throws an error:
Uncaught Invariant Violation: RelayQL: Unexpected invocation at
runtime. Either the Babel transform was not set up, or it failed to
identify this call site. Make sure it is being used verbatim as
Relay.QL.
My TypeScript source code:
const SiteQuery = {
store: () => Relay.QL`query { site }`
};
... this gets compiled by TSC into something like this:
var SiteQuery = {\r\n store: function () { return (_a = [\"query { site }\"], _a.raw = [\"query { site }\"], Relay.QL(_a)); var _a; }\r\n};
... instead of something like this (because the Babel Relay plugin doesn't do its work properly):
var SiteQuery = {\n store: function store() {\n return (function () {\n return {\n fieldName: 'site',\n kind: 'Query',\n metadata: {},\n name: 'Router',\n type: 'Site'\n };
This is because the Babel Relay plugin doesn't recognize the transpiled version, and as a result it doesn't transpile the query into something the browser understands.
How to make this work?
The answers here were helpful, but I thought I'd share what finally worked for me.
Setup your babel-relay-plugin correctly. If you're running into problems here, I recommend using the npm package babel-relay-plugin-loader which then allows you to specify the location of your schema.json in package.json. For example:
{ "metadata": { "graphql": { "schema": "./schema.json" } } }
Setup your babel config correctly. It should look something like this:
{
"passPerPreset": true,
"presets": [
"react",
"es2015",
"stage-0"
],
"plugins": [
"babel-relay-plugin-loader"
]
}
},
Setup your tsconfig to target "es6" -- this actually was essential to make my setup work. ts-loader then compiles to es6 and Babel handles the transpile down to es5.
Finally, add the loaders to your webpack config. Remember, it applies these RIGHT to left. So, mine looks like this:
loaders: [
{
test: /.tsx?$/,
exclude: /node_modules/,
loader: 'react-hot!babel!ts-loader',
},
],
You need to tell the Typescript compiler to transpile to ES6, then use Babel with babel-relay-plugin and es2015 preset to transpile the code to ES5 to run in your browser.
I recommend using Webpack to orchestrate all this. These will get you started:
http://www.jbrantly.com/typescript-and-webpack/
http://www.jbrantly.com/es6-modules-with-typescript-and-webpack/
The posts were written for Babel 5.x, so you'll need to manually add es2015 preset to make sure Babel compiles the ES6 sources to ES6.
Just in case, when you say
My TypeScript source code gets compiled into ES6 code using the TypeScript compiler TSC. Then, the ES6 code gets transpiled into ES5 code using Babel.
You can instruct TypeScript itself to transpile directly to es5, just set target: 'es5' in tsconfig.json and that's it, hope it helps since you can eliminate babel from your compile chain.
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