I'm having issues setting up validation via Tern with ESLint. I disabled the internal parsing as shown, http://tools.jboss.org/documentation/whatsnew/jbosstools/4.3.0.Final.html#javascript-development-tools-improvements, and I enabled ESLint. In the project properties javascript > Tern > Validation > ESLint I specified the .eslintrc config file to use (also tried eslint.json).
I can run ESLint from the command line and it gives me all the nice errors to fix, but I don't know why it's not work in Eclipse via Tern. Also I enabled the jQ library, but it's not giving me auto-complete either. I'm not sure if there's some other configuration I'm missing for Tern or not.
I found that it expects only the rules in the configuration.
Instead of:
{
"env": { ... },
"extends": "eslint:recommended",
"parserOptions": { ... },
"rules": {
"no-trailing-spaces" : "error"
}
}
It's just looking for:
{
"no-trailing-spaces" : "error"
}
Related
A bit of context, in a React proyect we have been using data-cy and data-testid attributes, we will use only data-testid and we would like VS Code to show a warning (or error is possible) in case anyone tries to use data-cy
It can also be some configuration in eslint or prettier, if error is displayed in VSCode its fine
So far I have been trying with this .eslintrc settings but they don't work
{
"extends": ["ts-react-important-stuff", "plugin:prettier/recommended"],
"parser": "#babel/eslint-parser",
"rules": {
"react/forbid-component-props": [
2,
{
"forbid": ["data-cy"]
}
],
"react/no-invalid-html-attribute": ["data-cy"]
}
}
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 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.
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.
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.