VS Code ESLint — resolve plugins from custom directory - visual-studio-code

How can I get ESLint setup with VS Code when my node_modules is not in the workspace root?
root/
third_party/
node_modules/
.eslintrc
src/
(source files)
In the VS Code settings, I have ESLint setup to load from the custom node_modules location:
"eslint.nodePath": "third_party/node_modules"
However, I'm still getting the following error message:
Failed to load plugin '#typescript-eslint' declared in '.eslintrc': Cannot find module '#typescript-eslint/eslint-plugin'
Require stack:
- /path/to/repo/__placeholder__.js
Referenced from: /path/to/repo/.eslintrc
Happened while validating /path/to/repo/src/index.ts
This can happen for a couple of reasons:
1. The plugin name is spelled incorrectly in an ESLint configuration file (e.g. .eslintrc).
2. If ESLint is installed globally, then make sure '#typescript-eslint/eslint-plugin' is installed globally as well.
3. If ESLint is installed locally, then '#typescript-eslint/eslint-plugin' isn't installed correctly.
And here's my .eslintrc:
{
"plugins": [],
"extends": [
"eslint:recommended",
"plugin:#typescript-eslint/recommended",
"prettier"
],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"sourceType": "module",
"ecmaVersion": "latest",
"project": "./tsconfig.json"
},
"ignorePatterns": ["node_modules"]
}
I saw there's a CLI option (--resolve-plugins-relative-to) that will tell ESLint where to look for the plugins, but that doesn't seem to be exposed to the .eslintrc or in the VS Code extension settings.
https://eslint.org/docs/user-guide/command-line-interface#--resolve-plugins-relative-to
Due to my specific circumstance, changing the directory structure is not possible.

Related

How to format mongodb script using VS Code

I am using "MongoDB for VS Code" extension for scripting and running mongodb scripts. I used to format the script code by changing language to javascript and then format and then reverting file language to MongoDB to work. Can someone please let me know how can I associate JavaScript formatter to mongodb file extension without loosing the language support for mongodb.
Came across this same problem this morning, as I started developing Atlas Functions & Aggregation Pipelines but wanted to test them quickly in my local playgrounds. This is what I came up with.
My quick config which enables Prettier and ESLint for MongoDB Playgrounds in VSCode, whilst keeping the Intellisense and MongoDB Playground syntax highlighting.
This requires the following VSCode extensions:
MongoDB for VS Code
ESLint
Prettier
Once the extensions are installed I configured a simple Node project loosely following Add Eslint, Prettier, and Airbnb Style Guide to Your Project, adding the AirBnB styles.
npm init -y
npm i eslint-plugin-import eslint-config-airbnb-base eslint-config-prettier eslint-plugin-prettier prettier -D
npx eslint --init
I use .eslint.json for configuration which I updated as follows
{
"env": {
"browser": true,
"es2021": true
},
"extends": ["airbnb-base", "prettier"],
"overrides": [
{
"files": ["**/*.js", "**/*.mongodb"]
}
],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"ignorePatterns": ["node_modules/"],
"plugins": ["prettier"],
"rules": {
"no-console": "off",
"prettier/prettier": "warn"
}
}
Notice in the overrides section I have added **/*.mongodb to the files array. Which will allow ESLint to recognize .mongodb files and parse them as well.
Next I added .prettierrc which also includes *.mongodb in override files arrays.
{
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"singleAttributePerLine": true,
"overrides": [
{
"files": "*.mongodb",
"options": {
"parser": "flow"
}
}
]
}
All this config actually has an added bonus, in that in package.json I have defined the following scripts.
"scripts": {
"lint:check": "eslint ./",
"lint:fix": "eslint --fix ./",
"style:check": "prettier --check ./",
"style:fix": "prettier --write ./",
"mongo:check": "prettier --check '**/*.mongodb'",
"mongo:fix": "prettier --write '**/*.mongodb'",
}
I can run these from command line, and they can also be used with pre-commit hooks.
Coming back to VSCode Config, there are a few settings that I added. For prettier there is a setting called prettier.documentSelectors and for ESLint there are eslint.validate and eslint.probe.
"prettier.documentSelectors": ["**/*.mongodb"],
"eslint.probe": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"html",
"vue",
"markdown",
"mongodb"
],
"eslint.validate": ["mongodb"],
Best to add the above settings into the user settings, although the seem to work even when added to the workspace settings (.vscode/settings.json).
After applying all these I now have ESLint linting the *.mongodb files and Prettier formatting them as well on save.
Here is the repo with the config.

Parsing error: cannot find module '#babel/preset-react' when loading multiple projects into VSCode at once

