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).
Related
I have noticed the JavaScript classes not resolving when typing the following in a Shopware JavaScript plugin:
This got me thinking. Is there any way to solve this not resolving? Are there any other configuration recommendations for Shopware development in PhpStorm? I've already seen some in the Shopware Academy backend course and the documentation, but might there be more?
Updated answer, quick solution
In your project directory tree find src/Storefront/Resources/app/storefront, right click the folder, Mark directory as, Resource Root. This should make the aliased modules resolved.
Older answer, possible permanent fix
Theoretically PhpStorm should be able to resolve the aliases defined in src/Storefront/Resources/app/storefront/webpack.config.js.
However it fails analyzing that file:
Webpack
Can't analyze webpack.config.js: coding assistance will ignore module resolution rules in this file.
Possible reasons: this file is not a valid webpack configuration file or its format is not currently supported by the IDE.
Error details: Definition file does not exists
I found the reason is line 465 of src/Storefront/Resources/app/storefront/webpack.config.js:
const injector = new WebpackPluginInjector('var/plugins.json', webpackConfig, 'storefront');
Replacing that line with the following line made the modules using the aliases resolvable:
const injector = new WebpackPluginInjector(path.resolve(projectRootPath, 'var/plugins.json'), webpackConfig, 'storefront');
If you're using the development template and the Shopware mono-repo is located in the platform diretory this change will make Webpack look for platform/var/plugins.json instead. So either copy or symlink var/plugins.json to that location.
This is obviously just a temporary workaround and needs to properly be fixed eventually.
As a side note: The separate webpack.config.js for the administration also fails to be analyzed by PhpStorm as of now. So this won't fix non-resolvable aliases for PhpStorm in the administration.
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 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.
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.
I am attempting to optimise a project using r.js, with source code held in subversion. I'm getting the following error:
> node r.js -o generic-profile.js
> Error: Error: EPERM, operation not permitted 'C:\xxx\GUI\generic\.svn\entries'
at Object.fs.unlinkSync (fs.js:760:18)
I believe the problem is that r.js is attempting to copy the .svn directories from the source folders to the build folders.
Is there a way to exclude .svn directories when running r.js? Can I add something to my build profile, for example?
Here is what my build profile currently look like:
({
"appDir": "../src/generic/",
"baseUrl": ".",
"dir": "../generic/",
"include": ["../vendor/require",
"../vendor/text",
"../vendor/i18n"],
"optimize": "uglify2",
"modules": [
{
name: "app"
}
],
"mainConfigFile": "generic-config.js"
})
Update
Since reading Louis's excellent answer, it's clear that this is not an issue with subversion, but a poorly-configured build profile. I've done some further reading on how to set up a build profile, and this example helped immensely.
If you're having a similar problem, this may help.
By default r.js already excludes from processing directories that begin with a period. The setting is fileExclusionRegExp and the default value is /^\./ so .svn will be skipped. (Looking at the code of r.js I see that fileExclusionRegExp matches against the basename of each file.)
The error you are seeing is consistent with your input directory coinciding with your output. You do not set keepBuildDir to true, so your output directory is being removed. Change your dir to build somewhere else.
Or you keep your output under version control. Setting keepBuildDir to true would take care of the immediate problem but could create more problems down the road if you perform transformations on the output of r.js.