I added ESLint to my chrome extension project. I am using chrome API which starts with chrome., but obviously eslint points on it as error.
I suppose it should be something like:
"env": {
"browser": true,
"chrome": true,
"es6": true
},
but apparently it's not.
UPD: I would consider best answer is to add webextensions: true – as wOxxOm suggested. Because it's a chrome extension - chrome. API is heavily used here.
Otherwise adding /* global chrome */ as other suggested would work better.
Thanks for answers.
You need to add:
"env": {
// ...
"webextensions": true
}
to your .eslintrc.json file or eslint configuration in general.
You can add this in your eslint config file to add a global variable
"globals": {
"chrome": true
}
Edit: In create-react-app v4.0.0, the EXTEND_ESLINT flag is no longer required to customize the ESLint config, so the following answer should not be necessary past version 4.0.0.
We've also upgraded eslint-plugin-hooks to version 4.0.0 and removed the EXTEND_ESLINT flag as it is no longer required to customize the ESLint config.
I am using create-react-app and found that in addition to defining:
# This is YAML btw
env:
# ...
webextensions: true
in my eslint config (which adds chrome as a global), I also had to set the EXTEND_ESLINT environment variable for create-react-app to true. Docs here.
There are a few different ways of setting this environment variable. For example, you can create a .env file in the root of your project folder with the content:
EXTEND_ESLINT=true
From the documentation, I believe this an experimental feature, but it provides your eslint config to the eslint-loader. Prior to setting enabling this, I had to manually comment the
/* global chrome */
in each file, since the build process was not using my eslint config and therefore not recognizing that I set chrome to be a global.
And although this question does not mention create-react-app, I'm sure lots of people will come to this question with the same circumstance as myself.
As mentioned in the comments there is no chrome environment, you can find more information about the configurable environments in the eslint docs.
You can specify globals for each file as a top line comment, or in your configuration file, see specifying global. You can also write your custom Eslint Chrome plugin that sets the globals and parser options(that is what an environment does for you) and import that into your config file.
Related
I've been having issues trying to compile TypeScript to JavaScript when using decorators. The error I get is this:
app.ts:11:7 - error TS1219: 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.
11 class Person {
~~~~~~
I've been searching here in StackOverflow for ways to fix it, and also on other websites, and nothing seemed to work for me. Here's what I've already tried:
I already have "experimentalDecorators": true in my tsconfig.json file
I added "javascript.implicitProjectConfig.experimentalDecorators": true in my settings file
I tried disabling all my VSCode extensions
I tried restarting VSCode multiple times and opening the project folders in multiple ways
I keep getting this same error anyways. My TypeScript version is 4.1.2.
Edit: I uploaded my project to google drive at this link.
I would suggest one more thing you could try by checking your tsconfig.json to see if this does include your source file or not.
I assume your file is located in under: src/index.ts, so you might also need to include it in the configuration file.
tsconfig.json
{
"compilerOptions": {
// ...
"experimentalDecorators": true
},
"include": [
// Include your source file as well
"src"
],
}
In case of running with input file (your own pattern)
In this case tsc doesn't allow you to use your own config anymore which is tsconfig.json file.
So you need to specify your options via the CLI as following:
tsc -w '.\src\app.ts' --experimentalDecorators --target es6
add setting
{
...
"js/ts.implicitProjectConfig.experimentalDecorators": true,
...
}
In VSCode go to preferences -> settings, type javascript in search settings input and then you will see an option to Javascript > Implicit Project Config: Experimental Decorators. Check it and save the settings file.
I'm currently using ESLint in my project, and have configured it to run inside VSCode, and enforce a custom ruleset. So far it is working as expected, and flagging lines in my code where violations occur. I now need to specify that the environment is browser (as suggested in the solution to this issue). How exactly do I do that, yet keep everything else about ESLint working as-is?
That GitHub issue indicates I need to edit my .eslintrc file. But I don't see any such file in the root of my project. I do see .eslint files in several different dependencies, e.g.
C:\Users\snarl\development-snarl\development-wordpress\linting-wordpress\node_modules\is-callable
I could be wrong, but those don't seem related.
I tried creating a new file--.eslintrc.json--in the root of my project, and adding to that file:
{
"env": {
"browser": true
}
}
But when I did this, and re-checked ESLint inside VSCode, it stopped flagging the rules in my custom ruleset (examples), and actually flagged a new rule (screenshot). This seems to completely supersede some of my existing ESLint settings, rather than supplement them.
Thanks.
I posed this question to the ESLint Google Group (see here), and received a reply with the answer. If there is no ESLint config file in my project's root directory, ESLint falls back and looks for one in the user's root directory. I checked that directory on my computer, and there was indeed an ESLint config file there (.eslint.json). If I create a new config file in my project's root directory, that will supersede the config file in the user root directory. So the solution was to move the config file from my user root directory to my project's root directory, then to it, add the env lines:
"env": {
"browser": true,
"node": true
}
That resolved my issue. After, ESLint inside VSCode continued to lint my files, using the same custom rule set. Furthermore, ESLint seemed to understand that the env was browser. Although I didn't explicitly check that. I say that because the ESLint error that was previously reported, was no longer reported. And my assumption is that is occurring because the env has been properly set to browser (as per this issue).
I use React and VSCode, I wanna setup self-closing when code is saved but I don't know how...
What I wanna do is
<Hello></Hello>
after I save code
<Hello />
Where can I setup self closing?
Thank you.
You need to enable the related rule and make sure VSCode is integrated to fix lint warnings/errors on saving.
Enable react/self-closing-comp rule:
// eslint config file (package.json / eslintrc / settings.json etc.)
{
...
"rules": {
"react/self-closing-comp": "error"
}
}
Within settings.json at VSCode make sure you got auto-fix enabled (for example with vscode-eslint extension, it may be any other lint extension related):
// settings.json # VSCode
{
...
"eslint.autoFixOnSave": true,
"eslint.run": "onSave",
}
Refer to eslint-plugin for vscode for integration.
Note that eslint-config-airbnb enables it by default (I suggest using any config).
Add this ti vscode config:
vscode settings.json:
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
For as far as I know you can achieve something like that with "javascript.autoClosingTags": false. However I know that some part of the community really dislikes this feature since it often closes components that you don't want to be closed. I don't know if you are familiar with Typescript? But if you are I recommend using React in combination with type script (create a project by npx create-react-app . --typescript. While developing it automatically checks for these cases and gives you a compile error if you have an empty component.
I hope this answers your question
Facebook's Jest testing framework is easy to get started with, but the documentation overlooks an annoying aspect: test statements will be highlighted as errors by any editor that tries to warn of undefined symbols, because test, expect, and all matcher methods are not defined.
Similary, attempting to run a test file with node directly will fail with ReferenceError: test is not defined.
What require/import statement(s) need to be added for those errors to go away?
Node
If you want to run them directly through node, try to require jest and/or jest-runtime. Also give #types/jest a try as well.
Check Edit 2 for new info about this
Edit
#types/jest (jest-DefinitelyTyped) is definitely needed (or just one solution). If you install it (e.g., dev dependency), the IDE errors should go away.
I just tried it on Webstorm, and it works.
Edit 2
The new Jest#20 Matchers (e.g., .resolves and .rejects) are still not defined in #types/jest. You can keep track of its status on the links below:
https://github.com/DefinitelyTyped/DefinitelyTyped/pull/16645
https://github.com/DefinitelyTyped/DefinitelyTyped/issues/16803
It should be available soon, though!
Also, it doesn't seem possible to run it directly through node. Last night I tried a bunch of different things, but using jest is the way to go - it really uses node under the hood, so I thought it would be possible as well. #thymikee over your opened issue at GitHub made clear that it's not.
Edit 3
The new release (20.0.1) includes the newest Jest definitions.
Lint
this isn't in the scope of this specific problem, but it also helps
Are you using something like ESLint? If so, you'll need eslint-plugin-jest
Following the steps described in this page: https://www.npmjs.com/package/eslint-plugin-jest, you will basically need to add it as an ESLint plugin and set jest globals in the ESLint configuration:
{
"env": {
"jest/globals": true
}
}
If you plan on supporting ES6 tests, you'll also need Babel and babel-jest plugin with the following jest configuration:
"transform": {
"^.+\\.js$": "babel-jest"
}
Finally, for Typescript tests you'd need the #types/jest and ts-jest packages as well
Adding following .eslintrc configuration is enough
{"env":
{
"jest": true
}
}
I'm using VSCode and ESLint, you need to install eslint-plugin-jest
Add jest info to your .eslintrc.js
{
"plugins": ["jest"]
},
"env": {
"jest/globals": true
}
I am new to ESLint, and I have successfully integrated ESLint with IntelliJ.
Out of the box, my integration of ESLint did not recognize node, but basic review of documentation made clear that by creating the configuration file named .eslintrc at the root of my project folder (with the proper IntelliJ setting to access this file) and setting "node":true, ESLint recognizes node (i.e., the following complete .eslintrc works).
// Contents of .eslintrc at root of project - support for Node and jQuery
{
"env" : {
"node" : true,
"jquery" : true
},
}
However, ESLint still does not recognize require(), as evidenced by this screenshot:
I have done my best in a reasonable amount of time searching for a solution to the basic question of how to get ESLint to recognize require(). In particular, I found a possible hint here, where it suggested to add "amd":false in (I presumed) the .eslintrc file - but no go.
This seems basic. How can I get .eslintrc to recognize require()?
(If, in your answer, you can provide insight how to cover more general cases, that would also be helpful. Thanks!)
Adding amd to env inside .eslintrc will enable you to use define() and require(), as per the amd spec:
{
"env": {
"amd": true
}
}
The problem is not with ESLint. If you look closely at your message, it says JSHint.
Since you're trying to configure ESLint, simplest solution would be to disable or remove JSHint plugin form your IDE.
If you still want to use JSHint along with ESLint, you can do the following:
Single file solution: add /* global require */ at the top of your file.
General solution for all files: add "node": true line to your .jshintrc.
"amd":true in env
defines require() and define() as global variables as per the amd spec.
See http://eslint.org/docs/user-guide/configuring#specifying-environments
On a Mac ... global solution. (2021)
If you are using the amazing ESLint in the amazing VS Code on Mac,
Simply go to ~ (ie /users/your-name)
edit .eslintrc.json (you can edit it in VSCode of course!)
You'll likely add
"node": true
if you're working with node, or perhaps "amd" as stated in the answers here. ("amd" gives specifically and only require and define).
This is a global solution for all workspaces you open.
Importantly, this also works if you are using VS Code "remotely", so, with no workspace. For example, you may open a file on a server just using sftp, and work on the file in VSCode. Or you may be opening just a single local file on the Mac, not part of a workspace. In both these cases the setting (eg, node=true) will in fact work - it needn't be a workspace.