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.
Related
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.
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.
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.
My project has eslint and it's own eslint.json file with its rules, I want to either use that my global eslint or override the project level one and just use my global eslint settings, is there a way to do that.
I currently have the following settings in my VSC
"eslint.enable": true,
"eslint.run": "onSave",
"eslint.autoFixOnSave": true,
"eslint.trace.server": "messages",
"eslint.alwaysShowStatus": true,
"eslint.options": { "configFile": "/Users/almog/.eslintrc.json" },
you can initiate eslint in your required folder by using eslint cli command elsint --init and follow the instructions and then specify the eslintrc (eg: .eslintrc.js)
setup file path in vscode "eslint.options": { "configFile": "C:\\Users\\user66\\.eslintrc.js" }
Sometimes when I startup VSCode and I save an JS file, everything gets messed up.
example
From:
To:
On save
What I found out:
When I change a VSCode User setting (something related to the prettier plugin | anything (I normally change the prettier.eslintIntegration but it could be that any change in the setting resolves it)) it stops breaking on save.
Possible related environment details
// Part of .eslintrc
{
parser: 'babel-eslint',
extends: ['airbnb', 'prettier'],
plugins: ['prettier'],
rules: {
'prettier/prettier': 'error'
}
...
}
// .prettierrc.yml
printWidth: 80
tabWidth: 4
useTabs: false
semi: false
singleQuote: true
trailingComma: es5
bracketSpacing: true
jsxBracketSameLine: false
arrowParens: always
// Part of my VSCode 'User Settings' file
"javascript.format.enable": false,
"javascript.validate.enable": false,
"prettier.eslintIntegration": true,
"typescript.format.enable": false
// Possible related modules from my package.json
"babel-eslint": "^8.2.1",
"eslint": "^4.16.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-config-prettier": "^2.9.0",
"eslint-import-resolver-webpack": "^0.8.4",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-prettier": "^2.6.0",
"eslint-plugin-react": "^7.5.1",
"prettier-eslint": "^8.8.1",
VSCode Extension suspects:
dbaeumer.vscode-eslint
esbenp.prettier-vscode
If any other (debugging) information needs to be provided, please shoot.
For me the issue was that the Beautify extension performed the formatting in .js files, and it didn't know how to handle JSX syntax.
The solution was to prevent Beautify from formatting Javascript files.
In order to do so you need to add the following setting to your User Settings in VSCode (reachable using ctrl+shift+p and selecting Preferences: Open User Settings):
"beautify.ignore": [
"**/*.js"
]
I had similar issues using ESLint and Prettier together in VS Code. After trying dozens of ways, the following configuration works for me.
ESLint and Prettier are installed globally on my machine.
I am using these extensions:
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
My .eslintrc.json file looks like this:
{
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"extends": ["eslint:recommended"],
"parserOptions": {
"sourceType": "module"
},
"rules": {
"indent": ["error", 4],
"quotes": ["error", "single"],
"semi": ["error", "always"],
"no-console": "off"
}
}
In your VS Code, please go to Preference > Settings > User Settings and add the following lines:
"editor.formatOnSave": true,
"prettier.tabWidth": 4,
"prettier.eslintIntegration": true,
"prettier.stylelintIntegration": true
I am not using eslint-config-prettier or eslint-plugin-prettier and everything works fine for me.
Important: Please make sure you do not have any other automatic formatter (other than Prettier) extension installed.
When using VSCode, Prettier and ESLint the same time you may have different conflicting rules.
Setting rules manually in VSCode and ESLint may have no effect, but try to do that first. Also, Prettier settings may be saved in its own config file - .prettierrc or some like that.
If no effect, then check these:
In dev dependencies is proper version installed [eslint-config-prettier][1]
If you've used React/Vue/other-3d-party tool or source, you have to check that you're use NOT #vue/eslint-config-prettier version (see package.json and lock files)
In eslintrc file there is extends: ['prettier']. Same as the previous check there no library depended version specified.
I had this issue after a VSCode update. I downgraded to the previous version and Prettier worked normally again.
The issue for me is that I had both Prettier and JS-CSS-HTML-formatter installed in VS Code. As soon as I uninstalled JS-CSS-HTML-formatter the issue went away.
I had the same issue. I uninstalled the extension and it solved the problem.