I would like to configure my GLOBAL eslint installation to lint my typescript project in Visual Studio Code.
So I installed the Visual Studio Code extension "ESLint" and installed ESLint with
npm install -g eslint
According to https://www.npmjs.com/package/#typescript-eslint/eslint-plugin it is required to install #typescript-eslint/eslint-plugin globally as well, so I ran
npm install -g #typescript-eslint/parser #typescript-eslint/eslint-plugin
to install it together with the ts parse #typescript-eslint/parser.
Next, I added a very simple .eslintrc-file:
{
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
},
"rules": { }
}
However, as soon as I run eslint . in my project directoy I get:
Error: Failed to load parser '#typescript-eslint/parser' declared in '.eslintrc.js': Cannot find module '#typescript-eslint/parser'
Next I tried removing the globally installed parser and install it locally, yet this won't work neither: Now my global eslint installation can find my local parser, but the parser needs yet another local installation of typescript, eslint etc. I want to run everything globally, though.
I simply can't get it to work! Can anyone help me with the process?
Here are some suggestions...
In your .eslintrc you haven't specified the '#typescript-eslint' plugin...
"plugins": ["#typescript-eslint"],
Also, if you get this working you will also want to specify parserOptions.project & tsconfigRootDir with an absolute path because finding your tsconfig.json - so that you can use the rules that require type info - is harder from a global install.
Also, I think you need to explicitly tell the eslint plugin to validate your TS files (and maybe js and react etc., as desired) with vsc settings....
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
],
BUT, I fear the whole thing is an uncertain undertaking.... note that the docs say...
It is also possible to install ESLint globally rather than locally
(using npm install eslint --global). However, this is not recommended,
and any plugins or shareable configs that you use must be installed
locally in either case.
I'm noting here that global installs are not recommended, but also that this quote seems to contradict the reference you noted that said to install the plugin globally. I'm not sure which is right as I've stopped setting it up this way since it isn't recommended. Hope this helps never-the-less.
Related
I have a module which exposes a bin in package.json which points to a TypeScript file. The .ts file has a ts-node shebang and is executable and works well.
However, when trying to use this binary from another package, I get errors:
Using npm i -g to install globally, when the binary is called which in turn calls ts-node I get errors for all the missing types declared in devDependencies of the module containing the binary, since devDependencies aren't installed when installing the module from another module. I have to manually install all the devDependencies such as `npm i -g #types/lodash" which makes no sense to do.
Using npx causes module related errors since I'm trying to use import syntax etc from a stand-alone ts-node call:
(node:67861) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
SyntaxError: Cannot use import statement outside a module
Is there any way to build a module which exposes a binary which is a wrapper around a ts-node script, and where that binary is actually executable through npm i -g or npx?
Move the "missing" package references into "dependencies".
NPM says that "devDependencies" is for "Packages that are only needed for local development and testing" while "dependencies" is for "Packages required by your application in production". So what is "production"? In the case of modules like this, "production" means use in other packages!
In other words, since the type-only packages are still truly required for use by a consumer, they don't belong in "devDependencies" but in "dependencies". This wouldn't be the case if you were pre-compiling into plain JS, but since you're not, the type packages simply need to be there in "production".
Note that this won't necessarily increase your ultimate bundle size in e.g. a web app. If your consumer package lists your tool package in "devDependencies", then ultimately the types packages will not be considered necessary for "production" for the consumer package.
I'm following this tutorial for a MEAN stack and I can't run my server I get this error
Babel compilation error TypeError: Cannot read property 'bindings'
Here is my repo
The tutorial you are following must be a little old. You'd need to add #babel/core and #babel/preset-env as dev dependencies in your application.
npm install --save-dev #babel/core #babel/preset-env
You'd also need to replace contents of .babelrc file with following as #iLuvLogix pointed out.
{ "presets": ["#babel/preset-env"] }
Please note that server.js that babel-watch looks for, seems to be missing in your repo. You'd need to create that, since that's the first file (as per your package.json) that gets executed when you start your server.
In case you are using babel 7.x, try changing your .babelrc file to
{ "presets": ["#babel/preset-env"] }
If you are referencing the package babel-preset-env in your .babelrc (which is for 6.x), you want to reference #babel/preset-env instead (which is for 7.x).
Here's the report of this issue on GitHub
If Node.js packages are globally installed, they can be used by Node.js applications. But Visual Studio Code will not accept these packages and indicate an error, as long as these packages are not installed locally in the project directory (inside the subdirectory node_modules).
For example:
import * as net from 'net';
... 'net' is marked with a red underline as long as you do not install npm install --save #types/node. If you install that package globally via npm -g install #types/node, the package would be available, but code (V 1.17.1) will not recognize it.
So my question, is there a way to configure code to recognize global installed Node.js packages?
IntelliSense for global modules is not supported as of VS Code 1.18. Please file an new issue against TypeScript if you really need this feature
However you really should not need to install #types packages when working with JavaScript in VS Code. Automatic types acquisition should kick in and download these for you. There are also explicitly force these types to be downloaded by adding the following to your jsconfig.json
"typeAcquisition": {
"include": [
"node"
]
}
For TypeScript projects, you should install #types locally as dev dependencies.
This is rather a workaround/partial answer (and I cannot comment yet):
As long as all your scripts that you don't want to create a full package.json for (e.g., simple standalone scripts) have a common root directory in the filesystem, vscode seems to recognize a "global" package.json and node_modules directory at that root.
More concretely, you could run npm i -D #types/node in your home directory, and vscode finds the types for all scripts somewhere below the home directory (i.e., $HOME/**/*.ts).
(Only tested on Linux with a single file, and vscode 1.64.1.)
I use create-react-app to make a react app.
the linter works in create-react-app but now i want make it work in my sublimetext.
Installed eslint yarn global add eslint (eslint v4.1.1 but also tried v3.19.0 because react app uses that one)
run eslint --init and configured it
go to directory of project and made a file called .eslintrc
inside file:
{
"extends": "react-app"
}
run in project directory eslint src/App.js
get error in terminal :
Referenced from: /mnt/storage/Dev/newapp/.eslintrc
Error: Cannot find module 'eslint-config-react-app'
Referenced from: /mnt/storage/Dev/newapp/.eslintrc
at ModuleResolver.resolve (/home/user/.config/yarn/global/node_modules/eslint/lib/util/module-resolver.js:74:19)
at resolve (/home/user/.config/yarn/global/node_modules/eslint/lib/config/config-file.js:515:25)
at load (/home/user/.config/yarn/global/node_modules/eslint/lib/config/config-file.js:584:26)
at configExtends.reduceRight (/home/user/.config/yarn/global/node_modules/eslint/lib/config/config-file.js:421:36)
at Array.reduceRight (native)
at applyExtends (/home/user/.config/yarn/global/node_modules/eslint/lib/config/config-file.js:405:28)
at loadFromDisk (/home/user/.config/yarn/global/node_modules/eslint/lib/config/config-file.js:556:22)
at Object.load (/home/user/.config/yarn/global/node_modules/eslint/lib/config/config-file.js:592:20)
at Config.getLocalConfigHierarchy (/home/user/.config/yarn/global/node_modules/eslint/lib/config.js:228:44)
at Config.getConfigHierarchy (/home/user/.config/yarn/global/node_modules/eslint/lib/config.js:182:43)
I did add yarn global add babel-eslint eslint-plugin-react eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-flowtype. but i think this is not necessary anymore!
I think if you add the module mentioned in the error message (eslint-config-react-app) it should work? eg. yarn add --dev eslint-config-react-app
There's probably a misconfiguration in your package-lock.json file, where ESLint was removed. I've encountered the exact same issue and solved it via:
cd <your-project-directory>
rm package-lock.json
rm -rf node_modules
npm install
You can run npm ls eslint --depth=99 to verify the eslint package is installed. I've stumbled upon this via a comment from feross on GitHub.
So what i found out is that you have to install 'all' the eslint packages global. cause it won't let you deal with global eslint and local packages
so what i did was
yarn global add eslint#^3.19.0 eslint-plugin-jsx-a11y#^5.0. and now it works :|
First install this package, ESLint and the necessary plugins.
npm install --save-dev eslint-config-react-app babel-eslint#9.x eslint#5.x eslint-plugin-flowtype#2.x eslint-plugin-import#2.x eslint-plugin-jsx-a11y#6.x eslint-plugin-react#7.x
Then create a file named .eslintrc.json with following contents in the root folder of your project:
{
"root": true,
"ecmaFeatures": {
"jsx": true
},
"env": {
"browser": true,
"node": true,
"jquery": true
},
"rules": {
"quotes": 0,
"no-trailing-spaces": 0,
"eol-last": 0,
"no-unused-vars": 0,
"no-underscore-dangle": 0,
"no-alert": 0,
"no-lone-blocks": 0
},
"globals": {
"jQuery": true,
"$": true
}
}
See Reference
While organizing a hackathon, I ran across this issue. The above configuration-related solutions did not work for me.
This ended up being several bugs in one for me.
First, SublimeText is currently (Nov 12, 2021) not compatible with Eslint v8.0, which was released somewhere in September or October 2021. I solved this by doing the following:
# HEADS UP: If your project currently relies on eslint v8.0, then further Sublime Text configuration might be required.
# Global install
npm uninstall -g eslint
npm install -g eslint#7
# Local install
npm uninstall -D eslint
npm install -D eslint#7
But that wasn't sufficient. Now the thing wanted typescript, because I had chosen to use typescript when i initialized the file on my local project. (You can do this too by running eslint --init)
So I had to do the following:
# Local install
npm install -D typescript
Works just fine now.
My solution:
Just delete 'extends' param from .eslinttc.js'
Then delete 'env' properties apart from 'browser' from .eslinttc.js'
Then hit the 'yarn lint' in console, and it will tell you what is
missing
Update #typescript-eslint/* packages, to avoid TS version errors
In my case these two did the trick
npm install eslint-plugin-react-native#latest --save-dev
npm install eslint-plugin-unused-imports#latest --save-dev
I have typings.json file with declarations to include some of the typescript definitions required for my project. Check reference below
...
"ambientDependencies": {
"bluebird": "registry:dt/bluebird#2.0.0+20160319051630",
"express": "registry:dt/express#4.0.0+20160317120654",
"express-serve-static-core": "registry:dt/express-serve-static-core#0.0.0+20160322035842",
...
But when I try to execute typings install command nothing gets installed and typescript issues following statement
--- (No dependencies)
Unlike npm install which installs packages from package.json, the typings command is not working as expected. Am I having a wrong assumption? Till now I have avoided check-in of the typescript definitions (stored inside typings folder) in version control (like node_modules). Is it necessary to check-in this files?
UPDATE
It was my mistake, I update the typings command line utility to version 1.0.5. I checked the https://github.com/typings/typings and realized that I need to change the typings.json to work with new major version. changed the typings.json as per the instructions given on the site and it is working now.
You've added the definitions using 0.x version of typings.
--ambient command is deprecated. Use --global instead.
In order to fix existing typings.json file you can rename "ambientDependencies" to "globalDependencies"