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.
Related
In looking to use a new fairly large project (Three.js) and for teaching beginners, I can see the appeal of auto-complete.
However, for Atom, even with the atom-typescript package, I'm not finding very clear guidance on how to set this up (I have some familiarity with TypeScript syntax but am not used to setting it up myself.). I'd expect for something as useful as type-aware autocomplete for JavaScript, there might be some quick-start tutorials out there for just this use case, but I have not found anything which has helped get things working.
According to https://www.typescriptlang.org/docs/handbook/declaration-files/consumption.html , I'd expect I should just be able to run:
pnpm i -D #types/three
...(using pnpm as my package manager) and then add the import (if the THREE global isn't defined by the #types/three package):
import * as THREE from 'three';
I also ran pnpm i -D typescript figuring Atom might want to access a local copy.
Adding a jsconfig.json with the following (in the root directory with my other files and package.json) did not help:
{
"compilerOptions": {
"lib": ["es2015", "dom"]
}
}
And in atom-typescript I have enabled "Enable Atom-TypeScript for JavaScript files (experimental)". The only other package with "typescript" in the name that I have is "language-typescript" (and I've disabled "ide-typescript").
Even if I need to set up my own declaration file, shouldn't I be getting errors?
Adding a declaration file of my own didn't seem to change anything though. threed.d.ts:
declare module "threed" {
}
I'd expect at least errors about not having types, but not getting anything.
And I also added the following to my ~/.atom/init.coffee file as per https://github.com/TypeStrong/atom-typescript/blob/master/docs/faq.md#i-want-to-use-atom-typescript-with-javascript-too :
#CHANGE THE PACKAGE NAME IN THE NEXT LINE IF YOU'RE USING
#A DIFFERENT GRAMMAR PACKAGE
do (grammarPackageImUsing = "language-javascript") ->
atom.packages.onDidTriggerActivationHook "#{grammarPackageImUsing}:grammar-used", ->
atom.packages.triggerActivationHook 'language-typescript:grammar-used'
...and did a restart.
I also tried command-shift-P and TypeScript: Activate. Nothing. What am I missing?
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 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.
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
}