After updating from babel-eslint to #babel/eslint-parser, currently in VSCode (with multiple project folders all loaded at once, collectively in a parent folder that contains all projects), we are receiving the same problem for every file in our react project:
Per this post - Parsing error: Cannot find module '#babel/preset-react':
Maybe it'll help someone, I just had a similar problem which I solved. I happened to have VSCode opened in a fullstack project where front and back were separate folders. When I opened VSCode only in the front folder this error faded away. I guess a solution would be to make a shared node_modules folder or setup a workspace from front and back folders, I went with the 2nd option.
Can confirm that our full-stack project (React frontend, Node backend) is in one directory, and that loading only the frontend directory in VS code resolves the issue. However, we have a strong preference for loading multiple projects at once - a single high-level github-projects directory of ours, that contains multiple different projects, into VSCode. We are seeking a solution that truly resolves the issue, rather than side-stepping the issue by only loading a single project folder with our React app.
Is there anyway to resolve this issue while still loading multiple projects into VSCode? I have attempted to install #babel/eslint-parser globally however it did not resolve the issue.
Edit: our .babelrc file inside the react project. Presets commented out as including them / uncommenting it did not resolve the issue.
{
"env": {
"production": {
"plugins": ["transform-remove-console"]
// "presets": [
// "#babel/preset-react"
// ]
}
}
}
We've tried updating ecmaVersion to 2022 in both .eslistrc files, with no luck. We've also tried installing #babel/eslint-parser in both FE and BE projects, with no luck resolving issue.
.eslintrc in parent-dir/client for react app:
{
"env": {
"browser": true,
"node": true,
"es6": true
},
"globals": {
"nconf": true
},
// "parser": "babel-eslint",
"parser": "#babel/eslint-parser",
"plugins": ["react"],
"parserOptions": {
"ecmaVersion": 2022,
"requireConfigFile": false,
"sourceType": "module",
"ecmaFeatures": {
...
.eslintrc in parent-dir/server for node app:
{
"env": {
"browser": true,
"node": true,
"es6": true
},
"globals": {
"nconf": true
},
"parser": "#babel/eslint-parser",
// "parser": "babel-eslint",
"plugins": ["react"],
"parserOptions": {
"ecmaVersion": 2022,
"sourceType": "module",
"ecmaFeatures": {
...

Why the stylelint vscode extension is not working on my computer?

I follow the guide to install stylelint vscode extension, but it does not work on my computer.
I'm pretty sure that I follow all the necessary steps.
Install Extensions.
Disable the built-in linters in User setting.
Use npm to install stylelint and its standard configuration.
Create a .stylelintrc.json configuration file in the root of my project.
Run stylelint from command-line.
But the extention still not automatically validate the css, what is going wrong?
After reading the guide again, I found the setting stylelint.config and understand its definition:
Set stylelint config option. Note that when this option is enabled, stylelint doesn't load configuration files.
So I look at my vscode user setting, oh, stylelint.config: {}. After changing it to null, stylelint automatically validates the css file immediately.
Phew~
I faced the same issue. Let me share how I got it to work smoothly with Stylelint extension ver.1.2.2:
In root project folder, you should have the following structure:
/path/to/project/
.vscode/
settings.json
extensions.json
src/
.stylelintrc.json
package.json
extensions.json
From the official documentation: Starting with 1.x, vscode-stylelint will depend on having a copy of Stylelint installed in the open workspace (recommended) or globally (not recommended). If the extension doesn't seem to be linting any documents, make sure you have Stylelint installed
{
"recommendations": ["stylelint.vscode-stylelint"]
}
settings.json
{
"css.validate": false,
"less.validate": false,
"scss.validate": false,
"stylelint.validate": ["css", "scss"]
}
package.json
Some of the following packages are to detect reserved words inside sass files such us #use, #export, #global and so on. I think you don't actually need all of them, but it is my configuration.
// DevDependencies
"stylelint": "^14.6.0",
"stylelint-config-css-modules": "^4.1.0",
"stylelint-config-standard-scss": "^3.0.0",
"stylelint-scss": "^4.2.0"
.stylelintrc.json
{
"extends": ["stylelint-config-standard-scss", "stylelint-config-css-modules"],
"plugins": ["stylelint-scss"],
"rules": {
"at-rule-no-unknown": null,
"scss/at-rule-no-unknown": true
}
}
After configuring each file, remember to close vscode and open it again in order to start enjoying Stylelint!
In the extension settings, you should to check the file extensions, which it is watching:
Stylelint: Snippet
Stylelint: Validate
You can also do it through setting.json
"stylelint.snippet": [
"css",
"less",
"postcss",
"scss"
],
"stylelint.validate": [
"css",
"less",
"postcss",
"scss"
]
Open extension settings to add a configuration rules source stylelint-config-standard-scss (or whatever you installed, more here )
For example, I have this, additionally rewritten some of my rules:
"stylelint.config": {
"extends": "stylelint-config-standard-scss",
"rules": {
"no-empty-source": null,
"no-missing-end-of-source-newline": null,
"max-line-length": [
300,
{"ignore": ["comments"]}
],
"selector-combinator-space-after": "never",
"selector-combinator-space-before": "never"
}}
The same settings in the linter for the GitHub Action and in the VSCode extension are very convenient. Now I know about the problems in advance and do not wait until the build happens in the repository.
I got a new PC and installed the newest version, 1.2.1, and nothing worked - then I checked the version on the old PC, and it was at version 0.86.0. When changing the version to the older version and reloading VSC, it worked immediately.

VSCode failed to load plugin cannot find module 'eslint-plugin-prettier'

I'm installing eslint and Prettier in my project and trying to get automatic code formatting to work through VSCode. When I go to a React file, I see that ESLint is in error so I open up the ESLint console where I see:
Failed to load plugin 'prettier' declared in 'js/.eslintrc.js': Cannot find module 'eslint-plugin-prettier'
I believe I have all the necessary modules installed, here is a piece of my package.json file:
"devDependencies": {
"babel-eslint": "^10.0.3",
"babel-loader": "^8.0.6",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.10.0",
"eslint-loader": "^3.0.3",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.18.3",
"prettier": "1.19.1"
}
The only thing I can think of is that this is being caused by my project directory structure, which is as follows:
/
(some Java stuff out here)
js/
node_modules/
package.json
package-lock.json
.eslintrc.js
.prettierrc
For reference, here is my .eslintrc.js:
module.exports = {
root: true,
env: {
browser: true,
node: true
},
parserOptions: {
parser: 'babel-eslint',
ecmaVersion: 2015,
sourceType: 'module'
},
extends: [
'prettier',
'plugin:prettier/recommended'
],
plugins: [
'react',
'prettier'
],
rules: {
}
}
For further reference, here is my settings.json in VSCode:
{
"terminal.integrated.shell.osx": "/bin/zsh",
"editor.formatOnSave": false,
// turn it off for JS and JSX, we will do this via eslint
"[javascript]": {
"editor.formatOnSave": false
},
"[javascriptreact]": {
"editor.formatOnSave": false
},
// tell the ESLint plugin to run on save
"eslint.validate": [ "vue", "html", "javascript", "javascriptreact"],
"prettier.disableLanguages": [
"javascript", "javascriptreact"
],
"eslint.workingDirectories": [
{ "mode": "auto" }
],
"liveServer.settings.donotShowInfoMsg": true,
"workbench.startupEditor": "welcomePage",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"liveServer.settings.donotVerifyTags": true,
"diffEditor.ignoreTrimWhitespace": false,
}
Update: It seems like this is an issue with VSCode doing autoformatting on subdirectories. Once I opened just the subdirectory as the "project root" in VSCode then it started doing all the formatting for me on save. I'm still curious if I can get this working without this workaround.
i had the same issue.
In your root workspace you have a .vscode folder with a settings.json.
Add the following:
{
"eslint.workingDirectories": [
"./{PATH_TO_CLIENT}" // replace {PATH_TO_CLIENT} with you own path
]
}
related issue: create-react-app subfolder projects do not lint
VSCode/eslint will not pick newly installed npm packages in the node_modules directory. After running npm i eslint-plugin-prettier restart the VSCode workspace. Happens to me consistently, every time I setup a new Javascript/Node/React project and add eslint & prettier, using this guide in the order it suggests.
Upgrading to eslint#7.32.0 fixed the issue for me. Was previously on a ~7.10.0. Be sure to restart VSCode if using it.
yarn upgrade eslint
# or
npm update eslint
Here is the working solution :
Steps :
Remove node_modules and yarn.lock/npm.lock
Reinstall packages with yarn or npm.
Install eslint again with npm i --save-dev eslint eslint-plugin-jest or yarn add --dev eslint eslint-plugin-jest
try this command will solve your problem: worked for me as well:)
npm i eslint-plugin-prettier#latest -D
Check that you don't have duplicated copies of eslint in your package i.e. yarn list eslint should only return one version. Otherwise de-dedupe by checking the versions in you package.json and ensure that yarn.lock is not interfering.

eslint not running for html files

It would seem the eslint extension is not startet in VSCode when I open .html files.
If I execute ESLint: Fix all auto-fixable Problems with a .html file opened I get the following message:
ESLint is not running. By default only JavaScript files are validated. If you want to validate other file types please specify them in the \'eslint.validate\' setting.
Everything is working fine when I open .js files in vscode.
I have already installed the eslint-plugin-html plugin.
Everything is working fine when I manually pass the .html file to eslint CLI, thus I gusss it's not an issue with the eslint plugin.
Here's my complete settings.json file:
{
"eslint.options": {
"extensions": [".html", ".js"]
},
"eslint.validate": [
"javascript",
{
"language": "html",
"autoFix": true
}
]
}
Here's the start of my .eslintrc.js file:
module.exports = {
env: {
browser: true,
es6: true,
},
extends: 'airbnb-base',
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly',
},
parserOptions: {
ecmaVersion: 2018,
sourceType: 'module',
},
plugins: [
"align-assignments", "html",
],
settings: {
"html/report-bad-indent": "error",
},
rules: { ...
I have already looked at eslint is running but not showing any lint errors/warnings and at How can I get ESLint to lint HTML files in VSCode? but none of the answers did help me.
Note that I do not even see the ESLint output channel as described in the screenshot here: https://stackoverflow.com/a/54138880/4349415
I can only see this ESLint output channel, telling me that the ESLint server has startet, when I open a .js file.
The issue was not with ESLint or VSCode, but with another VSCode third party extension: Mako (version 0.2.0)
https://marketplace.visualstudio.com/items?itemName=tommorris.mako
Disabling this extension fixed the ESLint support in HTML files.